JQuery simplest example not working

86 views
Skip to first unread message

S.A. Asselbergs

unread,
Jan 10, 2017, 10:59:59 AM1/10/17
to Haxe
Hi fellow Haxers,

The simplest piece of Haxe code using JQuery doesnt compile:

package;
import js.JQuery.JQuery;

class Main {
    static public function main():Void {
        new JQuery(function():Void { //when document is ready
            //your magic
        });
    }
}

Compiler says:
src/Main.hx:6: lines 6-8 : Void -> Void should be js.html.Element
src/Main.hx:6: lines 6-8 : For function argument 'j'

It doesn't make much sense to me
Can anyone to who it makes any sense explain me what I am doing wrong?

Greetings, Simon

Andy Li

unread,
Jan 10, 2017, 11:17:38 AM1/10/17
to haxe...@googlegroups.com
What Haxe version you're using?
For Haxe 3.3 or up, you should "import js.jquery.JQuery;" (notice the lower case package name).

Best,
Andy

--
To post to this group haxe...@googlegroups.com
http://groups.google.com/group/haxelang?hl=en
---
You received this message because you are subscribed to the Google Groups "Haxe" group.
For more options, visit https://groups.google.com/d/optout.

Andreas Mokros

unread,
Jan 10, 2017, 11:30:37 AM1/10/17
to haxe...@googlegroups.com
Hi.

On Tue, 10 Jan 2017 07:59:59 -0800 (PST)
"S.A. Asselbergs" <s.a.ass...@gmail.com> wrote:
> new JQuery(function():Void { //when document is ready
> Can anyone to who it makes any sense explain me what I am doing wrong?

I guess you want to use the ready() function from JQuery (a.k.a.
DOMContentLoaded event).
Any reason why you use the old extern (js.JQuery)?
Maybe
new JQuery("document").ready(function() ...
works.

You should probably use the newer extern:
http://api.haxe.org/js/jquery/JQuery.html
It seems to support a function in the constructor, too.

--
Mockey

S.A. Asselbergs

unread,
Jan 10, 2017, 3:36:31 PM1/10/17
to Haxe
That solved it, Tnx!

Ok so now I got this very simple real jQuery example that works http://jsfiddle.net/tovic/mkUJf/
I now ported it to haxe.
new JQuery(this) doesnt seem to work because of what 'this' is in javascript and 'this' is in haxe.
So I used new JQuery(Lib.nativeThis) instead.
But it still wont work.

Does JQuery in haxe has some helpercode  this problem?

 This is my haxe code


package;
import js.Lib;
import js.jquery.*;


class Main {
    static public function main():Void {
        new JQuery(function() {
           
            new JQuery('body').on('mousedown', 'div', function() {
                new JQuery(Lib.nativeThis).addClass('draggable').parents().on('mousemove', function(e) {
                    new JQuery('.draggable').offset({
                        top: e.pageY - new JQuery('.draggable').outerHeight() / 2,
                        left: e.pageX - new JQuery('.draggable').outerWidth() / 2
                    }).on('mouseup', function() {
                        new JQuery(Lib.nativeThis).removeClass('draggable');
                    });
                });
            }).on('mouseup', function() {
                new JQuery('.draggable').removeClass('draggable');
            });
        });       
    }
}

and this as html:

<!DOCTYPE html>
<html lang="en">
<head>   
    <meta charset="UTF-8">
    <style>
body {
    padding:50px;
}

div {
  cursor:move;
  width:70px;
  height:70px;
  background-color:black;
  border:1px solid black;
  margin:2px;
  float:left;
}

.draggable {
  background-color:yellow;
}
</style>
    <title>test</title>
    <meta name="description" content="" />
</head>
<body>   
    <script src="test.js"></script>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>   
</body>
</html>








Op dinsdag 10 januari 2017 17:17:38 UTC+1 schreef Andy Li:

Andy Li

unread,
Jan 10, 2017, 8:21:31 PM1/10/17
to haxe...@googlegroups.com
Check the console. It should print something like "Uncaught ReferenceError: $ is not defined", which mean you didn't load jQuery.
So, just add


right before

<script src="test.js"></script>

And it will work.

Best,
Andy

Ben Merckx

unread,
Jan 11, 2017, 4:12:11 AM1/11/17
to Haxe
You can grab the target from the event instead of relying on "this". Like this:

new JQuery('body').on('mousedown', 'div', function(e) {
    new JQuery(e.target).addClass('draggable').parents().on('mousemove', function(e) {
        new JQuery('.draggable').offset({
            top: e.pageY - new JQuery('.draggable').outerHeight() / 2,
            left: e.pageX - new JQuery('.draggable').outerWidth() / 2
        }).on('mouseup', function(e) {
            new JQuery(e.target).removeClass('draggable');
        });
    });
}).on('mouseup', function() {
    new JQuery('.draggable').removeClass('draggable');
});

On an unrelated note, I really don't get how jQuery ever ended up in the haxe std.

Op dinsdag 10 januari 2017 21:36:31 UTC+1 schreef S.A. Asselbergs:
Reply all
Reply to author
Forward
0 new messages