Javascript: event duplication - javascript

I can not figure out what is wrong with my code.
I have a couple of global variables which I change every time some certain button is pressed,there is also a couple of custom functions that perform ajax calls that returns a chunk of html code with a pagination below, that works like this:
$('#foot #pagination a.page').live('click', function(){
window.mode = 'partial';
window.key = $('input#search').val();
window.page = $(this).parent().find('input').val();
setTimeout('getData();', 0);
});
sometimes when moving to another page event doubles and I got the doubled html.
when caling getData(); from a browser console - everything works fine, like it has to work.
What can cause this?

You should execute this function only once after document.ready.
Or do something like this:
$('#foot').off('click', '#pagination a.page', navigation) // remove event
.on('click', '#pagination a.page', navigation); // add event
function navigation(e) {
window.mode = 'partial';
window.key = $('input#search').val();
window.page = $(e.currentTarget).parent().find('input').val();
setTimeout('getData();', 0);
});

The problem was that jQuery .live() pushes some data to jQuery stack on document ready, but after ajax response comes from the server and document ready event is called again - in this case .live() pushes the same data again to a jQuery stack, which then causes multiple event body calls.
I used .die() before .live() and everything now works fine.

Related

Calling click functions inside a main function

I just wanted to know about any downsides to calling click functions inside a main function rather than in the $(document).ready(function() {});. This is what i mean
function tester() {
$('.className-1').click(function() {
var cmtpid = $(this).attr('data-cmtpid');
alert(cmtpid);
});
$('.className-2').click(function() {
var pid = $(this).attr('data-pid');
alert(pid);
});
}
tester();
UPDATE : the tester() function will only be called once, this is all mainly because I want to avoid inline html onclick=""
Since I noticed you're using jQuery. Perhaps consider adding unbind("click") after the selector to ensure you don't accidentally bind the click more than once causing multiple executions upon click.
Also there isn't any REAL downside but I would HIGHLY recommended putting that java-script at the very end of your html document to ensure the DOM is loaded.
Example:
$('.className-1').unbind("click").click(function(){
});

jQuery - ignore double AJAX calls?

I have AJAX calls attached in multiple places (unfortunately not only buttons, but also links, forms and other stuff), I know how to handle this manually (find every place I do an AJAX call and then block / overlay the button during first call), I'm wondering if there's a way to do it more automagically?
If we're talking jQuery - maybe a plugin? Something that will just work? :)
It'd be perfect to have something like:
if clicked element has .ajax class
block all ajax requests if the current one is still live
I'd then add .ajax class to every button/link/whatever triggering the request and voila. Does anything like this exist?
You can to create a global variable:
loadingAjax = false;
whenever an event triggers, you turn this variable to TRUE by using:
$("selector").click(function(){
if(!loadingAjax){
loadingAjax = true;
$.ajax(options)..
}
});
And you should turn loadingAjax back into false when the ajax stops:
$( document ).ajaxStop(function() {
loadingAjax = false
});

jQuery function calling twice, once from our own js and next from jquery.min.js

Hi, I am using jQuery in my application and for swiping event I used jquery mobile, due to usage of both in one application I had an issue that is the swiping event gets fired twice, one time from my own js file and second time the code copied into jquery.min.js, and executing from there.
$(document).ready(function(){
var wrap = $('.slides_wrap');
var slides = wrap.find('.img_slide');
slides.on('swipeleft', function(e) {
console.log('called swipeleft');
$('a.carousel-control .rightArrow').click();
});
slides.on('swiperight', function(e) {
console.log('called swiperight');
$('a.carousel-control .leftArrow').click();
});
});
Try:
slides.parent().off("swiperight").on(...).click();
or:
slides.parent().off("click").on(...).click();
I think you have bind multiple events in closest elements. If this not work, try with .children() too.

Check if the jQuery page load events fired already

Is there a way to check if jQuery fired the page load events yet, or do you have to roll your own? I need to alter the behavior of links, but I don't want to wait until the page finishes loading because the user could conceivably click on a link on, say, the top half of the page before the page finishes loading. Right now I'm doing it like this:
var pageLoaded = false;
$(function() {
pageLoaded = true;
});
function changeLinks() {
$("a[data-set-already!='true']").each(function() {
$(this).attr("data-set-already", "true").click(...);
});
// Is there something along the lines of jQuery.pageWasLoaded that I can
// use instead?
if (!pageLoaded) {
window.setTimeout(changeLinks, 100);
}
}
changeLinks(); // Added per #jondavidjohn's question
Since you are using the document ready shorthand, I'm guessing you mean when the dom is loaded. For this:
$.isReady
You could use setInterval and clear the interval on domready:
var changeLinksInterval = setInterval(function () {
$("a[data-set-already!='true']").each(function() {
$(this).attr("data-set-already", "true").click(...);
});
}, 100);
$(function () {
clearInterval(changeLinksInterval);
});
By the way, in your code example, you shouldn't need .each() - you should be able to call .attr() and .click() directly and let jQuery do the looping. Unless there is more to your .each() code that you didn't post.
$("a[data-set-already!='true']").attr("data-set-already", "true").click(...);
you could use .live() to initiate a click event that needs additional work when binding.
$("a[data-set-already!='true']").live(function(){
// since this event will only fire once per anchor tag, you
// can safely bind click events within it without worrying
// about getting duplicate bound click events.
var $this = $(this);
$this
.data("dataSetAlready",true)
.click(myClickHandler);
});
this is also a useful technique for late-initializing plugins on elements that may not exist at domReady.

Jquery calling function on hashchange

I have 2 questions
I am using the hashchange plugin .... so I want to know would a function as below, be called everytime a hashchange occurs... because I have something like that in my code and the code function apparently doesnt seems to be called
$(document).ready(function()
{
// function here
});
On the other have if I remove the hashchange as in If i make http://abc.com/a.htm#http://abc.com/b.htm as http://abc.com/b.htm
the code works fine
the problem is the structure of my pages is a bit different .... here is the fiddle with the page structure that explains on a higher level what I am trying to achieve jsfiddle.net/vBKWd/9 ... on hash change jus the div c on my page 1 gets replaced by page 2 and vice versa .... and the js function that I have shown below is getting called only once and not after hashchange
Or is therre any way I can bind the function with the div so that whenever the div is replace the function get called?
No, a ready handler is only called on document ready, not on hash change. You should use the hashchange event for that, instead:
$(window).hashchange(function () {
// function here
});
Sample: http://jsfiddle.net/vBKWd/2/
In document ready wirte code below
$(window).bind('hashchange', function () {
//code here
});
use live in this case
$(document).ready(function()
{
$(selector).live(hashchange, function(){
// your code goes here
});
});

Categories

Resources