Reputation: 205
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
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