Adding a spinner to Ajax call

[seblondres]

Hi,

 

I'd like to add a spinner to my ajax call below.

 

<script>var setOffset = 0;var URL = "https://partner-int-api.groupon.com/deals.json";var countryCode = "UK";var token = "&tsToken=UK_AFF_0_201236_212556_0";var categoryFilter = "bars-et-restaurants";var limit = 12;var jsonCallBack = "&callback=jsonp";function calljsonp(offset){var ajaxURL = URL + "?country_code=" + countryCode + token + "&filters=category:" + categoryFilter + "&offset=" + offset + "&limit=" + limit + jsonCallBack;var script = document.createElement("script");script.setAttribute("src", ajaxURL);document.body.appendChild(script);document.body.removeChild(script); }function jsonp(Obj){$.each(Obj.deals, function(i,data)   {var div = document.createElement("div"); div.className = 'img';    var img = document.createElement("span"); img.innerHTML = ("<a href='"+data.dealUrl+"'target='_blank'><img src='"+data.smallImageUrl+"'></a>");var h4 = document.createElement("h4"); h4.innerHTML = ("<div class='titleDesc'><a href='"+data.dealUrl+"'target='_blank'>"+data.shortAnnouncementTitle+"</a></div>");    var desc = document.createElement("p"); desc.innerHTML = ("<div class='feedDesc'>"+data.merchant.name+", <span id='nc'>"+data.locations[0].city+"</span><br><br>    <b>Valeur : </b><span style='text-decoration: line-through;'>"+data.options[0].value.formattedAmount+"</span><br>    <b>Prix promo : </b><span style='color:#FF8600;'><b>"+data.options[0].price.formattedAmount+"</b>    (-"+data.options[0].discountPercent+"%)</span><br>Déjà <span style='color:#DD0057;'><b>"+data.soldQuantityMessage+"</b></span> acheteur(s),<br>il reste <span style='color:#8AC007;'><b>"+data.options[0].remainingQuantity+"</b></span> offre(s).</div>");        div.appendChild(img);div.appendChild(h4);div.appendChild(desc);document.getElementById("showdata").appendChild(div);      });//$("<hr />").appendTo("#showdata");setOffset = setOffset + limit;}function more(){calljsonp(setOffset);  }calljsonp(setOffset);</script>

 

I have this piece of code, but I'm not sure where to implement it?

$.ajax({// your ajax codebeforeSend: function(){$('.loader').show()},complete: function(){$('.loader').hide();}});

Many thanks,

 

[Ingolme]

Your calljsonp() function is not doing an AJAX request, it's just including a script tag onto the page, so you can't use the $.ajax method.

 

If you want to do a true AJAX request, read about $.ajax in the documentation. http://api.jquery.com/jQuery.ajax/

The AJAX method needs parameters to indicate type (GET or POST), URL, data type (jsonp in your case) and other parameters.

[seblondres]

ok thanks!