javascript - Where in this should I add an AJAX call for a load throbber? -
here's function called when user clicks button generates shortened url , i'm wondering use ajax call throbber. takes few seconds , wanted use throbber in mean time. or end creating whole new function outside of 1 called when button clicked? haven't seen other examples code. new here, appreciate help, thanks.
html suppose need link gif with...
<img src="gif/loader.gif" id="loader"/>
current js function i'm using generate short url function, takes couple seconds though think need call gif in there somewhere , rid of when callback successful?
function getshare() { var s = document.createelement('script'); var browserurl = document.location.href; //alert(browserurl); if (browserurl.indexof("?") != -1){ browserurl = browserurl.split("?"); browserurl = browserurl[0]; } //alert(browserurl); var gifurl = document.getelementbyid('gif_input').value; var vidurl = document.getelementbyid('vid_input').value; //alert(gifurl + "|" + vidurl); url = encodeuricomponent(browserurl + "?gifvid=" + gifurl + "|" + vidurl); //alert(encodeuricomponent("&")); s.id = 'dynscript'; s.type='text/javascript'; s.src = "http://b1t.co/site/api/external/makeurlwithget?callback=resultscallback&url=" + url; document.getelementsbytagname('head')[0].appendchild(s); } function resultscallback(data) { //document.getelementbyid("results").innerhtml = json.stringify(data); //alert(json.stringify(data)); var obj = jquery.parsejson(json.stringify(data)); //alert(obj.shorturl); jquery("#input-url").val(obj.shorturl); }
add image suppose displayed, hide it:
<img src="gif/loader.gif" id="loader" style="display:none;"/>
here function take url , access api
function getshare(url) { jquery('#loader').show(); // show loading... jquery.ajax({ datatype: "jsonp", jsonpcallback:'apicallback', // send api ?callback=apicallback because api not want work default jquery callback function name url: 'http://b1t.co/site/api/external/makeurlwithget', data: {'url':url}, success: function(response){ jquery('#loader').hide(); // hide loading... //respponse = {success: true, url: "http://sdfsdfs", shorturl: "http://b1t.co/qz"} if(response.success){ console.log(response.url, response.shorturl); jquery("#input-url").val(response.shorturl); } }, error:function(){ jquery('#loader').hide(); // hide loading... //todo: network error o_o } }); }
by way if want value of html element use
var gifurl = jquery('#gif_input').val();
instead of
var gifurl = document.getelementbyid('gif_input').value;
Comments
Post a Comment