dongxun3424 2012-09-12 06:11
浏览 43
已采纳

我们如何在PHP中回显Progress bar的数据？

We are working on a ProgressBar using Jquery UI. We are facing some problems, that we aren't getting values from PHP. We are unable to make a numerical loop that can return the value to Ajax based code.

Below is our code:

HTML

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
  #bardivs {
   width:400px; /* or whatever the of the porgress bar is */
  /* 
   The position of #bardivs must be something other than
   static (the default) so that its children will be positioned
   relative to it.
   */
  position:relative;
  }
 #progresstext {
position:absolute;
top:0;
left:0;
}
 </style>
  <script>
  var url = "http://localhost/sample/data.php";
 $(function() {
  var progress = 0;
 //alert("some value" + value, value);
$("#progressbar").progressbar({ progress: 0 });
  setTimeout(updateProgress, 500);
 });
 function updateProgress() {
var progress;
$.get(url, function(data) {
    // data contains whatever that page returns     
    if (data < 100) {
        $("#progressbar").progressbar("option", "value", data);
        $("#progresstext").html("<p>    Loading...<p>");
        setTimeout(updateProgress, 500);
       } else {
        $("#progressbar")
          .progressbar("option", "value", 100);
    }

    }); 
  }
 </script>
</head>
<div id="bardivs">
<div id="progressbar"></div>
<div id="progresstext"></div>
</div>
</html>

We don't have any idea how can we make the code in PHP use this loading function. It should in a loop.

  • 写回答

1条回答 默认 最新

  • doqau82086 2012-09-12 06:28
    关注

    There is no such progress: 0, the progress is measured by value and you should make the data INT because it comes as string:

    $("#progressbar").progressbar({ value: 0 });
    setTimeout(updateProgress, 500);
});
function updateProgress() {
    var progress;
    $.get(url, function(data) {
        // data contains whatever that page returns     
        if (data < 100) {
            $("#progressbar").progressbar({value: parseInt(data)});
            $("#progresstext").html("<p>    Loading...<p>");
            setTimeout(updateProgress, 500);
        } else {
            $("#progressbar").progressbar({value: 100});
        }
    }); 
}

    In php make sure you update the progress based on your scripts

    <?php
     $data = get_progress();
     echo (int)$data;
?>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？