I'm trying to use setInterval to execute the php script update.php every 10 seconds and refresh div id = verification. For some reason setInterval is preventing the script from functioning. Any suggestions on where to place\change setInterval would be appreciate as I'm stumped (sorry entry level javascript user here). For clarity I omitted all the non-relevant details, such as vars.
<div id="verification"></div>
<script id="verification" language="javascript" type="text/javascript">
$(function() {
$.ajax({
url: 'update.php', //php
data: "", //the data "caller=name1&&callee=name2"
dataType: 'json', //data format
success: function(data) //on receive of reply
{
var foobar = data[2]; //foobar
$('#verification').html("(<b>" + foobar + "</b>)"); //output to html
}
});
});
setInterval(10000); //every 5 secs
</script>
Suggestions/Steps/Bugs:
Create a separate function to perform ajax request
Call this function on page load to run it when page is loaded
Use setInterval() to call the function every n seconds
id should always be unique. You're now using verification as if for <div> and <script>
You can remove id and language attributes of <script>. Those are not required.
Code:
function update() {
$.ajax({
url: 'update.php', //php
data: "", //the data "caller=name1&&callee=name2"
dataType: 'json', //data format
success: function (data) {
//on receive of reply
var foobar = data[2]; //foobar
$('#verification').html("(<b>" + foobar + "</b>)"); //output to html
}
});
}
$(document).ready(update); // Call on page load
// ^^^^^^
setInterval(update, 10000); //every 10 secs
// ^^^^^^
setInterval() takes a function (that it should execute) as it's first argument.
Try this:
setInterval(function(){
$.ajax({
url: 'update.php', //php
data: "", //the data "caller=name1&&callee=name2"
dataType: 'json', //data format
success: function(data) //on receive of reply
{
var foobar = data[2]; //foobar
$('#verification').html("(<b>"+foobar+"</b>)"); //output to html
}
});
}, 10000);
you are using setInterval in a wrong way - you can read about it here:
http://www.w3schools.com/js/js_timing.asp
Also please notice that AJAX calls are asynchronous - when program is going forward it doesn't mean that previous AJAX call has ended. You can "wait" for AJAX completition using some jQuery mechanisms like binding ajaxComplete or using when
You are missing the function block:
setInterval(function() {
// to do
}, 5000);
My suggestion is to go for setTimeout as you are running ajax it is not certain that it would complete within 5 seconds. In case if you wana go for it:
var dispatchUpdates = function() {
setTimeout(pullUpdates, 5000);
};
var pullUpdates = function() {
$.ajax({
url: 'update.php',
data: "",
dataType: 'json',
success: function(data) {
var foobar = data[2];
$('#verification').html("(<b>" + foobar + "</b>)");
dispatchUpdates(); // next updates
},
error: function() {
dispatchUpdates(); // retry
}
});
};
$(dispatchUpdates); //page load
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Related
I have an ajax function that updates every second some value on page, I want to update it only when the script is working, because to not request a value that is the same.
The script is updating this value, and ajax is refreshing it on website, but when script is not working, my ajax is requesting the value. How to make it work only when the script is working?
var interval = 1000;
function update() {
$.ajax({
type: 'GET',
url: 'http://localhost:8000/api/updating',
headers : {'Authorization': "Token "+ token,},
data: $(this).serialize(),
dataType: 'json',
success: function (data) {
$('#points_a').html(data)// first set the value
},
complete: function (data) {
// Schedule the next
setTimeout(update, interval);
}
});
}
setTimeout(update, interval);
This is script in python view, Django:
def task(userid, seconds_for_thirtydays=0):
if(seconds_for_thirtydays < 2592000):
p_a = Wallet.objects.filter(name__id=userid).values("points").first()['points']
add = p_a + 1
result = Wallet.objects.filter(name__id=userid).update(points=add)
seconds_for_thirtydays = seconds_for_thirtydays + 1
time.sleep(1)
task(userid)
else:
return
The thing that I want to make is: When the value is not changing(the script is not working), then this ajax won't work and won't make requests, is it possible?
i realy need your help. I have a chat with diferent rooms. When the user click on a ROOM BUTTON it appears the messages tha has on that room, and updates with a SetINTERVAL every 2 sec.
EXAMPELE CODE:
var abc = setInterval(function()
{
$.ajax({
type:"post",
url:"logs.php?user_profil=<?php echo $user_profil;?>&user=<?php echo $user;?>",
datatype:"html",
success:function(data)
{
$("#chatlogs").html(data);
}
});
}, 2000);
The problem is that if hi clicks on a other ROOM BUTTON the chats overlap.
how can i stop the
VAR ABC and start it again with different values?
HERE IS A EXAMPLE(this is just a example page):
var myMethod = function() {
$.ajax({
type: "post",
url: "logs.php?user_profil=<?php echo $user_profil;?>&user=<?php echo $user;?>",
datatype: "html",
success: function(data) {
$("#chatlogs").html(data);
}
});
},
abc = setInterval(myMethod, 2000);
clearInterval(abc);
abc = setInterval(myMethod, 2000);
Explanation: save the callback method into a variable and re-use that variable for setInterval;
how can i stop the VAR ABC and start it again with different values
By the way, the abc variable just holds id of that particular interval. You realy don't need (and you can't) to "start it again", you need to start another one :).
I would do it like this:
var getRoomUpdater = (function(){
var _userProfileId;
var updater = function() {
$.ajax({
type: "post",
url: "logs.php?user_profil=" + _userProfileId + "&user=<?php echo $user;?>",
datatype: "html",
success: function(data) {
$("#chatlogs").html(data);
}
});
}
return function(userProfileId){
_userProfileId = userProfileId;
return updater;
};
})();
// it will hold interval id
var abc;
// Opening a room:
var openRoom = function(roomId){
// start automatic update
clearInterval(abc);
abc = setInterval(getRoomUpdater(roomId));
// + other actions if needed
}
I am building a chatroom-type app using the Parse Javascript API. The task is to get some data from Parse, display it, add user input to the messages, and send it right back to parse.
The problem is I am not being able to see the data from parse, and receive a 502 error. I am a bit newer to javascript, so any advice on how to accomplish this, or any mistakes you may see in my code, would be fantastic. I also commented out my code the best I could. Thanks for the help.
Here is my code;
$(document).ready(function(){
delete Chat.display;
delete Chat.send;
delete Chat.fetch;
var my_messages = $('ul.messages')
//fetches data from parse
var myChat = function() {
$.ajax({
url: "https://api.parse.com/1/classes/chats",
dataType: "json",
success: console.log("Success"),
function message(a) {
my_messages.append('<ul>' + a +'</ul>'); //adds ul 'text' to messages
};
});
};
myChat(); // call mychat
$('button.send').on('click', function() { // when user clicks send
// send post to
$.ajax({
type: "POST",
url: "https://api.parse.com/1/classes/chats",
data: JSON.stringify({text: $('input.draft').val()}), // stringify the text on value input.draft
function(message){
window.location.reload(1) //refresh every 3 seconds
});
});
});
</script>
you have syntax error in both of your success functions of $.ajax calls. In the first ajax call you have places console.log, which should be inside the success callback. In the second one u haven't even added success: callback.
Try below updated code
$(document).ready(function(){
delete Chat.display;
delete Chat.send;
delete Chat.fetch;
var my_messages = $('ul.messages');
var myChat = function() {
$.ajax({
url: "https://api.parse.com/1/classes/chats",
dataType: "json",
success:function message(a) {
console.log("Success")
$.each(a,function(i,item){
my_messages.append('<ul>' + item.username +'</ul>'); //adds ul 'text' to messages
});
}
});
};
myChat(); // call mychat
$('button.send').on('click', function() { // when user clicks send
// send post to
$.ajax({
type: "POST",
url: "https://api.parse.com/1/classes/chats",
data: JSON.stringify({text: $('input.draft').val()}), // stringify the text on value input.draft
success:function(message){
window.location.reload(1) //refresh every 3 seconds
}
});
});
});
I have a variable in the success part of ajax and I want to reuse it in another function (which executed every 3 seconds), I tried to declare it global, but it does not work; Tdata is not known.
I know that $.ajax is an asynchronous function and I saw some posts similar to mine but it did not help me.
Help me please. Thank you.
This is a part of my code:
<script language='Javascript'>
var Tdata;
$.ajax({
method : "GET",
url: "load-data.php",
success : function(data){
Tdata=jQuery.parseJSON(data);
////
}
});
window.setInterval(function() {
$(window).load(function() {
$.each(Tdata, function(variable) {
/////////////
});
});
}, 3000);
</script>
Why not wait until the AJAX request has successfully returned data before starting your interval? Since any executions of the interval's function aren't going to do anything (due to no data) before that point waiting isn't going to change the way the page would function in any way.
$.ajax({
method: "GET",
url: "load-data.php",
dataType: "json"
success: function(data) {
var Tdata = data;
// do some more stuff with the response of the AJAX request
var interval = setInterval(function() {
$.each(Tdata, function(variable) {
// do something with variable
});
}, 3000);
}
});
Note that I've removed the binding of the load event to the window every time the interval runs because doing so really doesn't seem to make any sense. I've also added a dataType property with a value of json to the options object passed to $.ajax() so you don't have to parse the response as JSON yourself.
try this,
<script language='Javascript'>
var Tdata;
$.ajax({
method : "GET",
url: "load-data.php",
success : function(data){
Tdata=jQuery.parseJSON(data);
////
}
});
$(window).load(function() {
window.setInterval(function() {
$.each(Tdata, function(variable) {
/////////////
});
}, 3000);
});
</script>
Function that uses the variable from AJAX call should be called from inside AJAX success, like this:
$.ajax({
method : "GET",
url: "load-data.php",
success : function(data){
Tdata=jQuery.parseJSON(data);
myFunction();
}
});
function myFunction(){
var interval = setInterval(function() {
$.each(Tdata, function(variable) {
/////////////
});
}, 3000);
}
is callback tdataAjax function ajax success method run; #param parseJSON
var tdataAjax = function(callback) {
$.ajax({
method : "GET",
url: "load-data.php",
success : function(data){
var Tdata=jQuery.parseJSON(data);
setInterval(function() {
callback(Tdata);
}, 3000);
}
});
};
is Callback function #param data in tdataAjax function
tdataAjax(function(data) {
$.each(data, function(variable) {
// code
});
});
tdataAjax ++ :)
tdataAjax(function(data) {
$.each(data, function(variable) {
// cla bla
});
});
I'm trying to implement simple Comet chat example and for this I implemented Long polling which calls itself recursively every 30 seconds.
When pressing on button I want another ajax request to send new data on Server using POST.
For now I just put alert to this function to trigger click event
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var polling = function poll(){
$("#postMessage").click(function () {
alert("request");
});
$.ajax({ dataType: 'json',url: "CometServlet", success: function(data){
if (data !=null){
$('#message').append(data.sender+" : " + data.message+"<br />");
}
}, complete: poll, timeout: 30000 });
}
$(document).ready(polling)
</script>
And my HTML is like this:
<div>
<input type="button" id="postMessage" value="post Message">
</div>
<div id ="message" name="message"></div>
When I click on button my alert is shown several times. Why? How can I solve it?
As Dave mentions, that's not what the timeout option is for. Try something using setTimeout instead. Also, you're mixing your polling logic and your click handler (I think). Here's how you would separate them:
function poll() {
$.ajax({
dataType: 'json',
url: "CometServlet",
success: function(data){
if (data !=null){
$('#message').append(data.sender+" : " + data.message+"<br />");
}
},
complete: function () {
setTimeout(poll, 30000);
}
});
}
$(document).ready(function () {
$("#postMessage").click(function () {
alert("request");
});
poll();
});
Example: http://jsfiddle.net/VyGTh/
In your code after every Ajax call you re-bind click event to #postMessage and that's why you had couple of alert messages. You need to bind click only once in page load. You can fix it by doing something like:
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var polling = function poll(){
$.ajax({ dataType: 'json',url: "CometServlet",
success: function(data){
if (data !=null){
$('#message').append(data.sender+" : " + data.message+"<br />");
}
},
complete: poll,
timeout: 30000
});
}
$(document).ready(function(){
// Now Click only binds one time
$("#postMessage").click(function () {
alert("request");
});
polling();
});
</script>