So, I have the following js for infinite ajax scroll
jQuery.ias().on('rendered', function(items) {
SOME_FUCNTION();
alert("Some_function!");
});
SOME_FUCNTION()
{
jQuery('.button').click(function() {
alert('You just clicked the button');
});
}
Now, it shows 10 posts every infinite scroll load.
However, I realized that every time it loads a new set of items, it runs the function again on the whole page and the function "accumulates" (I get the alert every time a new set is loaded).
EDIT
For example, the first div container at the top of the page has a button, which shows an alert("You just clicked the button") when clicked.
Now, let say the infinite ajax scroll loaded 3 times (so, total 30 posts so far).
Then, when I click the same first button, now it shows the alert three times as if the function was accumulated three times.
How do I fix this? Any suggestions?
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 load content (from a php file that get lists from database) to a div. It has a 10 seconds loop. So on every 10 seconds, it checks the file and load content to div to show new lists if added. However, on every run, the div content flashes (appear and disappear). It seems so unprofessional.
setInterval(function(){
$("#messageshere").empty();
$("#messageshere").load("msgs.php");
}, 10000);
My question is, is there smarter way for doing the same thing, but without flashing ?
Use a callback to show your message and empty your div only when you have your response. like this:
$('#messageshere').load('msgs.php', function(data) {
$(this).empty() // also unnecessary
$(this).html(data);
});
I've run into an interesting issue and I'm not sure how to solve it. I maintain a hidden value on my homepage that tracks the events loaded on the page. The event position gets updated after the page loads. When navigating away from the page and then clicking the browsers back button the previous event number is seen. If I click a link and load the home page directly the event position gets reset (as expected)
My HTML:
<input type="hidden" id="event_num" value="0">
My javascript call to get/set the event_num value:
function getRecentEvents() {
var event_pos = $('#event_num').val();
//console.log("POS: " + event_pos);
$.getJSON("functions/get_events.php", { f: 'get_events', event_pos: event_pos, limit: limit}, function(data) {
if (data.events.length > 0) {
// set the new value
$('#event_num').val(data.events_pos);
}
});
I would expect the hidden field to be 0 every time the page is loaded regardless if the user clicked a link or hit the back button on the browser.
Any idea how I might fix this or is this a known issue?
The page is not loaded again if you click the "back" button, the cached page content is shown. That is, the page as the state of it was the last time you visited it. You could reset the event_num counter on $(document).ready or on a document unload event, then you will get the expected behaviour.
I am trying to get a div that refreshes every 2 seconds to stop scrolling back to the top after the 2 second refresh I have PHP code and javascript. The Javascript I am using is:
function at_Ticket_scrollBottom()
{
var objDiv = document.getElementById("cartTicket");
objDiv.scrollTop = objDiv.scrollHeight;
}
function at_Tabs_Update()
{
if(div_WPOSVar_IsVisible())
{
//calling setTimeout without clearing any existing timeout can add multiple calls.
//IE the normal 2 second sequence, then call at_Tabs_Update two more times, and
// now we have 3 timeouts set to call at_Tabs again, etc.
//This wouldn't be an issue except that we call at_Tabs_Update directly to cause
// immediate refresh from many places.
//So clear the handle everytime to get rid of the last one we set.
clearTimeout(at_Tabs_Timer);
at_Tabs_Timer=setTimeout("at_Tabs_Update()", 2*1000); //every 2 seconds
return;
}
}
So after the refresh if I scroll down to the bottom of the ticket it jumps back to the top after the next refresh so I can never get to the bottom and select an item and edit it before the refresh how do I stop the auto scroll back to the top.
from the scars infos I can gather here I think your best bet would be to save your current scroll position before you refresh and after the ajax call scroll to that saved position.
use jQuerys .scrollTop() function for both reading and setting the scroll.
some pseudo code for illustration:
at ajax refresh function
var curPos $(element).scrollTop();
... do ajax call ..
ajax callback: $(element).scrollTop(curPos);
Possibly this has been discussed a zillion times and I'm over thinking this, but...
How does one create a 'blocking' jQuery animation?
I have a page which has a 'special' slider animation that executes the first time a user visits the site. But there is a 'normal' slider animation that fires every time the user visits the same page. Since both animations fire with document.ready() they both occur at the same time. What I -want- is for the first animation to fire and then when the user clicks a button to close the window -then- the second animation fires.
//pseudocode
jQuery( init );
function init() {
if(firstVisit) {
Animation1(); //Special. Only shows 1st visit to site
Animation2();
} else {
Animation2();
}
}
}();
Here's the site: http://jchmusic.com
I guess I can re-write the code for -both- so that the second one explicitly starts only when the user clicks the 'close' button on the first animation, but to -me- it would look much cleaner if I could just make the code on the first animation 'blocking'... ie. the second animation doesn't start until the first animation returns. I messed about with SetTimeOut and various 'loops' and all it does is hang the browser... I'm sure this has been mulled over many times.
Any ideas?