Home/ Questions/Q 8515451
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T05:08:59+00:00

We are working on a ProgressBar using Jquery UI. We are facing some problems,

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
?>
    • 0