javascript - multiple operations using jquery ajax -
i want perform operation , simultaneously show progress in html5 , javascript. since using ie 8, <progress>
element not supported, approach thought of using jquery ajax method this:
<div class="progress-bar" role="progressbar" id="id" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">complete</span> </div>
$(document).ready(function(){ $("button").click(function(){ $.ajax({ url: "perform server side operation", success: function(result){ progressbarupdate(20); } }); }); }); var progressbarupdate = function(value) { value = value + 10; $("#id").css("width", value +"%"); }
but issue here how perform operation , update progress bar simultaneously? because after coming success:
part of ajax request, directly showing 100%
progress doesn't make sense. there other approach available this?
assuming operation taking place server side, know of 2 approaches.
polling
this take place different ajax
setinterval(function(){ $.ajax("checkprogress.url", function(data){ $('.progress-bar').val(data); }, 1000);
basically, poll server-side service/script/code every interval , response contain current progress. update progress bar.
websockets
another approach use web-socket framework allow push content(progress updates) and/or implement remote procedure call conected clients in real-time.
Comments
Post a Comment