[thehat]

I have a series of links on a page that I'm going to use as an ajax language selector, with a non-javascript action of using a query string.

<li><a href="/home/index.php?l=fr" id="flag_fr" class="langLink" rel="fr"><img src="../images/flag_fr.gif" alt="FR" /><span></span></a>&nbsp;</li>
<li><a href="/home/index.php?l=de" id="flag_de" class="langLink" rel="de"><img src="../images/flag_de.gif" alt="DE" /><span></span></a>&nbsp;</li>

The idea is that when the document loads, jquery sets a new click handler to call a function rather than use the link's href. The function will then disable the language links while an ajax operation is performed to load the new language xml file.

function changeLang(targ) {
	//disable language links
	$("a.langLink").click(function() { return false; });
	alert($(targ).attr('rel'));
}


$(document).ready(function(){
	$("a.langLink").click(function() { changeLang(this); return false; });
});

Overriding the href works fine, and so when clicking the links the alert is displayed correctly, but the links retain the old functionality and continue to call changeLang() rather than just returning false. Anyone have any ideas?

[thehat]

I know what it's doing, just not how to fix it!

Rather than just setting the click event to return false, I added a call to changeLang that passes a null value.

function changeLang(targ) {
	//disable language links
	$("a.langLink").click(function() { changeLang(null); return false; });
	alert($(targ).attr('rel'));
}


$(document).ready(function(){
	$("a.langLink").click(function() { changeLang(this); return false; });
});

Now when I click a link there are two alerts fired, the first contains the language code (old behaviour) and the second contains undefined (the new behaviour). So my question is: how do I overwrite a click event rather than adding to it?

[ibichi]

i forget the exact function, but it has "bubble" in it.. if yo can't find the rest from googling, i'll look it up in my old code for you. onBubble?

edit --
event.cancelBubble:

if($globalAdmin[0] == "y" || $profile_admin == "1"){
	echo "<center><input type=\"checkbox\" id=\"SelectBox\"  
	name=\"SelectedProfiles[$id]\" value=\"$id\"/
	onclick=\"event.cancelBubble=true;\">"; 
}

This post has been edited by ibichi: 23 April 2009 - 07:12 AM

[thehat]

Thanks for the reply. I looked it up, and cancelBubble() seems to be a microsoft version of the DOM standard stopPropagation().

https://developer.mo...nt.cancelBubble

The thing is, both of these and the preventDefault() method don't seem to have any effect, in any combination. When I click on my link the href action is still performed, which should only happen if javascript is disabled.

function changeLang(targ) {
	//disable language links
	$("a.langLink").click(function() { event.stopPropagation(); });
	alert($(targ).attr('rel'));
}


$(document).ready(function(){
	//$("a.langLink").click(function() { changeLang(this); return false; });
	$("a.langLink").bind("click", function() {
		event.stopPropagation(); 
		changeLang($(this));
	});
});

[thehat]

I think I've solved it, although the my technique seems a little heavy-handed, so I'd welcome a neater way. It required me to unbind all associated events, then add one that only contains return false;.

function changeLang(targ) {
	//disable language links
	alert($(targ).attr('rel'));
	$("a.langLink").unbind();
	$("a.langLink").bind("click", function() {
		return false;
	});
	return false;
}


$(document).ready(function(){
	$("a.langLink").bind("click", function() {
		changeLang($(this));
		return false;
	});
});

[thehat]

Dammit, spoke too soon.

So everything seems to be working, but the whole point of this was to prevent undesirable behaviour if the user accidentally double clicks, and there still seems to be a fraction of a second before the unbind() takes hold when a second click can still trigger the href action.

Question now is, how do I block the href action completely when the page loads? I've tried unbinding everything in the $(document.ready), but that doesn't seem to effect it.

function changeLang(targ) {
	//disable language links
	$("a.langLink").unbind();
	$("a.langLink").bind("click", function() {
		return false;
	});
	//call language switcher
	$.ajax({
		type:"GET",
		url:"../scripts/ssi/changeLang.php",
		data:"lang="+$(targ).attr('rel'),
		async:false,
		success: function(msg) {
			if(msg != '0') {
				//new language set, reload the page
				window.location.reload();
			}
		}
	});
}


$(document).ready(function(){
	$("a.langLink").bind("click", function() {									   
		changeLang($(this));
		return false;
	});
});

[thehat]

Heh, it must be late in the day. It was the doubleclick event that was screwing me around. Working code in case anyone cares:

function changeLang(targ) {
	//disable language links
	$("a.langLink").unbind();
	$("a.langLink").bind("click", function() {
		return false;
	});
	//call language switcher
	$.ajax({
		type:"GET",
		url:"../scripts/ssi/changeLang.php",
		data:"lang="+$(targ).attr('rel'),
		async:false,
		success: function(msg) {
			if(msg != '0') {
				//new language set, reload the page
				window.location.reload();
			}
		}
	});
}


$(document).ready(function(){
	$("a.langLink").bind("click", function() {									   
		changeLang($(this));
		return false;
	});
	$("a.langLink").bind("dblclick", function() {
		return false;
	});
});