Dart JavaScript interop callbacks with jQuery

dart, javascript

Solution

thanks for your question! I wasn't sure myself, but turns out this is possible. :)

First off, add `js` to your pubspec.yaml:

name:  jquerydart
description:  A sample application

dependencies:
  js: any

Then, run pub install, either via the command line or via Dart Editor.

Then, in your Dart file:

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

hideIsDone() {
  window.alert('all done!');
}

void main() {
  js.scoped(() {
    js.context.jQuery('p').hide(1000, new js.Callback.once(() => hideIsDone()));
  });
}

Note that to callback from JS into Dart, you need to create a Callback object.

Also note you cannot use `$` for the jQuery variable, as dart2js also uses `$`. So in the meantime you need to use `jQuery` in your Dart code.

Having said all that, it's cool that we can use jQuery via JS-Dart interop, but Dart should really do this for us. So I opened bug http://code.google.com/p/dart/issues/detail?id=6526

Problem

How can I translate the following jquery code to Dart? I'm having difficulty getting the alert callback to work using js.interop. ``` <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function () { $('p').hide('slow', function() { alert("The paragraph is now hidden"); }); }); </script> ``` Any help is appreciated.

Original source