setTimeout not giving the expected output - javascript

I have the following code but it doesn't seem to work properly. I cant understand why.
JS
var updateBoard = function() {
$.ajax({
type: "POST",
url: "engine/main.php",
data: {codes: 2},
success: function(response) {
console.log(response);
}
});
setTimeout(updateBoard, 1000);
};
PHP
if(isset($_POST['codes'])) {
echo "test";
}


You can try with following approach:
var updateBoard = function() {
$.ajax({
type: "POST",
url: "engine/main.php",
data: {codes: 2},
success: function(response) {
console.log(response);
setTimeout(updateBoard, 1000); //calling the function after 1 sec after we get the response
}
});
};
updateBoard(); //calling it right away


As #Smiranin said, just call setTimeout outside of the function:
var updateBoard = function(){
$.ajax({
type: "POST",
url: "engine/main.php",
data: {codes: 2},
success: function(response) {
console.log(response)
}
})
};
setTimeout(updateBoard, 1000);
Or just use setInterval instead of SetTimeout
setInterval(updateBoard, 1000);


You can try setInterval() if you want to run this in every seconds.
var updateBoard = function() {
$.ajax({
type: "POST",
url: "engine/main.php",
data: {codes: 2},
success: function(response) {
console.log(response);
}
});
};
setInterval(updateBoard, 1000);
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Related

window.location.reload not working correctly on $.ajax POST

$.ajax({
type: 'POST',
url: '/Base/SetCookie',
data: {
key: 'area',
value: addrId
},
success: function (data) {
console.log(window.location); //window.location is 'localhost:12345/Cart'
window.location.reload(true);
}
})
It took me back to localhost:12345 instead of my current page which is localhost:12345/Cart
Any idea what's wrong?
UPDATE :
Complete Code
$('.cartindexaddress').on('ifClicked', function (event) {
var addrId = $(this).val();
$.ajax({
url: '/Membership/GetUserAreaById/',
data: {
id: addrId
},
success: function (data) {
$.ajax({
type: 'POST',
url: '/Base/SetCookie',
data: {
key: 'area',
value: addrId
},
success: function (data) {
window.location.reload(true);
}
})
}
})
})
tried :
window.location.reload(true);
location.reload();
window.location.href = window.location.href;
window.location.href = '/Cart';
window.location.href = window.location;
Everything is not working, still took me back to first page.

please use $.post instead of $.ajax in my code everything is ok by using $.post

jQuery parallel AJAX call mixes up return values

In the following JavaScript code I repeatedly make AJAX calls to my FastCGI module to query some values. At some point the code terminates when the data variable for the div2 case is not 0 but contains the value that should go into div1 while the div1 displays the value that was supposed to go into div2.
I am using the Chromium Browser (14.0.835.202 (Developer Build 103287 Linux) Ubuntu 10.10) but it also happens with FireFox. I also tried using the XMLHttpRequest object alone and I got the same results.
How can this be and how can this be solved?
function TimerEvent() {
$.ajax({
url: "/cgi-bin/wvvar.cgi",
type: "POST",
data: "cmd=get&varname=s#SYSDATETIME",
success: function(data) {
document.getElementById("div1").innerHTML = data;
}
});
$.ajax({
url: "/cgi-bin/wvvar.cgi",
type: "POST",
data: "cmd=get&varname=#LOGINSTATE",
success: function(data) {
document.getElementById("div2").innerHTML = data;
if (data == "0")
setTimeout("TimerEvent()", 50);
}
});
}

Maybe try have them sequential:
function TimerEvent() {
$.ajax({
url: "/cgi-bin/wvvar.cgi",
type: "POST",
data: "cmd=get&varname=s#SYSDATETIME",
success: function(data) {
document.getElementById("div1").innerHTML = data;
$.ajax({
url: "/cgi-bin/wvvar.cgi",
type: "POST",
data: "cmd=get&varname=#LOGINSTATE",
success: function(data) {
document.getElementById("div2").innerHTML = data;
if (data == "0")
setTimeout("TimerEvent()", 50);
}
});
}
});
}

