AJAX load PHP page that calls a javascript function

Question

I want to update a progress bar (bootstrap) while a PHP page is processing from an AJAX GET request.

Currently the progress bar updates AFTER the AJAX request is 100% complete. The pages have a lot more content than what's listed, but this is the basics on what needs to get functional.

Main PHP Page

<html><head>
<script type="text/javascript">
function updateBar(i)
{
  $('#updateBar').html('<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: '+i+'%;">'+i+'</div>');
}
</script>
</head>
<body>
<?
echo "<button class='btn btn-success' id='button'>Process</button>";
echo "<div class='progress' id='updateBar'>Loading...</div>";
echo "<div id='update'></div>";
?>
<script>
$(document).ready(function () {
  $("#button").click(function(){
    $("#update").text("Loading...");
    $.ajax({
      type: "GET",
      url: "ajaxPHP",
      success: function(data){
        $("#update").html(data);
      },
      error: function(xhr, status, error) {
        alert(xhr.responseText);
      }
    });
  });
});
</script>

AJAX PHP Page (ajaxPHP):

$max=85;
for($i=0;$i>=$max;$i++){
// HERE ARE A BUNCH OF CURL CALLS AND SERVER SIDE PROCESSING, TAKING ABOUT 30 SECONDS PER LOOP
?> 
<script>
  var num = "<?php echo $i; ?>";
  var max = "<?php echo $max; ?>";
  var i = num/max;
  updateBar(i);
</script>
<?
}

Is that javascript even valid? You're re-declaring the same global vars over and over with var...although you could run this Javascript with eval (if you get rid of the <script> tags), it would make more sense to just print out a list in that PHP and have an update method that traverses the list. — developerwjk
– developerwjk, Commented Dec 23, 2014 at 17:49
I think that your script is very aggresive. You are doing 85 calls to updateBar very fast. You should move your loop logic to the ajax call. — sbaglieri
– sbaglieri, Commented Dec 23, 2014 at 17:51
I think it is, can you give me an example on what you're referring to? — Andrew
– Andrew, Commented Dec 23, 2014 at 17:51
Also each one of my loops takes about 30 seconds of CURL calls and server side processing. So it's not as bad as it looks. — Andrew
– Andrew, Commented Dec 23, 2014 at 17:51
If this is for a loading bar, your javascript doesn't make sense. What this will do is update the bar quickly from 0 to 85, by hitting every value in between, AFTER everything is already done. The user won't really see a loading bar. — developerwjk
– developerwjk, Commented Dec 23, 2014 at 17:53

pherris · Accepted Answer · 2014-12-23 17:59:00Z

1

You'll want to trigger recurring AJAX calls until your script is completed. Something like:

var getStatus = function() {
    $.ajax({
      type: "GET",
      url: "ajaxPHP",
      success: function(data){
        $("#update").html(data);
        if (data!=100) { // examine the response to determine if the server is done
            setTimeout(getStatus, 1000); //delay next invocation by 1s
        }
      },
      error: function(xhr, status, error) {
        alert(xhr.responseText);
      }
    });
};

$(document).ready(function () {
  $("#button").click(function(){
    $("#update").text("Loading...");
    getStatus(); //initiate job and start polling
  });
});

answered Dec 23, 2014 at 17:59

pherris

17.8k8 gold badges47 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Over a year ago

That got me going with what I needed. Thank you!

Collectives™ on Stack Overflow

AJAX load PHP page that calls a javascript function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related