JQuery Progressbar update with JSON response in ajax request

Question

Everything,

I have an AJAX request that makes a JSON request to the server to get the synchronization status. The JSON request and responses are as follows: I want to display the JQuery UI progress panel and update the progressbar status according to the percentage returned in the getStatus JSON response. If the status is "insync", then a progress indicator should not appear, and a message should be displayed instead. Example: "Server is in sync." How can i do this?

//JSON Request to getStatus { "header": { "type": "request" }, "payload": [ { "data": null, "header": { "action": "load", } } ] } //JSON Response of getStatus (When status not 100%) { "header": { "type": "response", "result": 400 }, "payload": [ { "header": { "result": 400 }, "data": { "status": "pending", "percent": 20 } } ] } //JSON Response of getStatus (When percent is 100%) { "header": { "type": "response", "result": 400 }, "payload": [ { "header": { "result": 400 }, "data": { "status": "insync" } } ] } 

Answer 1

Assuming your progress indicator / message will be placed in a div named "loadDiv":

 $(document).ready(function() { var myLoadingDiv = $("#loadingDiv"); myLoadingDiv.progressbar({disabled:true}); $.getJSON("getStatus.php", function(data) { if (data.payload.data.status == "insync") { myLoadingDiv.progressbar("disable"); myLoadingDiv.html("Server is in Sync"); } else if (data.payload.data.status == "pending") { myLoadingDiv.progressbar("enable"); myLoadingDiv.progressbar("value", data.payload.data.percent); } else { //something else if there are any other status' } }); });