I'm trying to pass 4 variables through the parameters of the ajax function, but it's not accepting it for some reason. The variables I'm trying to pass are the url, action, id, and the timeout in milliseconds. If anyone know what I'm doing wrong, please correct me. Thank you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
function myAjax(url,action,id,timeout) {
$.ajax({
type: "POST",
url: url,
data:{action: action},
error: function(xhr,status,error){alert(error);},
success:function(data) {
document.getElementById( id ).innerHTML = data;
setTimeout(myAjax, timeout);
}
});
}
</script>
<body onload="myAjax('testing.php','call_this','my_div',2000)">
<div id="my_div"></div>
</body>
Here's the working version of the code, without passing the variables through the parameters, and instead having them inside the function itself:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
function myAjax() {
$.ajax({
type: "POST",
url: 'testing.php',
data:{action: 'call_this'},
error: function(xhr,status,error){alert(error);},
success:function(data) {
document.getElementById( 'my_div' ).innerHTML = data;
setTimeout(myAjax, 2000);
}
});
}
</script>
<body onload="myAjax()">
<div id="my_div"></div>
</body>
Re-write the setTimeout() call like so:
setTimeout(function() {
myAjax(url,action,id,timeout);
}, timeout);
The second time it is called (from your success handler), you are not passing any parameters to myAjax() so it will not have any arguments when it is invoked the second time.
There are a couple ways you can fix that. One way it to just copy the arguments when you call myAjax(...) from within:
function myAjax(url,action,id,timeout) {
$.ajax({
type: "POST",
url: url,
data:{action: action},
error: function(xhr,status,error){alert(error);},
success:function(data) {
document.getElementById( id ).innerHTML = data;
setTimeout(function() {
myAjax(url, action, id, timeout);
}, timeout);
}
});
}
But, you could also make an inner function and then just reference the arguments from the closure like this:
function myAjax(url,action,id,timeout) {
function run() {
$.ajax({
type: "POST",
url: url,
data:{action: action},
error: function(xhr,status,error){alert(error);},
success:function(data) {
document.getElementById( id ).innerHTML = data;
setTimeout(run, timeout);
}
});
}
// run the ajax function the first time
run();
}