title: jQuery AJAX - Success function scope - passing in 'this'
body: <p>Struggling to get my head around AJAX success scope.</p>
  
  <p>I am trying to load some data from an AJAX call, then attach it using jQuery to an already existing <code>ul</code></p>
  
  <p>This <a href="https://stackoverflow.com/questions/1570146/ajax-jquery-success-scope">example</a> helped me out , but I can't work out how to reference specific elements from 'this'.</p>
  
  <p>So I've passed <code>this</code> into the success function as <code>that</code> , but this line:</p>
  
  <pre><code>$('li.loading').before(nextLoad);
  </code></pre>
  
  <p>Fails with: </p>
  
  <pre><code>Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 
  </code></pre>
  
  <p>Im assuming , I need to use <code>that</code> followed my my element, but cannot work out the syntax. </p>
  
  <pre><code>                  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('&lt;li class="product"&gt;&lt;a href="product.html"&gt;&lt;span class="store-badge"&gt;&lt;/span&gt;&lt;img src="'+val.image+'" width="124" height="166" /&gt;&lt;h3&gt;'+val.title+'&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;');                                  
                               });
  
                               var nextLoad = items;  
  
                               if (loadNumber &lt;= 4) {
                                   $('li.loading').before(nextLoad);
                               };
                               if (loadNumber &gt;= 4) {
                                   $('li.loading').hide();
                               };
  
                               $('.scroll-horizontal').mCustomScrollbar("update");                            
  
                          },
                          error: function() {
                              console.log('failed');
                          }
                          });                  
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>Console logging that results in :</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Console logging nextload also results in</p>
  
  <pre><code>Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 
  </code></pre>