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.
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) {}));