This is my code:
// Refresh feeds, but ONLY when you are NOT typing
var refreshId = setInterval(function() {
$("#load-feeds").load('/actions/loadfeed.php?randval='+ Math.random());
}, 9000);
$.ajaxSetup({ cache: false });
I'm working on a kind of "wall" like Facebook where you can comment on each other's posts. The wall automatically refreshes with AJAX (every 9 seconds), but when you're typing and the textfield is focused it removes the focus and the content of the textbox after the page refreshed.
How can I make it only refresh when you're NOT typing and make it stop when you're typing. Thanks! I've looked everywhere and tried everything, but no luck.
I suppose you have an input box like this:
<input type="text" id="input-box" ... />
All you have to do is mantain a global variable than says if this input has the focus:
var isTyping = false;
$("#input-box").focus(function() {
isTyping = true;
});
$("#input-box").blur(function() {
isTyping = false;
});
then you just have to check this variable before to allow the update:
// Refresh feeds, but ONLY when you are NOT typing
var refreshId = setInterval(function() {
if (!isTyping) {
$("#load-feeds").load('/actions/loadfeed.php?randval='+ Math.random());
}, 9000);
}
$.ajaxSetup({ cache: false });
You should keep a timeout timer running when they type, and check before you load:
var typing = false,
theTimer,
refreshId = setInterval(function() {
typing || $("#load-feeds").load('/actions/loadfeed.php?randval='+ Math.random());
}, 9000);
$.ajaxSetup({ cache: false });
$('#theInput').keyup(function() {
typing = true;
theTimer && clearTimeout(theTimer);
theTimer = setTimeout(function() {
typing = true;
}, 500);
});
Related
I am trying to display a loading animation and hide the search input box before the ajax request has been sent, the ".se-pre-con" element is the loader.
As you can see below I am tring to show this in the beforeSend of the ajax request. However, when the user is typing in the search box then stops for the delay specified (1000ms) the input box still displays throughout the ajax request but it is unresponsive.
Then the results are returned, and the loading animation does the fadeOut so it the show() must be triggering but the page remains unchanged until the results are returned. I want to prevent the unresponsive page effect and show a loading animation during the request. Any help is much appreciated.
$(document).ready(function() {
var delay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$('#search_field').keyup(function() {
var target = $(this);
delay(function() {
getSearchResults(target.val());
}, 1000);
});
function getSearchResults(str) {
$.ajax({
beforeSend: function(){
$(".se-pre-con").show();
$("#search_field").hide();
},
url: "http://example.com/Search_Results.php",
dataType:"html",
data: {"search_term": str},
method: "post",
async: false,
success: function(data){
if(data !== null) {
$("#search_default").hide();
$("#search_results_wrapper").html(data);
}
$(".se-pre-con").fadeOut("slow");
$("#search_field").show();
$("#search_field").focus();
},
error: function(){
$(".se-pre-con").fadeOut("slow");
$("#search_field").show();
$("#search_field").focus();
}
});
}
});
I found the solution.
Solution
It started working when I removed the option:
async: false
This code is supposed to request new chat messages and append them to the content on my website. The problem, though, is that it sometimes freezes and stops requesting new messages.
(function worker() {
$.ajax({
url: '/client_message.php?get_message=yes&chat_id=<?php echo $chat_id; ?>&user_id=<?php echo $uid; ?>',
success: function(data) {
content = data;
if(content != "" && content != prev) {
$("#chat_wrapper").append(content);
prev = content;
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
titleStuff();
}
},
complete: function() {
setTimeout(worker, 700);
}
});
})();
Please let me know if you need more information to figure out what could be wrong.
Adding this code did the trick:
$.ajaxSetup({ cache: false });
Seems like the problem was a result of the jQuery cache.
As the title says, I am facing some issues on a website.
My DB counts 80 entries, but on the front page, when I try an ajax query to get the total number of entries, it responds with 160 .
Also, this problem appeared today although the website was working fine for the last 5 days..
Thanks for reading, and I apologize for my English level.
The ajax query:
$(document).ready(function() {
$("#responsecontainer").load("countPost.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('countPost.php?randval='+ Math.random());
}, 1);
$.ajaxSetup({ cache: false });
});
And the countPost.php:
$nb_messages_requete = mysql_query("SELECT id FROM mybase");
$nb_entrees = mysql_num_rows($nb_messages_requete);
echo ''.$nb_entrees.''
this because you are loading the countPOST.php two times
try this
$(document).ready(function() {
var refreshId = setInterval(function() {
$("#responsecontainer").load('countPost.php?randval='+ Math.random());
}, 1);
$.ajaxSetup({ cache: false });
});
if you mean do your code every one second then replace this 1 by 1000
EDIT:
your cache looks desabled inside the function
try using it like that
$.ajaxSetup ({
// Disable caching of AJAX responses */
cache: false
});
$(document).ready(function() {
var refreshId = setInterval(function() {
$("#responsecontainer").load('countPost.php?randval='+ Math.random());
}, 1);
});
I have a page that the function is to refresh div tag.
Div tag function is refresh the data will receive.
So far that's ok.
When I block the text using mouse, that's will clear the block text based on timing "20000". This below the JS script function.
<script src='js/jquery.min.js'></script>
<script>
$(document).ready(function()
{
$("#content2").load("post_rf.php");
var refreshId = setInterval(function()
{
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 20000);
$.ajaxSetup({ cache: false });
});
</script>
What I want to do is, how to keep the block text in div refresh function ?
Because some user maybe want to copy the text. In this case, user must quickly copy the text before div refresh.
Maybe the example like facebook post live update.
You want to assign your interval to a variable, when user mouse overs your DIV then use clearInterval, when mouse out setInterval again.
var interval;
$(div).bind("mouseout", function() {
interval = setInterval(refresh, 1000);
});
$(div).bind("mouseover", function() {
clearInterval(interval);
});
EDIT
Sorry I posted that on a phone and it's hard to write code that way, try this:
<script src='js/jquery.min.js'></script>
<script>
$(document).ready(function() {
$("#content2").load("post_rf.php");
// set your initial interval to kick it off
var refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 20000);
// bind an event to mouseout of your DIV to kickstart the interval again
$("#content2").bind("mouseout", function() {
refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 20000);
});
// clear the interval on mouseover of your DIV to stop the refresh
$("#content2").bind("mouseover", function() {
clearInterval(refreshInterval);
});
$.ajaxSetup({ cache: false });
});
</script>
I have a code like this below :
$(document).ready(function() {
$("#content2").load("post_rf.php");
// set your initial interval to kick it off
var refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 1500);
// bind an event to mouseout of your DIV to kickstart the interval again
$("#content2").bind("mouseout", function() {
refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 1500);
});
// clear the interval on mouseover of your DIV to stop the refresh
$("#content2").bind("mouseover", function() {
clearInterval(refreshInterval);
});
$.ajaxSetup({
cache: false
});
});
What I want to do is when mouseover, data keep autorefresh.
In this case if I drag mouse into the area of mouseover, it stop auto refresh until I drag mouseout out the area of mouseover.
So is it possible to set onmouseover, data will keep auto refresh ?
i think what you want is the other way around,
$("#content2").bind("mouseover", function() {
refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 1500);
});
// clear the interval on mouseover of your DIV to stop the refresh
$("#content2").bind("mouseout", function() {
clearInterval(refreshInterval);
});
I'm a little confused about your question, well the following code is responsible for making stop the auto refresh when you mouseover
$("#content2").bind("mouseover", function() {
clearInterval(refreshInterval); // it's clearing the setInterval
});
If you just remove/disable the the line or whole function then it won't stop the auto refresh when you move your mouse on that element.
but if you only want to occur the auti refresh only on mouseover and again want to stop the auto refresh on mouseout then you can do as follows
$("#content2").bind("mouseover", function() {
refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 1500);
});
$("#content2").bind("mouseout", function() {
clearInterval(refreshInterval);
});
and should not use following code to start the auto refresh initially, just disable the code as follows
/*
var refreshInterval = setInterval(function() {
$("#content2").load('post_rf.php?randval='+ Math.random());
}, 1500);
*/
but you can keep the variable declarede as var refreshInterval=0;