If your requirements allows, try this:
function TimerEvent() {
$.ajax({
url: "/cgi-bin/wvvar.cgi",
type: "POST",
data: "cmd=get&varname=s#SYSDATETIME",
success: function(data) {
document.getElementById("div1").innerHTML = data;
$.ajax({
url: "/cgi-bin/wvvar.cgi",
type: "POST",
data: "cmd=get&varname=#LOGINSTATE",
success: function(data) {
document.getElementById("div2").innerHTML = data;
if (data == "0")
setTimeout("TimerEvent()", 50);
}
});
}
});
}

Try to execute the calls synchronously by adding the async=false option.

ajax request not working on IE

function VReload()
{
$.ajax({
type: "GET",
url: "/foo/",
success: function (data) {
$("#myid").html(data);
}
});
}
$(document).ready(function() {
setInterval('VReload()', 1000)
});
This piece of code is working fine on Mozilla and chrome but not on IE. Ajax call is not firing on IE. What could be the reason.

Switch off caching by doing this:
$.ajax({
type: "GET",
cache: false,
url: "/foo/",
success: function (data) {
$("#myid").html(data);
}
});

set cache false
$.ajaxSetup({ cache: false });
or
$.ajax({
cache: false,
//other options
});

Try this:
function VReload()
{
var timestamp = new Date();
$.ajax({
type: "GET",
url: "/foo/" + "&timestamp=" + timestamp.getTime(),
success: function (data) {
$("#myid").html(data);
}
});
}
$(document).ready(function() {
setInterval('VReload()', 1000)
});

use jQuery's $.get() function
$.get('/foo/', {}, function(data){
// whatever
});

jQuery / Javascript - run AJAX request after X seconds

so I have this code:
$('input.myinput').each(function(){
var id = $(this).val();
var myajax = function(){
$.ajax({
url: ajax_url,
type: "GET",
data: ({
code: id
}),
beforeSend: function() { },
error: function(request){ },
success: function(data) { alert(data); }
});
setTimeout('myajax()', 10000);
}
myajax();
});
I wanted the ajax() request above to run 10 seconds after the page was loaded, so I used setTimeout, but it doesn't work :(
the ajax thingy runs right after the page loads, not 10 secs after...
what am I doing wrong?

$('input.myinput').each(function(){
var id = $(this).val();
var myajax = function() {
$.ajax({
url: ajax_url,
type: "GET",
data: ({
code: id
}),
beforeSend: function() { },
error: function(request){ },
success: function(data) { alert(data); }
});
//if you need to run again every 10 seconds
//setTimeout(myajax, 10000);
};
setTimeout(myajax, 10000);
});

I'd do a few things differently..
function myajax(id) {
$.ajax({
url: ajax_url,
type: "GET",
data: ({
code: id
}),
error: function(request){ },
success: function(data) { alert(data); }
});
setTimeout('myajax(id)', 10000); // you really want it to run AGAIN in another 10 seconds?
}
...
$(document).ready(function() {
$('input.myinput').each(function(){
var id = $(this).val();
setTimeout('myajax(' + id + ')',10000);
});
});
There's no reason to redeclare myajax as a new function for every input, when you can declare it once and pass in a new ID variable each call.

jquery function problem

I have this function
function onclickRowRecord(recordID) {
$.ajax({
type: "POST",
url: '/file/to/post.to.php' ,
data: {recordID:recordID},
success: function(data) {
//how to post this to function howToPost(recordID) the recordID
}
});
}
function howToPost(recordID){
alert(recordID);
}
so how can I get the response from ajax success and post to the other function

If post you mean call the hotToPost function, then
...
success: function(data) {
howToPost(data.recordID); //or whatever
}
....
Hope this helps.

$.ajax({
type: "POST", url: '/file/to/post.to.php' , data: {recordID:recordID}, success: function(data) {
alert(recordID)
}
});
Does that work? Kinda new to jQuery

Categories