Dart when using JQuery plugin for slider doesn't work as JavaScript did

Question

I'm beginning at using Dart for my Front-End development but I'm having some troubles. What I need is to use a JQuery plugin called FlexSlider http://www.woothemes.com/flexslider/ through the Js-Interop Dart Library. However it isn't working as it did with pure JavaScript and I can't even understand the bunch of illegible code that generates Dart2Js.

The code is this: Edit 1: I fixed it removing the document.ready and adding de js folder when importing js.dart.

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

void main()
{
    js.scoped(()
    {
        var element = js.context.jQuery('.flexslider');
        var options = js.map
        ({
            'animation' : 'slide'
        });
        element.flexslider(options);
    });
}

Of course I have the js.dart library file in the 'packages' folder inside the folder where my dart script is. And of course I have previously loaded JQuery in the HTML document where I'm calling the JavaScript generated by Dart2Js.

After correcting with the Alexandre's feedback... Such as it's right now Google Chrome Inspector is throwing the following 2 errors:

1 Uncaught ReferenceError: ReceivePortSync is not defined / (1):24 The StackTrace: - ProxiedObjectTable / (1):24 - (anonymous function) / (1):162 - (anonymous function) / (1):511 - $.$defineNativeClass.nY indexz.dart.js:1986 - $.fb indexz.dart.js:1087 - bind indexz.dart.js:1089 - $$.e7.P indexz.dart.js:612 - $$.J1.P indexz.dart.js:454 - $.Zs indexz.dart.js:1215 - $.i indexz.dart.js:1217 - $.e indexz.dart.js:1220 - $.s indexz.dart.js:1219 - $.E2 indexz.dart.js:1117 - $$.aX.vV indexz.dart.js:767 - $.Rq indexz.dart.js:1190 - (anonymous function) indexz.dart.js:2830

2 Uncaught TypeError: Cannot call method 'get$g' of null indexz.dart.js:439 The StackTrace: - $$.J1.get$g indexz.dart.js:439 - $.sL indexz.dart.js:1293 - $.fC indexz.dart.js:1205 - $.$defineNativeClass.JX indexz.dart.js:1907 - $.i indexz.dart.js:1217 - $.e indexz.dart.js:1220 - $.s indexz.dart.js:1219 - $.E2 indexz.dart.js:1117 - $$.aX.vV indexz.dart.js:767 - $.Rq indexz.dart.js:1190 - (anonymous function) indexz.dart.js:2830

My HTML code in HEAD is this:

<pre>
<head>
    <?php script('jquery') ?>
    <?php script('flexslider') ?>
        <script>
            jQuery = $.noConflict();
        </script>
    <?php script('indexz.dart') ?>
    <?php wp_head() ?>
<?php woo_head() ?>
    <?php style('global') ?>
    <?php style('flexslider') ?>
</head>
</pre>

My HTML code for the Slider is this:

<pre>
<div class="flexslider col-full" style="margin-left: auto; margin-right: auto;">
    <ul class="slides">
        <li>
            <?php image('1.png') ?>
        </li>
        <li>
            <?php image('2.png') ?>
        </li>
        <li>
            <?php image('3.png') ?>
        </li>
        <li>
            <?php image('4.png') ?>
        </li>
    </ul>
</div>
</pre>

I clear that I'm working with Wordpress and PHP and the image, script and style PHP functions work perfectly generating the corresponding HTML tags for each element and file.

Thanks in advance.

Alexandre Ardhuin Alexandre Ardhuin · Accepted Answer · 2012-12-27T14:18:25

If you're using pub your import should be import 'package:js/js.dart' as js;.

You can also skip js.context.$(document).ready because Dart main() does the same.

Because of a Dart2js bug, you have to alias $ with jQuery = $.noConflict(); to make the javascript compiled code working.

Finally, a working example could be :

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

void main() {
  js.scoped(() {
    var element = js.context.jQuery('.flexslider');
    var options = js.map({
      'animation' : 'slide'
    });
    element.flexslider(options);
  });
}

with

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src='http://flexslider.woothemes.com/js/jquery.flexslider.js'></script>
<script>
  var jQuery = $.noConflict();
</script>
<script type="application/dart" src="my_script.dart"></script>
<script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"‌></script>

Dart when using JQuery plugin for slider doesn't work as JavaScript did

1 Answers