We Keep Coding

Can we remove click event without calling it?

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.

Why window.load isn't working when the request comes from outside the page, but otherwise it does?

SCENARIO
The web app workflow is the following:
Someone clicks on a a href element into a page. http://example.org/
The link is followed and then another page within the site is reached. http://example.org/page-2/
The link URL also contains a hash var.
(This hash var is what I intended to use in order to achieve the next point)
There is a content grid that must show the wanted part, this object was built with an out of the box CMS, so I preferably don't want to modify it. This also, only works when the user clicks on the very button filter.
(This filter is based entirely on events and not on "GUI visible" locations, thus I'm not able to call for an specific filter from the very url, the previous object -there was a previous object, yes- worked really good with hashes from URL, but the new doesn't.)
The content grid filter elements don't have any ids, they just have a data custom attribute to be identified.
And that's it.
The workaround is intended to be like this:
$( window ).load(function() {
var filter = window.location.hash.substr(1);
if(filter == "keywordA") {
$('a[data-filter=".cat-1"]').trigger('click');
}
if(filter == "keywordB"){
$('a[data-filter=".cat-2"]').trigger('click');
}
if(filter == "keywordC"){
$('a[data-filter=".cat-3"]').trigger('click');
}
if(filter == "keywordD"){
$('a[data-filter=".cat-4"]').trigger('click');
}
if(filter == "keywordE"){
$('a[data-filter=".cat-5"]').trigger('click');
}
});
Then, dark and unknown forces comes into place, because when I enter this in the address bar: http://example.org/page-2/#keywordD the DOM works well, as expected. The content grid displays exactly what I want.
But when I try to reach the same link but from an a href element within http://example.org/ it just doesn't do anything at all.
FURTHER EXPLANATION
I used window.load because that way the function is forced to be executed once everything is settled in the DOM, and after every single code instance of $(document).ready() functions, because the website already works with many of these.

Here's the problem:
When navigating from the a link http://example.org/page-2/# to a different link that is the same page, but has a different hash var, like http://example.org/page-2/#keywordD, the site doesn't actually reload. This is default behaviour, because it's meant to jump to the element on the page with the id of the hash.
Luckily, there is an event for hash changes on the site.
'onhashchange'
Now depending on how your filtering works, you might want to call a function that does all the filtering (the one that does it on loading the page), or, if this is a server-side CMS thing, you might want to reload the page.
$(window).bind('hashchange', function(e) {
// Enter your filter function here
doFiltering();
});
or if reloading the page is more appropritate.
$(window).bind('hashchange', function(e) {
document.location.reload();
});
I don't quite understand what you mean by "This filter is based entirely on events and not on 'GUI visible' locations", so you might want to elaborate a little more in a comment, if I misunderstood you, but I hope either one of these soloutions work for you.

THE ANSWER
Somehow I was triggering the event before the handler was attached, despite the window.load event is supposedly intended to trigger functions when all the DOM is entirely loaded.
https://stackoverflow.com/a/2060275/1126953
Kudos to Noah.
Based on the previous answer I could manage to set the desired behavior as it follows:
$( window ).load(function() {
setTimeout(function() {
var filter = window.location.hash.substr(1);
if(filter == "keywordA") {
$('a[data-filter=".cat-1"]').trigger('click');
}
if(filter == "keywordB"){
$('a[data-filter=".cat-2"]').trigger('click');
}
if(filter == "keywordC"){
$('a[data-filter=".cat-3"]').trigger('click');
}
if(filter == "keywordD"){
$('a[data-filter=".cat-4"]').trigger('click');
}
if(filter == "keywordE"){
$('a[data-filter=".cat-5"]').trigger('click');
}
},10);
});
Just a simple delay.
Many thanks for your time Stefan.

Unexpected performace.navigation.type onbeforeunload

