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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...