Preventing double click 2

[mais123]

Hi,
I have a page with links that upon a click execute remote scripting call (kind of liek ajax) and return a URL to the JS which then redirects the browser to that url.
Now the problem arrises when users do double clicks or click the link before the first click finishes processing.
What is considered to be the best way to prevent user clicking the link before the last click finishes processing

I woudl think session variables are risky

Thanks

 

[ca8msm]

Why not disable the link with javascript on the first click and then re-enable it once it has returned the data?


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[tcstom]

As part of the window.onload function...

var processing = false;
document.getElementById('id_of_my_link').onclick = function() {
	if (processing) return false;
	else {
		processing = true;
		// Do the work and set processing back to false at the end
	}
}

 

[N3XuS]

here is what I use:
I don't have time to explain atm. the function incorporates my entire menu button behaviour. Including double click prevention, but it also disables all buttons in the designated div while posting back.

The C# function:
public static void PreventDoubleAndMenuCLick(Control btn,Control divButtons)
{
if(btn.GetType().Name == "ImageButton")
{
if (((ImageButton)btn).Attributes["onclick"] == null ||((ImageButton)btn).Attributes["onclick"] == string.Empty)
{
((ImageButton)btn).Attributes.Add("onclick", "return menuButtonBehaviour(this,'" + divButtons.ClientID + "');");
}
else if (((ImageButton)btn).Attributes["onclick"].IndexOf("menuButtonBehaviour") < 0)
{
((ImageButton)btn).Attributes["onclick"] = ((ImageButton)btn).Attributes["onClick"] + "return menuButtonBehaviour(this,'" + divButtons.ClientID + "');";
}

}
else
{
if (((Button)btn).Attributes["onclick"] == null ||((Button)btn).Attributes["onclick"] == string.Empty)
{
((Button)btn).Attributes.Add("onclick", "return menuButtonBehaviour(this,'" + divButtons.ClientID + "');");
}
else if (((Button)btn).Attributes["onclick"].IndexOf("menuButtonBehaviour") < 0)
{
((Button)btn).Attributes["onclick"] = ((Button)btn).Attributes["onClick"] + "return menuButtonBehaviour(this,'" + divButtons.ClientID + "');";
}

}

}
The javascript function:

function  menuButtonBehaviour(btn,menuDivID)
{	
	var menuDIV = document.getElementById(menuDivID);
	if (menuDIV != null)
	{
		setButtonsInRef(menuDIV,btn,true);
	}
	btn.style.color = "#aaaaaa";
	countClicks++;
	var onclickEvt = btn.attributes['onclick'].value;
	var arrOnclickEv;
	var onclickExecute = "";
	arrOnclickEv = onclickEvt.split(";");
	
	var blnEncountered = false;
	
	for (i=0;i<arrOnclickEv.length;i++)
	{
		if (arrOnclickEv[i].indexOf("return menuButtonBehaviour(this") >= 0)
		{
			blnEncountered = true;
		}
		
		if (blnEncountered == true && arrOnclickEv[i].indexOf("return menuButtonBehaviour(this") < 0)
		{
			if (arrOnclickEv[i].indexOf("return") >= 0)
			{
				if(eval(arrOnclickEv[i].replace("return ","")) == false)
				{
					countClicks--;
					btn.style.color = "";
					btn.disabled = false;
					
					//Enable the other buttons again, no postback
					if (menuDIV != null)
					setButtonsInRef(menuDIV,btn,false);
					
					return false;
				} 
			}
			else if (trim(arrOnclickEv[i]) != '')
			{
				onclickExecute = onclickExecute + ";" + arrOnclickEv[i];
			}
		}
		
	}
	
	var blnValidate;
	
	if (trim(onclickExecute) != '')
	{
		onclickExecute = onclickExecute + ";";
		 blnValidate = eval(onclickExecute);
	}
	else
	{
		blnValidate = true;
	}
	

	
	if (onclickEvt != "")
	{
		if(blnValidate && countClicks>1){
			btn.disabled = true;
			return false;
			
			//Enable the other buttons again, no postback
			if (menuDIV != null)
			setButtonsInRef(menuDIV,btn,false);
		}
		else if (!blnValidate)
		{
			//Enable the other buttons again, no postback
			if (menuDIV != null)
			setButtonsInRef(menuDIV,btn,false);
			
			countClicks--;
			btn.style.color = "";
			btn.disabled = false;
		}
	}
	else
	{
		if(countClicks>1){
			
			if (menuDIV != null)
			setButtonsInRef(menuDIV,btn,false);
			
			btn.disabled = true;
			return false;
		}
	
	}
		

}

//All childnodes in the ref node will be looped, all input types will be disabled/enabled except for 'thisBtn'
function setButtonsInRef(ref,thisBtn,disableButtons)
{
	if (ref != null && ref.childNodes != null) 
	{
		for (var i = 0;i < ref.childNodes.length; i++) 
		{
			var child = ref.childNodes[i];
		
			if ((child.nodeType == 1) && (child.id != thisBtn.id) && (child.tagName == "INPUT") && (child.id.indexOf("txtTarget") < 0)) 
			{
				child.disabled = disableButtons;
			}
			else
			{
				setButtonsInRef(child,thisBtn,disableButtons);
			}
		}
	}	
}