jQuery AJAX - Success function scope - passing in 'this'

Question

Struggling to get my head around AJAX success scope.

I am trying to load some data from an AJAX call, then attach it using jQuery to an already existing ul

This example helped me out , but I can't work out how to reference specific elements from 'this'.

So I've passed this into the success function as that , but this line:

$('li.loading').before(nextLoad);

Fails with:

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

Im assuming , I need to use that followed my my element, but cannot work out the syntax.

 var that = this; $.ajax({ type: 'GET', url: url, async: true, jsonpCallback: 'callback', contentType: "application/json", dataType: 'jsonp', success: function(data) { $.each(data.products, function(key, val) { items.push('<li class="product"><a href="product.html"><span class="store-badge"></span><img src="'+val.image+'" width="124" height="166" /><h3>'+val.title+'</h3></a></li>'); }); var nextLoad = items; if (loadNumber <= 4) { $('li.loading').before(nextLoad); }; if (loadNumber >= 4) { $('li.loading').hide(); }; $('.scroll-horizontal').mCustomScrollbar("update"); }, error: function() { console.log('failed'); } });

EDIT:

Console logging that results in :

Window Infinity: Infinity $: function (a,b){return new e.fn.init(a,b,h)} Array: function Array() { [native code] } ArrayBuffer: function ArrayBuffer() { [native code] } Attr: function Attr() { [native code] } Audio: [object Function] AudioProcessingEvent: function AudioProcessingEvent() { [native code] } BeforeLoadEvent: function BeforeLoadEvent() { [native code] } Blob: function Blob() { [native code] } Boolean: function Boolean() { [native code] } //CONTIUNES

Console logging nextload also results in

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

Can you console.log(nextLoad); console.log($('li.loading')) and update your question with results? — raina77ow
– raina77ow, Commented Oct 2, 2012 at 10:45
The variable items is not defined in your code above, but I assume it's an array since you're pushing to it? If so, nextLoad is also an array, and you can't use before() to insert an array, only jQuery objects or strings with HTML will work with DOM insertion methods. — adeneo
– adeneo, Commented Oct 2, 2012 at 11:03

adeneo · Accepted Answer · 2012-10-02 11:22:41Z

You're pushing data to items :

items.push('<li class="product"><a href= ......

which would indicate that items is in fact an array ?

Then you do:

var nextLoad = items;

turning nextLoad effectively into an array as well.

Now when you're trying to do :

$('li.loading').before(nextLoad);

you're trying to insert an array before the li elements that have the .loading class, and since the DOM does'nt really support inserting arrays into it, you get an error.

right. Makes sense. Fixed this by looping over 'items' and then using before for each string rather than trying to put the array in . Cheers.

Man Programmer · Accepted Answer · 2012-10-02 10:39:35Z

0

var that = $(this);

try this jquery

answered Oct 2, 2012 at 10:39

Man Programmer

5,3662 gold badges24 silver badges21 bronze badges

Collectives™ on Stack Overflow

jQuery AJAX - Success function scope - passing in 'this'

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related