I need to create a div that will auto refresh every 10 seconds, and stop when it successfully loads. I created this jQuery script:
<script type="text/javascript">
$(document).ready(function(){
var j = jQuery.noConflict();
j(document).ready(function()
{
j(".refresh").everyTime(1000,function(i){
j.ajax({
url: "pin.php",
cache: false,
success: function(html){
j(".refresh").html(html);
}
})
})
});
j('.refresh');
});
</script>
It works but the refresh continues every 10 seconds. I need it to stop if pin.php returns a numeric output.
How can I edit it to stop refresh if pin.php returns a numeric output?
From the documentation over at http://www.jquery-plugins.info/jquery-timers-00013992.htm, the function you need is probably stopTime. Although I haven't tested it, the following in your success should work:
success: function(html) {
if (j.isNumeric(html)) {
j(".refresh").stopTime();
} else {
j(".refresh").html(html);
}
}
Try it with an interval like this, it fires till the loaded call is done then it stops the interval and ajaxcal
$(document).ready(function(){
var j = jQuery.noConflict();
jRefresh();
var jRefresh = setInterval(function(){
ajaxCall()
}, 1000);
function ajaxCall() {
j.ajax({
url: "pin.php",
cache: false,
success: function(html){
if (j.isNumeric(html)) {
myStopFunction();
}
}
})
}
function myStopFunction() {
clearInterval(jRefresh);
}
});
first of all you do not need to call $(document).ready() twice. To aviod conflicts you can write code like this :
jQuery(document).ready(function($){
// Your code here
});
Note the $ parameter
Second, I guess it is unuseful to use everytime ( looks like is a plugin and is not a good idea to load a lot of code since you have good alternatives for your needs ) when you can simply call setInterval;
According to your needs and following what i said above, the code should looks like :
jQuery(document).ready(function($){
var interval_time = 10000;
var interval = null;
var $wrapper = $('.refresh');
interval = setInterval(function(){
$.ajax({
url : 'pin.php',
cache : false,
success : function( html ){
if( $.isNumeric( html ) ){
clearInterval( interval );
}
$wrapper.html( html );
}
})
}, interval_time);
});
You can modify your code something like this:
var temp = setInterval(1000,function(i){
j.ajax({
url: "pin.php",
cache: false,
success: function(html){
if(isNaN(html))
j(".refresh").html(html);
}else{temp.clearInterval();}
})
})
You said, "I need it to stop if pin.php returns a numeric output".
if .refresh html contain number than it stop to call ajax call otherwise it make call.
if(isNaN(j(".refresh").html()){
//put your ajax call in this block
}
Related
I have created an Interval that runs on every 2 seconds, when the page loads. Now, when I move to other page, the interval is cleared (Please check the code). Now what I want is when I move to the same tab again, the interval should start again.
One thing I tried was that I wrote this whole code inside $(window).focus(//CODE) but the problem is that it doesn't run when the page is initially opened in any browser's tab.
How can solve this issue?
Here's my code:
var zzz= setInterval(anewFunc, 2000);
function anewFunc(){
$(document).ready(function(){
var chatattr=$(".chatwindow").css("visibility");
var chattitle=$("#hideid").text();
if(chatattr=="visible"){
$.ajax({
url: 'seen1.php',
type: 'post',
data: "ctitle="+chattitle,
success: function(result9){
},
error: function(){
}
});
}
$(window).blur(function(){
$.ajax({
url: 'session.php',
type: 'post',
success: function(result10){
// alert(result10);
},
error: function(){
}
});
clearInterval(zzz);
});
});
}
One thing I tried was that I wrote this whole code inside $(window).focus(//CODE) but the problem is that it doesn't run when the page is initially opened in any browser's tab.
Okay, the problem here is, the setInterval() doesn't execute at 0 seconds. It starts from 2 seconds only. So you need to make a small change:
Have the function separately.
Inside the ready event, start the timer, as well as run the function for the first time.
Remove the event handlers from the interval, or use just .one() to assign only once. You are repeatedly adding to the .blur() event of window.
Corrected Code:
function anewFunc() {
var chatattr = $(".chatwindow").css("visibility");
var chattitle = $("#hideid").text();
if (chatattr == "visible") {
$.ajax({
url: 'seen1.php',
type: 'post',
data: "ctitle=" + chattitle,
success: function(result9) {},
error: function() {}
});
}
$(window).one("blur", function() {
$.ajax({
url: 'session.php',
type: 'post',
success: function(result10) {
// alert(result10);
},
error: function() {}
});
clearInterval(zzz);
});
}
$(document).ready(function() {
var zzz = setInterval(anewFunc, 2000);
anewFunc();
});
Now what I want is when I move to the same tab again, the interval should start again.
You haven't started the setInterval() again.
$(document).ready(function () {
$(window).one("focus", function() {
var zzz = setInterval(anewFunc, 2000);
});
});
Good Afternoon,
I have got two functions, one in ajax another one in js as below:
<script>
/* AJAX request to checker */
function check(){
$.ajax({
type: 'POST',
url: 'checker.php',
dataType: 'json',
data: {
counter:$('#message-list1').data('counter')
}
}).done(function( response ) {
/* update counter */
$('#message-list1').data('counter',response.current);
/* check if with response we got a new update */
if(response.update==true){
$('#message-list1').html(response.news);
var audio = new Audio('ding.mp3');
audio.play();
}
});
}
//Every 20 sec check if there is new update
setInterval(check,2000);
</script>
<script>
function reblink() {
$.getScript($('script:first',data).attr('src'), function(){
eval(blink('.blink'););
});
</script>
now reblink function stops right after I call ajax function. Again it does starts when I physically refresh page. What I want to achieve is to start this function after my each call of the ajax function.
I was trying to merging them 2 functions by placing:
$.getScript($('script:first',data).attr('src'), function(){
eval(blink('.blink'););
In if(response.update==true){ } however it does than stop ajax from functioning.
Any suggestions much appreciated.
UPDATE
So after changes mentioned in comments code is now looking like below:
<script>
/* AJAX request to checker */
function check4(){
$.ajax({
type: 'POST',
url: 'checker.php',
dataType: 'json',
data: {
counter:$('#last-orders').data('counter')
}
}).done(function( response ) { /* update counter */
$('#last-orders').data('counter',response.current);
/* check if with response we got a new update */
if(response.update==true){
$('#last-orders').html(response.news4);
var audio = new Audio('ding.mp3');
audio.play();
reblink() // call reblink here to execute
}
});
}
//Every 20 sec check if there is new update
setInterval(check4,2000);
</script>
reblink
<script>
function reblink() {
$.getScript($('script:first',data).attr('src'), function(){
eval(blink('.blink'));
});
}
</script>
and function that actually do the blink effect
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
function blink(selector){
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
blink('.blink');
});//]]>
</script>
And after all of those stil ajax call do stop blinking.
This script here has an error in its syntax.
<script>
function reblink() {
$.getScript($('script:first',data).attr('src'), function(){
eval(blink('.blink');); // the (;) is the error
});
//} this closing bracket for the function here is missing
</script>
And here is the correct syntax below.
<script>
function reblink() {
$.getScript($('script:first',data).attr('src'), function(){
eval(blink('.blink'));
});
}
</script>
UPDATE
I can see there in your code that you are not calling reblink() function. And you mentioned also there that you want to call reblink() after ajax, you should put reblink() inside in your .done({}); portion of your ajax like this.
.done(function( response ) { /* update counter */
$('#message-list1').data('counter',response.current);
/* check if with response we got a new update */
if(response.update==true){
$('#message-list1').html(response.news);
var audio = new Audio('ding.mp3');
audio.play();
reblink() // call reblink here to execute
}
});
I currently have the below function which updates the data in a div when the page is refreshed and this works fine however i want to edit the function to make it constantly update say every 2 seconds without having to refresh the page. How would i go about doing this?
<script>
$(document).ready(function ajaxLoop() {
//-----------------------------------------------------------------------
// Send a http request with AJAX Jquery
//-----------------------------------------------------------------------
$.ajax({
url: 'getOrderStatus.php', // Url of Php file to run sql
data: "",
dataType: 'json', //data format
success: function ajaxLoop(data) //on reciept of reply
{
var OrdersSubmitted = data[0].SUBMITTED; //get Orders Submitted Count
var OrdersFulfilled = data[0].FULFILLED; //get Orders Fulfilled count
//--------------------------------------------------------------------
// 3) Update html content
//--------------------------------------------------------------------
$('#OrdersSubmitted').html("SUBMITTED:" + OrdersSubmitted);
$('#OrdersFulfilled').html("FULFILLED:" + OrdersFulfilled); //Set output html divs
}
});
});
</script>
You can chain setTimeout calls to achieve this:
$(document).ready(function() {
function updateOrders() {
$.ajax({
url: 'getOrderStatus.php',
dataType: 'json',
success: function ajaxLoop(data) {
var OrdersSubmitted = data[0].SUBMITTED;
var OrdersFulfilled = data[0].FULFILLED;
$('#OrdersSubmitted').html("SUBMITTED:"+ OrdersSubmitted);
$('#OrdersFulfilled').html("FULFILLED:"+ OrdersFulfilled);
setTimeout(updateOrders, 2000);
}
});
});
The alternative is setInterval(), however if the requests slow down this can lead to calls being queued, which will eventually lead to memory issues.
You need to add a repeating event to call your updateOrders function. Like:
function startUpdateOrdersTimes() {
setInterval(function() {
updateOrders();
}, 2000);
//Call now (otherwise waits for first call)
updateOrders();
}
Using "window.setInterval" (https://developer.mozilla.org/en/docs/Web/API/window.setInterval) you can repeatedly execute a function at a specified time interval.
function SomeFunction()
{
$.ajax({...});
}
window.setInterval(SomeFunction,2000);
This would execute SomeFunction every 2 seconds
Hope this helps
timerupdateorders = setInterval(function() {
ajaxLoop();
}, 2000);
You may use
clearInterval(timerupdateorders);
to end the timer
I have the following piece of code. Interval is set to 10sec.
(function($){
$(document).ready(function() {
disp_log();
setInterval(function () {
disp_log();
}, 10 * 1000);
function disp_log() {
$.ajax({
"type" : "GET",
"url" : "/get_log/",
"dataType" : "json",
"cache" : false,
"success" : function(json) {
data=""
for(var j = 0; j < json.length; j++) {
data+="<tr><td>"+json[j]+"</td></tr>"
}
$("#log").html(data);
}
})(jQuery);
}
});
})(django.jQuery);
But refreshing dosen't happen. Can someone plz tell why?
The thing you need to do here is debug. First of all work out if you are getting any code back at all. You can do this by using....
"success" : function(json) {
console.log(json);
//or..
alert(json);
}
If they don't return anything, then your AJAX request is the problem, not your setInterval code.
However on your setInterval code, you should know that the ajax call could take any time to load, so you shouldn't just keep running it. A better way would be to use setTimeout....
setTimeout(disp_log,10*1000);
Then, inside your success function, put that same code in again...
"success" : function(json) {
setTimeout(function() {
disp_log()
},10*1000);
}
This will ensure that your code keeps running 10 seconds after the last time the data was successful. There are other issues to consider (how you keep the script running if the ajax call fails, for example) but this will ensure you don't end up getting out of sync with your server requests!
You have an error here : $.ajax does not return you something to call jQuery on. No need for that (jQuery)
Use it as below.
setInterval(disp_log, 10 * 1000);
if you function is in global then use it as
setInterval("disp_log()", 10 * 1000);
also you don't need (jQuery) after end of ajax call.
And more important you have (function($){ and $(document).ready(function() {.
You don't need it because both are same use either one.
Working Tested Code
<script type="text/javascript">
$(document).ready(function()
{
disp_log();
setInterval(disp_log, 10 * 1000);
function disp_log()
{
$.ajax({
"type" : "GET",
"url" : "/get_log/",
"dataType" : "json",
"cache" : false,
"success" : function(json)
{
var data;
for(var j = 0; j < json.length; j++)
{
data+="<tr><td>"+json[j]+"</td></tr>"
}
$("#log").html(data);
}
});
}
});
</script>
PROBLEM MAY BE OF THE BROWSER
I had a problem using this setInterval() function, but later I found it was the problem of my mozilla. When I tried to run in Chrome, it was perfect.
I'm making a conversation system where 2 people can chat with each other. I've made an AJAX function which updates the DIV box containing the messages every 2 seconds.
This is working as intended, after a user have written a message. Why isn't the AJAX call being run right away?
// SET AUTORUN updateMessages() EVERY 2 SECONDS
$(document).ready(function() {
var interval
window.onload = function(){
interval = setInterval('updateMessages()', 2000);
};
});
// UPDATE #mail_container_conversation
function updateMessages() {
$.ajax({
type: "POST",
url: "<?php echo site_url(); ?>mail/ajaxupdate/<?php echo $user; ?>",
data: dataString,
success: function(data){
$("#mail_container_conversation").html(data);
}
});
}
// SEND NEW MESSAGE
$(function(){
$("#mail_send").submit(function(){
dataString = $("#mail_send").serialize();
$.ajax({
type: "POST",
url: "<?php echo site_url(); ?>mail/send",
data: dataString,
success: function(data){
updateMessages();
$(".mail_conversation_answer_input").val('');
}
});
return false;
});
});
You should provide functions instead of strings to setTimeout/setInterval functions. And also there's no need for you to set interval on window load event. You can just keep it as part of DOM ready:
$(function() {
updateMessages(); // don't wait 2 seconds for first update
setInterval(updateMessages, 2000); // update every 2 seconds
});
Everything else seems to should work as expected as long as your posback work when no data is being received (ref dataString).
I hope you do realise that you're using implied globals and understand why that may be a big problem (ref dataString again).
How I would rewrite your code
I would rewrite your whole code into the following that removes implied global variable dataString, doesn't pollute global scope with additional functions and uses setTimeout instead of interval which may in some cases be problematic (although in your case since it' only runs every 2 seconds it shouldn't be a problem if there's no additional very complex client-side script execution)
I've kept everything within function closure local scope:
$(function() {
var timeout = null;
var form = $("#mail_send").submit(function(evt){
evt.preventDefault();
$(".mail_conversation_answer_input", form).val("");
updateMessages();
});
var updateMessages = function() {
// we don'w want submit to interfere with auto-updates
clearTimeout(timeout);
$.ajax({
type: "POST",
url: "<?php echo site_url(); ?>mail/send",
data: form.serialize(),
success: function(data){
$("#mail_container_conversation").html(data);
timeout = setTimeout(updateMessages, 2000);
}
});
};
// start updating
updateMessages();
});
This code requires your server side (processing on /mail/send) to understand that when nothing is being posted (no data) that it doesn't add empty line in the conversation but rather knows that this is just an update call. This functionality now uses only one server-side URL and not two of them. If you'd still require two, then this code should do the trick:
$(function() {
var timeout = null;
var url = {
update: "<?php echo site_url();?>mail/ajaxupdate/<?php echo $user;?>",
submit: "<?php echo site_url();?>mail/send",
use: "update"
};
var form = $("#mail_send").submit(function(evt){
evt.preventDefault();
url.use = "submit";
$(".mail_conversation_answer_input", form).val("");
updateMessages();
});
var updateMessages = function() {
// we don'w want submit to interfere with auto-updates
clearTimeout(timeout);
$.ajax({
type: "POST",
url: url[url.use],
data: form.serialize(),
success: function(data){
$("#mail_container_conversation").html(data);
url.use = "update";
timeout = setTimeout(updateMessages, 2000);
}
});
};
// start updating
updateMessages();
});
If the rest of your code work, the problem probably is withing this code:
$(document).ready(function() {
var interval
window.onload = function(){
interval = setInterval('updateMessages()', 2000);
};
});
There is no need to attach it to window.onload, since you already wrapped it in a DOM-ready callback.
Remove the single-quotes and the parenthesis from within your call to setInterval
The DOM-ready callback can be shorten, by just passing a function to the jQuery-method.
Try this instead:
$(function () {
setInterval(updateMessages, 2000);
});
Further improvements - Avoid intervals with AJAX:
When dealing with AJAX, you should avoid using intervals, as you may end up stacking calls to the server, if the server takes more than two seconds to respond. setInterval will not care if your server had time to respond or not, it will keep calling it every 2 seconds no matter what.
I suggest that you use a timeout instead, and start a new timeout in the complete-callback of the Ajax-call.
In your case, it could look something like this:
$(function () {
// Make the first call immediately when the DOM is ready
updateMessage();
});
function updateMessages() {
$.ajax({
type: "POST",
url: "<?php echo site_url(); ?>mail/ajaxupdate/<?php echo $user; ?>",
data: dataString,
success: function(data){
$("#mail_container_conversation").html(data);
// Make a new call, 2 seconds after you've
// received a successful respose
setTimeout(updateMessages, 2000);
}
});
}
The problem is that updateMessages() tries to send datastring to the server, but this doesn't get filled in until the .submit() function runs.
I don't know what you should put in there, since I don't know what the mail/ajaxupdate script expects. If this is called when nothing happens, I suspect no form data is needed at all, so you can give an empty string.
I'll bet if you checked the Javascript console you'd see some error messages about trying to serialize undefined.
give a try with
$(document).ready(function() {
setInterval('updateMessages()', 2000);
});
You don't need the window.onload in your document ready call.
$(document).ready(function() {
setInterval('updateMessages()', 2000);
});
That should be enough to get it started.
As it is now, once the DOM is ready, you're then asking it to wait for the window to load.. but by that point it's already loaded, so nothing happens.