CODEWITHSUNDEEP
javascriptjqueryhaxe
Andrius Solopovas
Andrius Solopovas

Reputation: 1057

Haxe and jQuery Extern Library each function

I decided to learn haxe to compile JavaScript, the problem I face is that there is little info and example on how to use this language to achieve functionality of plain JavaScript. Maybe someone can help me to understand how can I utilize jQuery each function as it does not seem to work. It gives me an error when compiling "js.html.Node has no field width"

Here is the code. 

import js.Lib;
import js.Browser;
import jQuery.*;

class Main {

    static private var _jqSlider:JQuery;

    static public function main():Void {

        new JQuery(function():Void { //when document is ready
            myFunc();
        });

    }

    static private function myFunc() {
        _jqSlider = new JQuery("aSlider");

        _jqSlider.children().each(function(i,ele) {
            trace(ele.width());
        });
    }
}

Thanks. I am using these jQuery lib http://lib.haxe.org/p/jQueryExtern, I tried trace( JQuery.cur.width() ); gives me the folowing Class has no field cur, 

static private function myFunc() {
        _jqSlider = new JQuery("aSlider");

        trace( "hello" ); // works fine as  console.log("hello")

        _jqSlider.children().each(function(i,ele) {
            var ele = new JQuery(ele);
            trace( "hello" ); // Action Ignored
            trace(ele.width()); // Action Ignored
        });
    }'

This is the code it outputs to javascript

(function (console) { "use strict";
    var Main = function() { };
    Main.main = function() {
        $(function() {
            Main.myFunc();
        });
    };
    Main.myFunc = function() {
        Main._jqSlider = $("aSlider");
        console.log("hello");
        Main._jqSlider.children().each(function(i,ele) {
            var ele1 = $(ele);
            console.log("hello");
            console.log(ele1.width());
        });
    };
    Main.main();
    })(typeof console != "undefined" ? console : {log:function(){}});

Upvotes: 1

Views: 252

Answers (1)

clemos
clemos

Reputation: 426

This is rather a JQuery issue.

According to the jquery docs, ele is indeed a plain Element, not a JQuery object, and thus has no width() method.

You can either create a new JQuery object like this:

var $ele = new JQuery( ele );
trace( $ele.width() ); // should work

or use JQuery.cur, which will translate to $( this ) in JS.

trace( JQuery.cur.width() );

See http://api.haxe.org/js/JQuery.html

AFAIK, both solutions are equivalent, the latter being more concise and probably more "jquery-like".

You seem to be using a different jQuery extern than the official one, though, since you import jQuery.* instead of js.JQuery.

If so, please provide more info as to which lib you use.

Upvotes: 4

Related Questions