I'm trying to load a html table created by a php code. The table should be generated by an sql query that depends on a variable from a radio input selector, but somehow i can't pass that variable via jQuery.post(). I made a simple version that has the same issue so I hope someone can help me with that:
test.php:
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("input[name$='selectOP']").on("change", function() {
var op = $(this).val();
$.post('ajax.php', {varphp: op});
$("#div1").load('ajax.php', function(){
});
});
});
</script>
<body>
<label class="radio-inline"><input type="radio" value="110" name="selectOP" id="selectOP">110 </label>
<label class="radio-inline"><input type="radio" value="115" name="selectOP" id="selectOP">115 </label>
<div id="div1">
</div>
</body>
</html>
ajax.php:
<?php
$var= "Something";
echo $var;
//$varphp = $_POST['varphp'];
//echo $varphp;
?>
So, with the two last lines of ajax.php commented, code successfully runs and the var $var loads inside div1. But if i uncomment those lines, apparently the code stops, and nothing is loaded on div1. What am I doing wrong?
You are calling $.post where you pass the argument and then calling load with no arguments. Of course you can't get $_POST['varphp'] when you call 'load' because you are not passing this variable.
you must use one of them. you can do with this:
$.post('ajax.php', {varphp: op}, function(data){ $("#div1").html(data); }, 'html' );
or
$("#div1").load('ajax.php', {varphp: op});
but not both
thus, your code can be
$(document).ready(function(){
$("input[name$='selectOP']").on("change", function() {
var op = $(this).val();
$.post('ajax.php', {varphp: op}, function(data){ $("#div1").html(data); }, 'html' );
});
});
or
$(document).ready(function(){
$("input[name$='selectOP']").on("change", function() {
var op = $(this).val();
$("#div1").load('ajax.php', {varphp: op});
});
});
$.post('ajax.php', {varphp: op});
$("#div1").load('ajax.php', function(){
$});
These two lines are actually making two separate ajax requests, which means the server will pick them up separately. Only the first one has a POST parameter, and only the second one sets the content of the DOM object.
Try something like this:
$("#div1").load('ajax.php', {
varphp: op
});
A good practice I like is to use AJAX w/ deferred promises. You can try converting your code to the following:
$.ajax({
type: 'post', // you can switch to GET, POST, etc.
url: 'ajax.php',
data: {varphp: op},
})
.done(function(data) {
$('#div1').html(data);
})
.fail(function(data) {
// if your code fails, you can see the errors here in the console
console.log(data);
})
.always(function(data) {
// do something every time
});
The codes within the done, fail, or always callback functions will run depending on whether the AJAX call is a success, fail, or neither respectively. With this, you can troubleshoot your code easily as well, especially when the AJAX call error'd out (look inside the fail function).