jQueryUI and jQueryUI-touch-punch don't work with Polymer.dart


I’m developing a small Dart app using jQueryUI and jQueryUI-touch-punch with Polymer.dart. When I don’t use Polymer.dart, everything works well. But with Polymer.dart, several problems occurred. Here is my codes.


<!DOCTYPE html>
  <meta charset="utf-8">
  <title>Dart and jquery ui with Polymer</title>

  <!--- stylesheet --->
  <link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.4.custom.min.css">
  <link rel="stylesheet" href="dart_and_jquery_ui_with_polymer.css">
  <!--- ---------- --->

  <!--- JSLib --->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-2.1.0.min.js"><\/script>')</script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script>window.jQuery.ui || document.write('<script src="js/libs/jquery-ui-1.10.4.custom.min.js"><\/script>')</script>
  <script src="js/libs/jquery.ui.touch-punch-0.2.3.min.js"></script>
  <!--- ----- --->

  <link rel="import" href="main_component.html">
  <script type="application/dart">
  export 'package:polymer/init.dart';
  <h1>Dart and jquery ui with Polymer</h1>

  <p>Hello world from Dart!</p>


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


<!DOCTYPE html>
<meta charset="utf-8">

<polymer-element name="main-component">
  <div id="sample_container_id">
   <button id="btn1">OPEN JSVer</button>
   <button id="btn2">OPEN DartVer</button>

   <div id="msg1">
    Hello, world1!

   <div id="msg2">
    Hello, world2!

 <!-- JSScript -->
 <script src="js/js_main.js"></script>
 <!-- -------- -->

 <!-- DartScript -->
 <script type="application/dart" src="main_component.dart"></script>
 <!-- ---------- -->


$( function(){

 // The code in this JS file totally doesn't work...
 // But there is no error message in JS console...

 // btn1 config
 $('#btn1').click( function() {
 } );

 // msg1 config
  autoOpen: false,
  buttons: {
   "OK": function() {
  title: "Dialog1",
  resizable: false,
  modal: false,
  show: 'fold',
  hide: 'puff'

 // btn2 and msg2 configs are implemented in Dart side.
} );


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

class MainComponent extends PolymerElement {

 MainComponent.created() : super.created(){
  // Constructor...

 void attached(){

  // btn2 config
  js.context.callMethod(r'$', [ $['btn2'] ])
   ..callMethod('click', [ 
     js.context.callMethod(r'$', [ $['msg2'] ])
      ..callMethod('dialog', ['open']);

  // msg2 config
  js.JsObject options = new js.JsObject(js.context['Object']);
  options['autoOpen'] = false;
  options['buttons'] = new js.JsObject(js.context['Object']);
  options['buttons']['OK'] = ([arg]){ 
   js.context.callMethod(r'$', [ $['msg2'] ])
    ..callMethod('dialog', ['close']);
  options['title'] = "Dialog2";
  options['modal'] = false;
  options['show'] = 'fold';
  options['hide'] = 'puff';
  js.context.callMethod(r'$', [ $['msg2'] ])
   ..callMethod('dialog', [options]);

The problems are

  1. msg1 doesn’t form dialog and btn1 doesn’t execute mouse click event I registered. This means JS scripts in “js_main.js” don’t work (with NO error message). I found custom elements of Polymer.dart implement Shadow DOM which prohibit any access from outside. Is this the cause of the problem?

  2. When I convert this Dart app into JavaScript using “pub build”, the generated product can run in a browser of my iPad mini(iOS6). This is OK. However, it seems jQueryUI-touch-punch doesn’t work well. So I cannot access any dragging or resizing action from my iPad mini.

Dart SDK version is 1.2.

Can anyone help?

Thanks for reading to the end 🙂


Your jQuery element selection code $('#msg'), $('#btnx') wont find any element inside the shadowDOM. There might be other problems but this one is obvious.

Answered By – Günter Zöchbauer

Answer Checked By – Terry (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *