Bir ajax isteği JSON Response JQuery Progressbar güncellemek

1 Cevap php

Tümü,

Ben senkronizasyon durumunu almak için bir sunucuya bir json istekte bir AJAX isteği var. JSON İstek ve yanıtları gibi altında: Ben getStatus JSON yanıt olarak döndürülen yüzdesi başına, bir JQuery UI ProgressBar görüntülemek ve progressbar durumunu güncelleştirmek istiyorum. Durumu "InSync" ise, daha sonra bir ilerleme çubuğu görünür olmaması ve bunun yerine bir mesaj görüntülenir. Örn: "Sunucu Sync olduğunu". Bunu nasıl yapabilirim?

//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"
            }
        }
    ]
}

1 Cevap

Eğer ilerleme çubuğu / mesaj "loadingDiv" adında bir div yerleştirilmesini istediğiniz varsayarak:

$(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'
    }
  });
});

etiketler