Wednesday 15 July 2015

jquery - Showing progress indicator when clicking on link -



jquery - Showing progress indicator when clicking on link -

i have html link in page.

<a id="mydownloadlink" data-bind="attr: { href: urlpath }" style="visibility: hidden">get info file</a>

when click on link phone call web api service , download file. cant understand how can show progress bar while getting downloaded. how phone call web api service

urlpath("/api/getmydata?id=" + 2 + "&name=" + name.tostring()); $('#mydownloadlink').click(); location.href = $('#linktodownload').attr('href');

it have been easy show progress bar if have used ajax phone call in case cant due reason. please allow me know if there way out.

seeing have server access can seek this. little explanation. should load download link within iframe. download start because browser not give onload callback when loaded url attachment, need server workaround.

the workaround need send token backend. when send file have set client's cookie value response.

the cookie param should called downloadtoken. code check every 200 seconds if cookie set. set when pageload finish aka when file in.

have fun .

function getcookie( name ) { var parts = document.cookie.split(name + "="); if (parts.length == 2) homecoming parts.pop().split(";").shift(); } function expirecookie( cname ) { document.cookie = encodeuricomponent( cname ) + "=deleted; expires=" + new date( 0 ).toutcstring(); } var downloadfile = function(url,completecallback){ var downloadtoken = new date().gettime(); iframe = document.createelement('iframe'); iframe.style.display = 'none'; document.body.appendchild(iframe); iframe.src = url + '&downloadtoken=' +downloadtoken; var checkserverfeedback = function(){ var outcome = getcookie('downloadtoken'); if(downloadtoken == outcome){ expirecookie('downloadtoken'); completecallback(); } settimeout(checkserverfeedback,200); }; settimeout(checkserverfeedback,200); }; /** start of app code **/ console.log('add loader here'); downloadfile('http://fortawesome.github.io/font-awesome/assets/font-awesome-4.2.0.zip',function(){ console.log('the file has been downloaded remove loader here.'); });

jquery html hyperlink web-api

No comments:

Post a Comment