Can I access jquery.data within a callback function?

Question

I am creating a number of divs on the fly and make them droppable. That works well and I can drop the draggables and the function droppable() is actually reached. In order to do some tests, I need to access data I attach to the divs: jQuery.data(this,"pos") and compare it to the data I attached to the draggable divs.

The problem is that ep and fp are undefined.

            document.write("<div id='tar_"+i+"' class='droppable' style='position:fixed;z-index:10;top:"+tar_y+"px; left:"+x+"px;'>"+phrase.charAt(i)+"</div>");
            var tar = $( "#tar_"+i );
            targets.push(tar);
            jQuery.data(targets[i],"pos",i);
            targets[i].droppable({
            drop: function( event, ui ) {
                var ep = jQuery.data(this,"pos");
                var fp = jQuery.data(ui.draggable,"expos");
                if(ep==fp) {
                    alert("great");
                } else {
                    alert("next time");
                }
              }
            });

Is it at all possible to access jquery.data within this context?

As suggested, I tried the below but ep and fp are still undefined.

            drop: function( event, ui ) {
                var ep = $(this).data("pos");
                var fp = $(ui.draggable).data("expos");
                if(ep==fp) {
                    alert("great");
                } else {
                    alert("next time");
                }
              }
            });

Another suggestion:

            drop: function( event, ui ) {
                var ep = jQuery.data(targets[i],"pos");
                var fp = jQuery.data(letters[i],"pos");;
                if(ep==fp) {
                    alert("great");
                } else {
                    alert("next time");
                }
              }
            });

Leads to:
"Uncaught TypeError: Cannot read property 'nodeType' of undefined"
which probably makes sense since the local variable i is not really available when the drop function is called.

A bit more context

        for(i=0; i<phrase.length; i++) {
            document.write("<div id='chr_"+i+"' class='draggable' style='position:fixed;z-index:10;top:"+y+"px; left:"+x+"px;'>"+phrase.charAt(i)+"</div>");
            var src = $( "#chr_"+i );
            letters.push(src);
            letters[i].draggable({
                    drag: function( event, ui ) {
                        jQuery.data(ui,"moving",false); //need to access the stored data here what doesn't seem to work like this.
                    }
                  });
            jQuery.data(letters[i],"moving",true);
            jQuery.data(letters[i],"expos",i);
            document.write("<div id='tar_"+i+"' class='droppable' style='position:fixed;z-index:10;top:"+tar_y+"px; left:"+x+"px;'>"+phrase.charAt(i)+"</div>");
            var tar = $( "#tar_"+i );
            targets.push(tar);
            jQuery.data(targets[i],"pos",i);
            targets[i].droppable({
            drop: function( event, ui ) {
                //need to access the data here, 
                //but doesn't seem to work in the 
                //following ways (t1-3):
                var t1 = $(this).data("pos");
                var t2 = jQuery.data(targets[i],"pos");  
                var t3 = jQuery.data($(ui.draggable),"expos");
                if(ep==fp) {
                    alert("great");
                } else {
                    alert("next time");
                }
              }
            });
        }

What am I doing wrong?

if "this" is the div itself you can just do $(this).data('attr', 'value') — Rodrigo
– Rodrigo, Commented Dec 19, 2015 at 21:19
this is supposed to be the div itself. How do I retrieve 'value' in this way? — jallmer
– jallmer, Commented Dec 19, 2015 at 21:28
you can just do $(this).data('attr') it will return the value of the "data-attr" — Rodrigo
– Rodrigo, Commented Dec 19, 2015 at 21:42
Do you suggest that the use of document.write may cause the problem? — jallmer
– jallmer, Commented Dec 20, 2015 at 16:40

JNF · Accepted Answer · 2015-12-20 16:51:27Z

1

Notice correct use of jQuery.data:

jQuery.data( element, key, value )

element is supposed to be a DOM element, not a jquery object. That's why when trying to retrieve the data you get undefined.

Try setting the data like this

jQuery.data(targets[i][0],"pos",i);

or

jQuery.data(targets[i].get(0),"pos",i);

Edit
Another option, is using the .data method on the jQuery object directly. Setting like this:

targets[i].data("pos",i);

and then

$(this).data("pos");

edited Dec 20, 2015 at 16:51

answered Dec 19, 2015 at 21:31

JNF

3,7403 gold badges35 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jallmer Over a year ago

Unfortunately, I get Uncaught TypeError: Cannot read property 'nodeType' of undefined when applying this (likely due to i).

JNF Over a year ago

Yes, I made an edit. You shouldn't use i in the Callback, since it continues to change, and doesn't keep the value you're trying to refer to.

JNF Over a year ago

The main problem is how you're setting the data. Change that first.

jallmer Over a year ago

Sorry, I missed that part.

Collectives™ on Stack Overflow

Can I access jquery.data within a callback function?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related