Dart js-interop with jquery ui

Question

I'm new to Dart and I'm having trouble getting started with the js-interop library. I want to add a slider from jquery ui to my page, but I cannot figure out how to do the slider() setup call from Dart. Is js-interop the correct way of doing this? Some help with this would be much appreciated.

void main() {
  js.scoped(() {
    var slider = query('#slider-range');
    var options = js.map({
      'range': true,
      'values': [ 17, 67 ]
    });
    // This doesn't work. Element has no method named slider.
    slider.slider(options);

    // In javascript it's done like this:
    // $( "#slider-range" ).slider({
    //   range: true,
    //   values: [ 17, 67 ]
    // });

    // This alert works.
    js.context.alert('Hello from Dart via JS');
  });
}

Alexandre Ardhuin · Accepted Answer · 2012-11-02 15:28:35Z

3

In your case, you have to use js.context.$('#slider-range') instead of query('#slider-range'). Basically, js.context allows to access any Javascript variable. By using js.context.$ you get access to the jQuery javascript object (ie. $) on dart side.

import 'dart:html';
import 'package:js/js.dart' as js;

void main() {
  js.scoped(() {
    var slider = js.context.$('#slider-range');
    var options = js.map({
      'range': true,
      'values': [ 17, 67 ]
    });
    slider.slider(options);
  });
}

edited Nov 2, 2012 at 15:28

answered Nov 2, 2012 at 14:28

Alexandre Ardhuin

76.9k17 gold badges162 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

0tto Over a year ago

Thanks for the quick reply. Your solution seems good. But now I get an error on the var options line: paste2.org/p/2419107 Any ideas?

Alexandre Ardhuin Over a year ago

As of r14094 Map.getKeys() has been changed to Map.keys. Last version of js-interop in pub.dartlang.org does not contain the update with that change. Until a new version is landing, you have to use directly git://github.com/dart-lang/js-interop.git that contains the patch.

Alexandre Ardhuin Over a year ago

FYI js-0.0.9 has been published on pub.dartlang.org. See pub.dartlang.org/packages/js

alearg Over a year ago

what happens if the element to be selected is part of a component in shadow dom?

Alexandre Ardhuin Over a year ago

Whatever you use (jQuery, querySelector...) you cannot query an element inside a shadowRoot if the based element (window by default) is not inside the same shadowRoot.

greensuisse · Accepted Answer · 2013-06-22 10:31:15Z

1

Another sample code:

import 'package:js/js.dart' as js;

js.context.jQuery();
var context = js.context;  
var param = js.map({ 'modal': true, "width":1000, "height":600});
js.context.jQuery("#dialog").dialog(param);

in html

<script src="packages/browser/interop.js"></script>

The above code open a div as dialog using jQuery.

edited Jun 22, 2013 at 10:31

answered Jun 22, 2013 at 10:07

greensuisse

1,82520 silver badges18 bronze badges

1 Comment

maugch Over a year ago

This comment is not valid anymore. Can anyone update it?

Collectives™ on Stack Overflow

Dart js-interop with jquery ui

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related