I'm trying to handle some logic on before unload and I don't want that logic to run if the user is reloading the page or going back.
I've set up something like this.
window.onbeforeunload = function(e) {
if(window.event && window.event.clientX){ //IE
//some logic
} else if (e.currentTarget.performance.navigation.type === e.currentTarget.performance.navigation.TYPE_RELOAD) {
// another logic
} else if(e.currentTarget.performance.navigation.type === e.currentTarget.performance.navigation.TYPE_BACK_FORWARD){
// yet another logic
}
}
I have other code to handle refresh and such from keyboard input that all seems to be working ok. Right now I'm concerned with this piece of code. For some reason on the first reload or back button the navigation.type comes back as 0, but after that all other reloads or back buttons populate the correct value in navigation.type. Even in IE on the first reload something is not being set correctly (not sure if its the mouse location or what yet). What could be causing something like this?

First of all, I think what you wanted to write was e.currentTarget.performance.navigation.type (not e.current.performance.navigation.type), which is the same as writing window.performance.navigation.type. This variable tells you how this page was navigated to, not the type of navigation that the page is exiting through.
Why you get performance.navigation.type as 0 (performance.navigation.TYPE_NAVIGATE) the first time is that the page was loaded by direct navigation that first time. Subsequent reloads will set performance.navigation.type to 1 (performance.navigation.TYPE_RELOAD) because the page is now loaded by reloading. So, you are getting the method that was used to load the page, not the method that the user is using to exit the page.

How to listen for all page loads and refreshes using Javascript

I am attempting to check for a cookie's existence whenever any kind of HTTP-related event occurs -- like the user refreshes a page or goes from one page to the next. If the cookie is found, a timer is activated starting from the cookie's value.
I tried on("page:load"), but it's not behaving like I thought it would. Is page:load indeed the proper listener, or is there a more general way of encompassing all events after which global variables would be reset? Relevant code:
$(document).on("page:load",function(){
if(isCookie('start_time') || $start_time) {
timerRunningDisplay();
activateTimer();
}
});

I would just use $(document).ready(function(){}); instead. That will definitely fire when a page is loaded or refreshed. Then it's just a matter of making sure you're setting a referring to the cookie correctly, and you're golden.
So:
$(document).ready(function(){
if(isCookie('start_time') || $start_time) {
timerRunningDisplay();
activateTimer();
}
});

javascript history.back losses the search result

Page A:
$(document).ready(function () {
bindData();
});
function bindData() {
$('#searchbtn').bind('click', function () { SearchResult(); });
}
function SearchResult() {
ajax call...
}
Page A HTML:
<input type="button" id="searchbtn" />
Page B Details---> this page comes after selecting a specific search result from page A search list
Back<br />
Now when I go back to the Page A I can see my search criteria's as they were selected but the result Div is gone. What I am trying to do is I want the search list to stay when the Page comes back.
I think what I can do here is some how call the searchbtn click event again when the page comes back so the list will come-up again. Can anyone tell me how to fire the searchbtn click event only when the page comes back from Page B. or point me in the right way of doing this..
Thanks

The Browser Back button has long been problematic with AJAX. There are scripts, workarounds, and techniques out there (depending on the framework that you want to use).
Since it appears that you are using jQuery (based on your posted JavaScript syntax), here is a link to another Stackoverflow post regarding back button jQuery plugins.

history.back() will return you to the last URL visited, meaning that any ajax calls made during the user's visit will not be automatically repeated. Your browser may automatically restore your form selections, but the SearchResults() function is only called by a click event, not a selection event.
You can bind URLs to ajax states using a framework like sammy.js. That way, history.back() would take you to a URL associated with SearchResults().

function bindData() {
var chkinput1 = $("input:checkbox[name=x]:checked").length;
var chkinput2 = $("input:checkbox[name=y]:checked").length;
if (chkinput1 > 0 && chkinput2 > 0) {
SearchResult();
}
$('#searchbtn').bind('click', function () { SearchResult(); });
}
I know this is the worst way to achieve this result but I think instead of using any other plugins to add complexity we will go with this for now. If anyone else is looking for the same question let me tell you again this is not the best practice as on returning back to the history we are calling the search result again depending upon the cached input selection of checkboxes and generating the whole ajax call again to display the list. On the first request I am caching the list and setting sliding expiration so its not taking anytime to comeback and so everyone lives happily.