Jump to content

Adding a spinner to Ajax call


Recommended Posts



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,


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...