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, Oct 02 '12 at 10:45
The variable `items` is not defined in your code above, but I assume it's an array since you're `push`ing 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, Oct 02 '12 at 11:03

score 1 · Accepted Answer · answered Oct 02 '12 at 11:22

1

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.

answered Oct 02 '12 at 11:22

adeneo

312,895
29
395
388

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. – BobFlemming Oct 02 '12 at 16:34

score 0 · Answer 2 · answered Oct 02 '12 at 10:39

0

var that = $(this);

try this jquery

answered Oct 02 '12 at 10:39

Man Programmer

5,300
2
21
21

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

2 Answers2