I have a column in my web design, which is periodically refreshed by a JS function "refreshColumn()" and updated by AJAX.
setInterval('refreshColumn()',60000);
function refreshColumn() {
..make call with AJAX and load response to element...
document.getElementById('myColumn').innerHTML = xmlhttp.responseText;
}
This is okay, however, it's not very practical when my user is actually using that column and it refreshes on them!
Is it possible to modify what I have already, to incorporate an 'onmouseover' event that will stop the function from running the AJAX and refreshing the column, and 'onmouseout' allows the script to refresh again?
You would use a timeout instead of an interval, and just clear it on mouseover and reset it on mouseout.
Live Demo
var timeout = setTimeout(refreshColumn,60000);
function refreshColumn() {
// ajax call ect. reset the timeout
timeout = setTimeout(refreshColumn,60000);
}
element.onmouseover = function(){
clearTimeout(timeout);
}
element.onmouseout = function(){
timeout = setTimeout(refreshColumn,60000);
}
Related
I know how to do a post-request with jquery and get one response, but I wonder If I can post something with AJAX and then wait for multiple responses.
The idea behind it is that I have a progressbar (which I want to animate), so I need to get the status of the execution in my background code, which I called with AJAX.
Is this possible? I checked this. But it didn't help me.
Thanks!
You can try to identify the status for ajax when this execute into your web page. Example:
<script type="text/javascript">
//in your DOM, CALL YOUR FUNCTION
loading();
//set an interval to stop de function if the ajax is ready and all elements are ready
$load = {
setInterval(function() {
loading();
}, 1000); //each one second this Interval was checked if the page is complety ready
}
function loading() {
var x = document.readyState;
switch (x) {
case 'loading';
//show, hide something or animate an toolbar before of 50%
break;
case 'interactive';
//show, hide something or animate an toolbar before of 70%
break;
case 'complete';
//show, hide something
//we clean the interval to sstop if is compete and show the toolbar in 100%
clearInterval($load);
break;
}
}
</script>
You can learn more about Ready State property here http://www.w3schools.com/jsref/prop_doc_readystate.asp
I'm trying to play a sound every time a user gets a new notification. The way I am loading the notifications on my page is simple:
(function($)
{
$(document).ready(function()
{
var $container = $("#noti");
$container.load("notify.php");
var refreshId = setInterval(function()
{
$container.load('notify.php');
}, 1000);
});
})(jQuery);
This works by updating a div container with whatever number the PHP code sends out. it retries every second (probably not the most efficient way, but it works).
I have another piece of code that checks when the div content changes, then creates an alert box (which I will change to playing a sound when the script is done):
var myElement = document.getElementById('noti');
if(window.addEventListener) {
// Normal browsers
myElement.addEventListener('DOMSubtreeModified', contentChanged, false);
} else
if(window.attachEvent) {
// IE
myElement.attachEvent('DOMSubtreeModified', contentChanged);
}
function contentChanged() {
// this function will run each time the content of the DIV changes
alert("js is working");
}
This script works, however it also creates an alert or the first loading of the notifications. This is because it starts of as an empty div, then it loads the data, which sets off this alert script. The only way I could think about going round this is delaying the script from loading for a couple of seconds whilst the AJAX script does its business.
Does anyone know a way I could delay this second script from doing anything for the first few seconds after page load, or perhaps a better way about going round this?
Instead of doing that, use a custom event which you trigger when load finishes:
var refreshId = setInterval(reloadContainer, 1000)
function reloadContainer() {
$container.load('notify.php', function success() {
$container.trigger('loaded')
})
}
$(myElement).on('loaded', contentChanged)
This script fills several tables with ajax queries if they are active, and cleans the inactive tables:
$(".my_button_tables").on("click", function(event) {
var thetable = $(event.target).parent().next("table");
if (thetable.prop('rows').length) thetable.empty();
else {
fill_ajax($("#id_study").val(), thetable); // Fill the table
};
});
I want to reload the active ajax queries every X seconds. I'm using setInterval but I have problems with the code. Any solution?
Ok, my inspiration came after asking the question. Before I was using setInterval inside the onclick function. Now I found a solution simply adding another script:
var table_refresher = setInterval( function() {
$(".my_button_tables").parent().next("table").each(function(){
if ($(this).prop('rows').length) fill_ajax($("#id_study").val(), $(this)); // Fill the table
});
}, 15000);
I'm having a trouble with running function for checking new messages in table. When I open the message_page I want this 'setInterval' function to start running, but after leaving the page stop running (I have one html file with multiple pages). Is there a way to do that? Because my script keeps running even after leaving the page.
$(document).on('pageshow', '#message_page', function(){
$('#chat_box').scrollTop($('#chat_box').height());
setInterval( function() {checkNewMessages(c_key,m_fid);},1000);
});
Here's a working example: http://jsfiddle.net/Gajotres/QUCUt/
$(document).on('pagebeforeshow', '#index', function(){
timerHandler.timer1 = setInterval(function () {
$('#test-input').val(parseInt($('#test-input').val()) + 1);
}, 1000);
});
$(document).on('pagebeforehide', '#index', function(){
clearInterval(timerHandler.timer1);
});
var timerHandler = {
timer1 : null
}
Let me explain. If you create a timer as a object variable, it can be accessed at any moment. In this case pagebeforeshow event will start timer and pagebeforehide will pause it. You can test it on my example, just let it run a little bit, then go to the second page, wait a bit and return back. You will see that timer has been paused.
I have a little fiddle here where I'm starting/stopping/resetting a javascript timer.
The functionality needs to be a timer runs on a page. When the timer is up, it sends a message, then restarts. The stop button will stop the timer completely.
The fiddle above has the functionality I just described, however I feel like I'm not doing this correctly. Is setTimeout the correct way to create this timer? Should I use setInterval instead?
Secondly, my reset code looks like :
var onReset = function() {
clearTimeout(timerHandle);
onStart();
};
Is there a more elegant way to reset a timer in javascript?
Thanks.
The only improvement I can offer is for you to put it all in an encapsulated object, ask if you want an example. Or if you want to keep the structure you've got then change your onStart function to this to remove a bit of un-needed code.
var onStart = function() {
timerHandle = setInterval(function() {
$("#console").append("timer fired.. <br />");
}, 2000);
};
Fiddle here http://jsfiddle.net/qx6CM/