Single Div Refresh With Jquery Ajax And Php
Solution 1:
UPDATE:
You have 4 problems in your current code:
Problem #1 and Problem #2 - In your separate PHP script you are not echoing anything back to the Ajax. Anything you echo will go back as a variable to the success
function. Simply the add echo statement(s) according to the format you want. Your 2nd problem is that you are trying to echo it in the HTML part, where $GroupOptions
does not even exist (the Ajax simply returns an output from the PHP script, it's not an include
statement so your variables are not in the same scope).
if(isset($_POST['GroupID']))
{
$GroupID = $_POST['GroupID'];
$sql = "SELECT * from `KC_Options` WHERE GroupID=$GroupID";
$GroupOptions = $db->query($sql);
//this is where you want to iterate through the result and echo it (will be sent as it to the success function as a variable)if($GroupOptions):
foreach ($GroupOptionsas$optionValue):
echo$optionValue['optionName'];
endforeach;
endif;
}
In your Ajax, add a variable named data
to the success function, which will receive the output from the PHP script. Also notice that your url is incorrect, you need to post to an actual external file such as my_custom_script.php
.:
$.ajax({
type: "POST",
url: "your_external_script.php",
data: dataString,
success: function(data) {
if (data && data !== '') {
//data will equal anything that you echo in the PHP script//we're adding the label to the html so you don't override it with the new outputvar output = '<label class="control-label">Group Options</label>';
output += data;
$("#groupOptions").html(output);
} else {//nothing came back from the PHP script
alert('no data received!');
}
}
});
Problem #4 - And on your HTML, no need to run any PHP. Simply change:
<divclass="col-lg-6"id="groupOptions"><labelclass="control-label">Group Options</label><?phpif($GroupOptions): ?><?phpforeach ($GroupOptionsas$optionValue): ?><?phpecho$optionValue['optionName']; ?><?phpendforeach; ?><?phpendif; ?></div>
to
<div class="col-lg-6"id="groupOptions">
</div>
Hope this helps
Solution 2:
You have to take the response in yout success callback function and actually give a response in your oho function
$("#productOptions").change(function(){
varGroupID = $(this).val();
var dataString = 'GroupID=' + GroupID;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "#",
data: dataString,
success: function(dataString) { //take the response here// convert dataString to html...
$("#groupOptions").html(newHtml);
}
});
returnfalse;
});
PHP:
if(isset($_POST['GroupID']))
{
$GroupID = $_POST['GroupID'];
$sql = "SELECT * from `KC_Options` WHERE GroupID=$GroupID";
$GroupOptions = $db->query($sql);
echo json_encode($GroupOptions ); //give a response here using json
}
Post a Comment for "Single Div Refresh With Jquery Ajax And Php"