use Jquery UI in Dart

Question

I'm trying to create a simple dialog in Dart and I thought it was easier to use existing javascript libraries. Here you can find the basic example, basically

$( "#dialog" ).dialog();

On internet and stackoverflow you can find 1000 examples but none works to me. I suppose this is the correct way:

import 'dart:js' as js;
//[...]
var jquery = new js.JsObject(js.context['jQuery']);
var myob = jquery('#dialog').dialog();

All I get is this error:

Breaking on exception: Class 'JsObject' has no instance method 'call'.

Have I misread Dart's documentation?

Alexandre Ardhuin · Accepted Answer · 2014-01-21 09:21:49Z

10

Basically, there are 2 libraries to interop with js : dart:js and package:js. dart:js has been created after package:js and most of the stackoverflow answers use package:js and are still valid (it isn't worth to downvote these answers...)

package:js provides a simpler Api that comes at the cost of an increase of the js size (because package:js uses dart:mirrors and noSuchMethod).

With package:js :

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

main() {
  js.context.$("#dialog").dialog();
}

With dart:js :

import 'dart:js' as js;

main() {
  js.context.callMethod(r'$', ['#dialog']).callMethod('dialog');
}

answered Jan 21, 2014 at 9:21

Alexandre Ardhuin

76.9k17 gold badges162 silver badges136 bronze badges

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

3 Comments

maugch Over a year ago

Thanks for the additional note about downvoting. I think I might have downvoted some because I thought they were outdated. I might go and add an answer myself next time I'm stuck browsig SO for answers. :) (I generally don't do that because new answer to old questions don't get much exposure unfortunately)

maugch Over a year ago

I tried the second one and it works BUT I get a warning: event.returnValue is deprecated. Please use the standard event.preventDefault() instead. I'm not sure where to use that though.

Alexandre Ardhuin Over a year ago

I think this warning comes from the js code inside the dialog plugin.

mica · Accepted Answer · 2014-01-20 21:58:06Z

2

try:

context.callMethod(r'$', ['#dialog'])
       .callMethod('dialog', []);

answered Jan 20, 2014 at 21:58

mica

4,4185 gold badges41 silver badges74 bronze badges

1 Comment

maugch Over a year ago

your answer is correct as well. Unfortunately I can't flag both as correct :(

Zdeněk Mlčoch · Accepted Answer · 2014-02-13 10:37:26Z

0

You can need just to be notified on callback. There is quick fix:

class CallbackFunction implements Function {
  final Function f;
  CallbackFunction(this.f);
  call() => throw new StateError('There should always been at least 1 parameter'
  '(js this).');
  noSuchMethod(Invocation invocation) {
    Function.apply(f, []);
  }
}

.callMethod("spinner", [new js.JsObject.jsify({
    "stop": new js.JsFunction.withThis(new CallbackFunction(recalc),
    "page": 1,
    "step": 0.1
    })])

void recalc(){
   print("recalcing");
}

You can parse invocation argument to read javascript callback arguments. Source: 'package:js/js.dart':line 238 (may change)

answered Feb 13, 2014 at 10:37

Zdeněk Mlčoch

7526 silver badges17 bronze badges

Collectives™ on Stack Overflow

use Jquery UI in Dart

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related