CODEWITHSUNDEEP
javascriptphpajaxwhile-loopprogress-bar
Kalinka
Kalinka

Reputation: 205

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

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>';

Upvotes: 1

Views: 1622

Answers (1)

Pim de Witte
Pim de Witte

Reputation: 373

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!

Upvotes: 1

Related Questions