JS ProgressBar update from inside PHP While Loop called by AJAX?

Question

I have a PHP page with a form. Once the form is submitted, it calls another PHP page via AJAX to make calls to MySQL, then process the results, and return them to the first PHP page. The MySQL processing takes place inside a while loop. I wanted to update a progress bar that indicates the progress of the loop. But I get:

parsererror
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

and nothing happens. Any ideas if what I am doing below is wrong? How Can I update a progress bar from an AJAX called while loop?

The following is a rough code:

Main PHP page:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="jquery-ui.css">
        <script type='text/javascript' src='jquery-1.11.1.min.js'></script>
        <script type='text/javascript' src='jquery-ui-1.10.4.min.js'></script>
        <script type='text/javascript' src='my.js'></script>
    </head>

    <body onLoad="onLoad()">

        <form action="" method="POST" id="myForm" name="myForm">  
            <div id="progressBar"></div>
            <input class="txt" 
               id="btnSubmit" 
               style="margin-top: 12pt; font-family: arial; color: grey; font-weight: bold; font-size: 15pt;" 
               type="submit" 
               name="action"
               value="SEARCH" />
        </form>
    </body>
</html>

The my.js has:

function onLoad() {
    $('#progressBar').progressbar({ disabled: true });
    $('#progressBar').hide(); 
}

$(document).ready(function() {
    $("#myForm").submit(function(event) {
         $(function () {
             .ajax({
                 url: 'myCall.php',           // the script to call to get data
                 type: "POST", 
                 data: { data: 'something'}
             }, 
             dataType: 'json',
             success: function(data) {
                 // do something
             }, 
             error: function (jqXHR, textStatus, errorThrown){
                 console.log(textStatus, errorThrown);
             },


         });


    });
});

and myCall.php has some calls to MySQL database, then post processing:

$result = mysqli_query($mysqli, $sql); 

$j = 1; 
// enable and show the bar
echo '<script language="javascript"></script>';
echo '$("#progressBar").show();';
echo '$("#progressBar").progressbar({';
echo 'disabled: false,';
echo 'value: '.$j.',';
echo 'max: '.$result->num_rows.',';
echo '});';
echo '</script>';

while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {
    // doing stuff and then update the bar
    // update
    echo '<script language="javascript"></script>';
    echo '$("#progressBar").progressbar({';
    echo 'value: '.$j.',';
    echo '});';
    echo '</script>';
}
// disable and hide the bar
echo '<script language="javascript"></script>';
echo '$("#progressBar").progressbar({';
echo 'disabled: true,';
echo '});';
echo '$("#progressBar").hide();'; 
echo '</script>';

This will never work the way you intend it to. Php won't return anything from the server until all the processing has ended, since it is synchronous in nature. — Pablo Mescher
– Pablo Mescher, Commented Nov 26, 2014 at 15:56
So even if I call that function in the echo it will simply build up until the whole page is done running, and then echo it out? Is that why JSON fails? — Kalinka
– Kalinka, Commented Nov 26, 2014 at 16:06
I'm not sure if that's the reason it fails, but basically yes.. you are going to get the full response and not the "chunks" — Pablo Mescher
– Pablo Mescher, Commented Nov 26, 2014 at 19:13

Pim de Witte · Accepted Answer · 2014-11-26 15:38:27Z

1

It looks like the JSON you are parsing is not valid JSON. I would print out the JSON you are trying to run through the parser and run it through a JSON validator such as http://jsonformatter.curiousconcept.com/.

Also, the following code looks unclean to me, which might cause the problem. I'm not sure if you are using a more standardized JSON parser. If so, it would probably not expect a data object inside a data object. This is a complete guess, but you should probably change

         .ajax({
             url: 'myCall.php',           // the script to call to get data
             type: "POST", 
             data: { data: 'something'}
         },

to

         .ajax({
             url: 'myCall.php',           // the script to call to get data
             type: "POST", 
             data: { "key1" : "value1"}
         },

I don't think you are actually showing where the JSON is being parsed in your question. Are you able to show exactly how you parse it and what you are parsing?

Thanks!

answered Nov 26, 2014 at 15:38

Pim de Witte

3732 silver badges10 bronze badges

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

2 Comments

Kalinka Over a year ago

The error happens when I add the echo of the JS to upate the progressBar. If I remove all those 'echo' statements my script works perfectly. It seems as the current setup I have with JSON does not like the JS echoing.

Pim de Witte Over a year ago

I'm pretty sure it is a JSON parsing error. Is the data you are echo'ing out of PHP not valid JSON?

Collectives™ on Stack Overflow

JS ProgressBar update from inside PHP While Loop called by AJAX?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related