AJAX

Cannot dynamically set onClick

Please support our JavaScript / DHTML / AJAX advertiser: 50% Off 6 Months Web Hosting from 1&1. The World's #1 Host!

Thread Solved

•

Join Date: May 2009

Posts: 97

Reputation: itsjareds is an unknown quantity at this point

Solved Threads: 12

itsjareds

Offline

Junior Poster in Training

Cannot dynamically set onClick

May 23rd, 2009

I'm having a problem with adding onClick events to <a> tags. The attribute is never added at all, but no errors are shown in the JavaScript console. I'm using Firefox 3.0.10.

Here's my code:

 Help with Code Tags 
 HTML Syntax (Toggle Plain Text) 
<html>
<head>
<script type="text/javascript">
function setAJAXAttributes() {
	var domain = new RegExp("(" + window.location.host + ")|(^\\/.*)|(^[\\w\\d]*\\.[\\w\\d]{2,})", "i");
	var links = document.getElementsByTagName("a");
 
	for (var i=0; i<links.length; i++) {
		if (domain.test(links[i].href)) {
			links[i].onClick = "getPage('" + links[i].href + "');";
			alert("Added onClick: " + links[i].href);
		}
		else
			links[i].target = "_blank";
	}
}
</script>
</head>
<body>
 
<a href="http://www.daniweb.com">DaniWeb</a><br/>
<a href="http://www.example.com/ajax/test.html">Testing absolute path</a><br/>
<a href="/ajax/test.html">Testing page relative parent path</a><br/>
<a href="test.html">Testing name path</a><br/>
 
<script type="text/javascript">setAJAXAttributes();</script>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function setAJAXAttributes() {
	var domain = new RegExp("(" + window.location.host + ")|(^\\/.*)|(^[\\w\\d]*\\.[\\w\\d]{2,})", "i");
	var links = document.getElementsByTagName("a");

	for (var i=0; i<links.length; i++) {
		if (domain.test(links[i].href)) {
			links[i].onClick = "getPage('" + links[i].href + "');";
			alert("Added onClick: " + links[i].href);
		}
		else
			links[i].target = "_blank";
	}
}
</script>
</head>
<body>

<a href="http://www.daniweb.com">DaniWeb</a><br/>
<a href="http://www.example.com/ajax/test.html">Testing absolute path</a><br/>
<a href="/ajax/test.html">Testing page relative parent path</a><br/>
<a href="test.html">Testing name path</a><br/>

<script type="text/javascript">setAJAXAttributes();</script>
</body>
</html>

I made sure that the conditional statement was working correctly by adding an alert to the onClick portion, and the alerts worked fine. However, the onClick event is never added, not on Firefox or IE7.

It also works fine if I change each <a> tag's href to javascript: getPage(); , but I don't want to change what shows in the status bar.

Last edited by itsjareds; May 23rd, 2009 at 9:43 pm.

Mark your post as Solved if you've been helped!

I learn by helping others learn.
If you find one of my posts helpful, don't be afraid to give me a reputation bump :D

•

Join Date: Aug 2008

Posts: 961

Reputation: essential will become famous soon enough

Solved Threads: 134

essential

Offline

Posting Shark

Re: Cannot dynamically set onClick

May 23rd, 2009

Hi there,

the onClick event, must be all in lowercase onclick :

Help with Code Tags

(Toggle Plain Text)

links[i].onclick = "getPage('" + links[i].href + "');";

•

Join Date: May 2009

Posts: 97

Reputation: itsjareds is an unknown quantity at this point

Solved Threads: 12

itsjareds

Offline

Junior Poster in Training

Re: Cannot dynamically set onClick

May 23rd, 2009

Hmm, I tried that, but there's still the same problem. Any other thoughts?

Mark your post as Solved if you've been helped!

I learn by helping others learn.
If you find one of my posts helpful, don't be afraid to give me a reputation bump :D

•

Join Date: Aug 2008

Posts: 961

Reputation: essential will become famous soon enough

Solved Threads: 134

essential

Offline

Posting Shark

Re: Cannot dynamically set onClick

May 23rd, 2009

Assign it as function:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
links[i].onclick = function() { //Callback 
};
links[i].onclick = function() { //Callback 
};

•

Join Date: Aug 2008

Posts: 961

Reputation: essential will become famous soon enough

Solved Threads: 134

essential

Offline

Posting Shark

Re: Cannot dynamically set onClick

May 23rd, 2009

Like this:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
links[i].onclick = function() { getPage( this.href ); 
};
links[i].onclick = function() { getPage( this.href ); 
};

Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...

•

Join Date: May 2009

Posts: 97

Reputation: itsjareds is an unknown quantity at this point

Solved Threads: 12

itsjareds

Offline

Junior Poster in Training

Re: Cannot dynamically set onClick

May 23rd, 2009

Thanks! That worked perfectly. Tried that method earlier, but not in combination with all lowercase onclick .

Here is the line that is fixed:

 Help with Code Tags 
 JavaScript Syntax (Toggle Plain Text) 
links[i].onclick = function() { getPage(this.href); return false; };
links[i].onclick = function() { getPage(this.href); return false; };

+rep

Mark your post as Solved if you've been helped!

I learn by helping others learn.
If you find one of my posts helpful, don't be afraid to give me a reputation bump :D