At the moment I am using ajax requests every 10 minutes to update certain content and other time intervals for others.
I do this using jQuery by:
On mouse move, the active page is checked
If the active page has not be updated within the given time interval, the page is updated
I'm doing this because although i want the content to stay up to date, I don't want it to be sending requests in the background (when the user is not using the application). Doing this also means that if the user has not used it for more than the time period, when they start to use it again it will automatically update.
I'm wondering just how efficient this is as whenever the mouse moves the checks are called (and has slowed down performance a bit - especially when trying to click links) - is the a more efficient way to do this?
Thanks!
I would rather activate/reset a timer, on say, 60 seconds, on movement of the mouse, and set your fixed-interval checks to only run if that timer is above zero.
That way, checks aren't made every time the mouse moves, and if the user becomes inactive, update checks stop after 60 seconds.
Another possible solution would be to use the window blur and focus events to determine if the window is active:
var checkForContentUpdates = true;
$(window).focus(function() {
checkForContentUpdates = true;
});
$(window).blur(function() {
checkForContentUpdates = false;
});
Your AJAX routine would then key off of the checkForContentUpdates bool.
I'm sure that there are scenarios where this isn't fool-proof, so you'd likely have to combine this method with other logic.
Related
I am having problem in overriding the pagination code given by grid. What I need to do is kind of hack the pagination given by my grid.
We are having a lot of records. So, what we are doing we are loading records to a threshold limit.
So, lets assume the threshold limit is 50 and page size is 10 so there will be 5 pages. So, when user comes to 5th page next button provided by the grid will be disabled.
So, what we need to do we need to make it enable and if user clicks on it I need make ajax call and load another 50 records(threshold limit) in the grid.
After that I need to disable this event so that next time user clicks it should not do the make ajax call and it should work like previously (by going from 1st page to 2nd page and so on)
All the above things mentioned I am able to do. But here problem comes when user goes to 5th page and go back to some other page let say 3 without clicking next button. Now, after going to 3rd page
when user clicks on the next page button it is making ajax call as I have make the button enable when user comes to 5th page and provided a click event to it.
So even if I provide a condition to run only on when grid current page is 5 then also it is running because after going to 5th page I will make button enable and bind and event. So, as I provided the event it will run without even specifying the condition.
How do I make the click event work as default and only when the user is at 5 it will make the ajax call.
This is my code -
///grid Current page will tell us which page we are in the grid.
if(gridCurrentPage==5){
query(".dojoxGridWardButton").forEach(function(element) {
query(".dojoxGridnextPageBtnDisable").replaceClass("dojoxGridnextPageBtn", "dojoxGridnextPageBtnDisable");
query(".dojoxGridlastPageBtnDisable").replaceClass("dojoxGridlastPageBtn", "dojoxGridlastPageBtnDisable");
});
callNextButton(gridCurrentPage)
}
And this is the function.
function callNextButton(gridCurrentPage) {
var target = dojo.query(".dojoxGridnextPageBtn");
var signal = on(target, "click", function(event){ ///Adding click event
if (gridCurrentPage ==5 ) {
var deferred = new dojo.Deferred();
setTimeout(function() {
deferred.callback({
called: true
})
}, 2000);
if (checking some conditions) {
////////doing Ajax call
deferred.then(function() {
//calling a callback
})
},
error: function(e) {}
};
})
signal.remove(); //Removing click event
}
Note : My grid is enhanced grid which is part of dojo toolkit. But probably its a design issue so, any comments/advices are welcome.
I really need an advice here. Please anyone can find the problem where it is it will be reqlly helpful.
I have a div with a scrollbar which contains a logfile.
I fetch the newest log every 5000ms from the server by running a timer which does an ajax request to the server.
However, each time when I am reading and scrolling down the div, and the ajax request refreshes the div with the new content, then I am at the top of the text again and have to read all again.
So I need to check somehow if the user is reading at the moment, and clear the interval if he does.
I know that I could just create a toggle so the user can clear the interval manually, but I wan't to try a more intelligent approach.
My approach would be to check inside the timer, wheter the div is focused or not and if true, clear the Interval.
getLogs = setInterval
(
function()
{
if ($("div#log").is(":focus"))
{
clearInterval(getLogs);
}
else
{
//ajax request
}
},
5000
);
But $("div#log").is(":focus") always returns false.
I also tried $("div#log").is(":active") but this is not defined.
I suggest you use jQuery's .scrollTop() method to check whether scrollTop !== 0 in which case you can assume the user has scrolled within the element and is currently reading it.
getLogs = setInterval
(
function()
{
if ($("div#log").scrollTop() > 0)
{
clearInterval(getLogs);
}
else
{
//ajax request
}
},
5000
);
You could then introduce some logic to reinstate the timer either after a certain amount of time (assuming at some point the user will move on - quite a quick, but unstable solution) or by checking whether your log-file height is same as .scrollTop() + containing div height in which case the user has read to the end of the document.
I am creating a MCQs quiz and there is a time for each question. I have also used onbeforeunload in my script to prevent the user from accidentally navigating away from the quiz page. But when that alert gets display my setInterval counter stop working. How can i make the countdown to not stop even if there is an alert?
To further explain my problem here is the FIDDLE
Browser dialogs are blocking. All script execution stops when they are open. You cannot change this behaviour.
Instead of starting with 90 seconds and trying to reduce that by 1 second every second, calculate the current date + the 90 seconds to get the end date. Then on each call of your setTimeout, calculate the current number of seconds until the end date.
The timer won't advance while the alert is visible, but it will skip to where it should be when the alert is dismissed.
A possible workaround could be that you declare a var timeCount = new Date() to store the time if a beforeunload() is called and use that to calculate passed time/missed seconds. But otherwise what Diodeus said is correct.
I have a button which acts as an indicator, so has two states; pressing it toggles the state, and moves on to the next page.
Pressing the button calls a JavaScript function which handles this.
Having changed a button's 'src' image, using jQuery, I wish for the user to see the image change, pause for a fraction of a second, and only then see the next page displayed.
I am finding that the image does not visibly change until the JavaScript function returns, but this is after the pause, and after the page change. I.e. the browser does not show the page changes until the button's function has exit.
So I wish to cause the page to repaint in the browser, before the pause.
All the solutions I have tried refresh the page to its state on the server, and any changes I made to it in jQuery are lost.
Is there a way to force the page or button to be repainted, which will honor the changes I made to it in JavaScript/jQuery?
$("#YourButtonWhichTriggersChanges").click(function() {
// page repaint code, image change, etc.
setTimeout(function(){
window.location.reload();
// use window.location.href = "my/new/url.html";
// or window.location.replace("my/new/url.html");
// to change the page instead of just reloading.
}, 1000);
});
Where 1000 is the number of milliseconds you want to wait before refreshing the page.
Edit: I think you want this code instead:
$("#ApproveButton").css('backgroundImage', 'url(\'img/but/proof/ApprovePageButton.png\')');
The extra backslashes are in there to escape out the single quotes in the url parameter.
Another edit: Here's a combination of the two solutions I supplied which should work:
$("#ApproveButton").click(function() {
// actually repaint the button's background image
$(this).css('backgroundImage', 'url(\'img/but/proof/ApprovePageButton.png\')');
// change the page after 1000 milliseconds have gone by.
setTimeout(function(){
window.location.reload();
/* use window.location.href = "my/new/url.html";
* or window.location.replace("my/new/url.html");
* to change the page instead of just reloading.
*/
}, 1000);
});
I have a page where I show a throbber when I navigate away from the page. Like <a onclick="throbber.show()"> on every link. When I now navigate back in Firefox, the throbber is still shown.
Is there any javascript event that is fired to the arriving webpage when I click back? Or one that is fired just when the webpage is changed to the new one? Or can I make my throbber more intelligent?
Thanks for any input!
put this in your html:
<form name="_browser"><input id="checker" value="1" type="hidden"></form>
and also this javascript:
function cacheCheck()
{
var checker = document.getElementById("checker");
if (checker.value == 2) return true;
checker.value = 2;
checker.defaultValue = 2;
return false;
}
function cacheReload()
{
if (cacheCheck()) location.reload(true);
}
and then call cacheReload when your page loads:
<body onload="cacheReload()">
Dldnh's answer inpired me to do some tests. I suspected that the body.onload() event would be called when going back and forth. So I created a simple testpage and found out that this is true in Firefox 10, IE7, IE 8, IE 9 and Chrome 17. Also jQuery(document).ready() will be called.
The very simple solution for hidind the throbber would therefore be either using
<body onload="hideThrobber()">
or using jQuery ready
jQuery(document).ready(function () {
hideThrobber();
};
to hide the throbber then. I implemented this and it seems to work fine on my page. Would be great if somebody with a similar problem could confirm this.
I also found this interesting Stackoverflow question. While it is a little outdated, the point that calling javascript on navigation back and forth slowing down the page is still true. But I would guess that todays JS-Engines are fast enough so this is not a real issue anymore.
If you can't turn off the throbber from the page you navigate to, there are a few things you can do. The trick is that the page will be left active, so you can start up some things before you leave, in the onclick. They aren't perfect though.
Start a timer. The timer will be running when you return to the page, so the timeout routine will be called, and you can switch the throbber off there.
Problem: if you set the timer interval too small, the timeout routine will be called before the user has actually left the page, and the throbber will stop. Or if you set the interval too large, it will take a while before the timeout routine kicks in after they have returned.
Add an event listener to the body that responds to the mousemove event, so that as soon as the user moves the mouse, the routine that turnes off the throbber will be called.
Problem: if the user clicks the browser's Back button, the mouse will be outside the window when the page is redisplayed, so the throbber will remain visible until the user moves the mouse into the window.
So, take your pick. Or do both. Just remember to clean up afterwards - stop the timer, remove the event listener.