0

I need to call bootstrap modals from Dart code and this is what I've tried (using the js library):

@JS('jQuery')
class jQuery {

  @JS()
  jQuery(obj);

  @JS('modal')
  external dynamic modal(func);
}

class Modal extends jQuery {

  Modal(obj) : super(obj);

  dynamic toggle() => super.modal('toggle');
  dynamic show() => super.modal('show');
  dynamic hide() => super.modal('hide');
  dynamic handleUpdate() => super.modal('handleUpdate');
  dynamic dispose() => super.modal('dispose');

}

in that code if I use the jQuery class directly I get no issues (jQuery.modal('show')) but if I use the Modal methods i.e.:

Modal modal = Modal('#myModal');
modal.toggle();

I will get a TypeError: Cannot read property 'call' of undefined (NullError) .

The javascript the code is jQuery('#myModal').modal(func)

My second issue is how to hook a custom event for example: show.bs.modal in jQuery I would use .on(...) but in Dart I have no clue, I've used element.addEventListener('show.bs.modal', onModalShown) but it isn't triggered and I don't get any errors.

Mattia
  • 5,909
  • 3
  • 26
  • 41

1 Answers1

2

you defined the jquery class but you need to get it from the window and you also need to defined you modal using @JS annotation, I don't think you can extend the jQuery class

I would have done like that

@JS('\$')
external dynamic jQuery(query);

@JS()
@anonymous
class ModalElement {
  external modal(String call);
  external on(String event, Function callback);
  ...
}

final modal = jQuery('#myModal') as ModalElement;
modal.modal('toggle');

modal.on('event', allowInterop((event) {}));
Hadrien Lejard
  • 5,644
  • 2
  • 21
  • 18
  • Thanks for you answer, but unfortunately it isnt working, the `ModalElements` methods don't do anything and neither throw an Error. – Mattia Sep 12 '18 at 13:20
  • now it's working, but is it possible to add more methods like: `toggle() => this.modal('toggle');` to the `ModalElement` class? – Mattia Sep 12 '18 at 13:34