I'm working on a project using the jquery-scroll-pagination plugin to dynamic load additional content when scrolling: https://github.com/andferminiano/jquery-scroll-pagination
The idea is to facilitate the user with different views. This is currently being done by using the jquery load event in a way that when an user clicks a button the content will be loaded.
The problem I'm facing is that the "scrollPagination" functions remains in memory and being active on #content. If an user clicks away the view and switches back, the scrollPagination for #content is loaded a second time. All calls are executed twice then.
Is there a way to prevent the scrollPagination function being active multiple times?
function loadscrollPagination() {
setTimeout(function() {
$('#content').scrollPagination({
nop: 10, // The number of posts per scroll to be loaded
offset: 0, // Initial offset, begins at 0 in this case
error: 'No More Posts!', // When the user reaches the end this is the message that is
delay: 500, // When you scroll down the posts will load after a delayed amount of time.
scroll: true // The main bit, if set to false posts will not load as the user scrolls.
});
}, 100);
}
$("div.detail").click(function() {
$('section').load('detailed-view.php', function() {
loadscrollPagination();
});
});
Perhaps jQuery.one() will do the trick:
#('section').one('load', 'detailed-view.php', function() {...})
See here for more info: http://api.jquery.com/one/
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 2 pages, Home page and Edit page.
I used a function which will auto log out the user after a certain amount of time of inactivity.
The function is only used in Home page and not Edit page.
Below is the function code.
// Set timeout variables.
var timoutWarning = 10000;
var timoutNow = 30000;
var warningTimer;
var timeoutTimer;
// Start timers.
function StartTimers() {
console.log("Start TImer");
warningTimer = setTimeout("IdleWarning()", timoutWarning);
timeoutTimer = setTimeout("SignOut()", timoutNow);
$( "#timeout" ).dialog({
autoOpen: false
});
}
// Reset timers.
function ResetTimers() {
clearTimeout(warningTimer);
clearTimeout(timeoutTimer);
StartTimers();
$( "#timeout" ).dialog("close")
console.log("Reset TImer");
}
// Show idle timeout warning dialog.
function IdleWarning() {
$("#timeout").dialog({
autoOpen: true,
modal: true
});
}
I called out the function in the Home page by using
<body onload="StartTimers();" onmousemove="ResetTimers();">
<div id="timeout">
<h1>
Session About To Timeout</h1>
<p>
You will be automatically logged out in a while<br />
To remain logged in move your mouse
</div>
The timer works perfectly fine in the Home page, but after I switch to Edit page ( without the function basically an empty page), I will still get auto log out with or without moving the mouse.
Does that means that the function is still running even after I switch page? If so, is there anything I can do to stop the timer after I switched the page?
p.s I did tried adding in the function and call it in the Edit page, however, even after I kept on moving my mouse I will still get logged out which is why I assume that the function is still running after I switch page.
SOLVED : its working fine right now after I restart my browser. I believe I might have screwed up somewhere. I apologize to people who invested their time into this question. The answer to my question based on the comments/answers below is NO. setTimeout DOES NOT continues after changing page.
If the browser has fully loaded the second page, and that code isn't on it, that code won't run. That's assuming you're loading the second page 'traditionally' and not pulling it in via AJAX.
I would do the following things:
Put an alert("Code running") in the setTimeout function. That's a very simple way of telling you if the code is running or not.
Check the source code for your edit page. Make sure you haven't duplicated the code to that page too.
No, timeouts get deleted when you close/refresh the page (just like anything in JavaScript). So your bug must be something else.
I'm facing a quite odd problem based on User Experience.
My project is a one page full JavaScript application. I decided to show a "Loading page" modal, but in local, this appears as a flash because the application is quickly loaded.
What would be best, is that if the application takes more than 2 seconds to load, it would display it (ideally, at the beginning of the loading, maybe by calculating how much to load and the speed of transfer?), and if shown, stays at least for 2/3 seconds (for avoiding the flash of show/hide quickly).
The problem I'd like to avoid, is show a "Loading" modal for my user that stays 2/3 seconds before it's best for their eyes, even if the app is ready 1/2 seconds after the 2/3 seconds delay.
Is there a proven way to do this ?
Note: I saw this post, which is a good start, but doesn't fix my problem exactly (show/hide flash can be produced).
I don't think you do yourself a favor by trying to calculate the estimated loading duration. So my advice would be to just show that modal everytime the page is loading and hide it as soon as the loading process is finished. With that way, there is no need for timeouts or something like this.
But if you must ensure that the modal is shown for at least 3 seconds, you can do something like this (but I personally am not a big fan of letting the user wait longer than he would have to):
//entry point (first script to run, ideally put in the <head> tag)
var initFinished = false,
canHideModal = false;
setTimeout(function(){
if (initFinished === true) {
//hide modal
}
canHideModal = true;
}, 3000);
//initialization stuff / page load / dom
document.addEventListener("DOMContentLoaded", init, false);
function init() {
//...more init stuff
//at this point everything is loaded
if (canHideModal === true) {
//hideModel
}
initFinished = true;
}
you can use set time out function
setTimeout(function() {
// your image to be displayed after particular seconds
}, 2000);
So here is what's going on. I have an html doc called "home.html". It contains many divs, each of these divs is a single post. I also have an index.html and in the it there is a div #content. The content is empty in the index.html but it gets filled with the divs in home.html through .load() call. Also, using div:nth-child(-n + 10) in the .load call I can have it only load the first ten posts. How can I use waypoint.js to add infinite scrolling to this? So that once the scroll bar reaches 75% of the way to the bottom, it loads the next 10 divs from home.html.
After you load the 10 elements on the page, wire up a jquery waypoint that will trigger an action.
The first step of the action will be to disable to waypoint (so it only fires once). Then have it load additional data via ajax and render that on the page. After (via callback) that is done, you'll reactivate the waypoint so that the process will start anew when the user scrolls down to it.
Your application will have to keep track of how many and what elements are loaded, so your ajax requests request the correct numbers (i.e. 10 are loaded, so the next request should start at 10 and fetch 10, next should start at 20 and fetch 10, etc).
The "75% of the way to the bottom" is easily configurable in waypoint. You'll use the "offset" for that.
Check out the waypoint documentation
I put the DOM element that triggers my infinite scrolling underneath of the main grid that I have, so as I load more content, it automatically pushes it down.
I used jquery masonry+waypoint js..But if you dont register waypoint in masonry callback, it will load the items that comes with your ajax call more than once..Here is my solution;
//INFINITE SCROLL
var $loading = $("#itemsloading"),
$footer = $('footer'),
opts = {
offset: '120%',
onlyOnScroll:false
};
$footer.waypoint(function(event, direction) {
$footer.waypoint('remove');
$loading.toggle(true);
$.get($('.more').attr('href'), function(data) {
var $data = $(data.result[0]);
if($(data.result[0]).length==0){
$loading.toggle(false);
return false;
}
$('#items').append( $data ).masonry( 'appended', $data, true,
function(){
$footer.waypoint(opts);
});
$loading.toggle(false);
});
}, opts);
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);
});