Weird Issue in href / onclick functionality.

[radar]

i have windows 7 on my computer, and this code used to work.  I don't think I have updated or changed anything but it doesnt seem to be working.

 

 

I am building a custom CMS system just because I can.  I am utilizing PHP, Smarty, Ajax, MySQL

 

In my HTML I have the following for navigation:

 

 <div id="dolphincontainer">
			  <div id="dolphinnav">
				  <ul>
					  <li><a href="index.php" rel="content"><span>Content</span></a></li>							
					  <li><a href="index.php" rel="modules"><span>Modules</span></a></li>
					  <li><a href="index.php"  onClick="changeNavigation('index.php', 'users');" rel="users"><span>Users</span></a></li>
					  <li><a href="index.php" onclick="changeNavigation('index.php', 'admin');" rel="admin"><span>Admin</span></a></li>
				  </ul>
			  </div>
				<div id="dolphin_inner">

					<div id="content" class="innercontent">

						<ul>
							<li><a href="index.php"  onClick="changeNavigation('index.php', 'pages');"><span>Pages</span></a></li>
							<li><a href="?pg=menus"><span>Menu</span></a></li>
						  <li><a href="index.php"  onClick="changeNavigation('index.php', 'footer');"><span>Footer Info</span></a></li>
					  </ul>
					</div>	

 

It goes on further from here, but I copied just a portion of the navigation codes for the administration panel.

I use a script that changes the list items into tabs and sub-tabs.  This script was written by Dynamic Drive.

 

I have created a custom javascript that utilizes the prototype.js which is the following:

 

var req1;
var doesNotSupport = true;

function AjaxObjectCreateGeneral()
{
if (window.XMLHttpRequest) {
        req1 = new XMLHttpRequest;
    } else if (window.ActiveXObject) {
        req1 = new ActiveXObject("Microsoft.XMLHTTP");
    }
return req1;
}

function changeNavigation(url, query) {
req1=AjaxObjectCreateGeneral(); 
	if(req1) { 
		var myRand = parseInt(Math.random()*99999999);
		var query = query;
		var url = url;
		var srcs = url+"?pg="+query+"&rand="+myRand;
		$('TransMsgDisplay').innerHTML='<img src="../templates/admin/img/indicator.gif" align="center">';
		req1.onreadystatechange = processNavigation;
		req1.open("GET",srcs,true);
		req1.send(null);
	} 
}

function processNavigation()
{
if(req1.readyState == 4) 
{
	if(req1.status == 200) 
	{ 
		var responseTextTrim = trim(req1.responseText); 
		$('TransMsgDisplay').innerHTML=responseTextTrim;
	}
}

}

 

When I click on a link say 'pages', now it gives me a javascript error.  So if I remove var responseTextTrim = trim(req1.responseText); I refresh and it goes away.

 

So I click on pages again, my ajax begins to work, it briefly flashes the page I want, then redirects to the index.php page.

 

Only thing I can think of(since i dont actually have any redirects in the code), is IE8 is reading the href part of the code, AFTER it completes the onClick part of the code.

 

Is there any way to fix this, without having to use # as the href tag?

[DavidAM]

If the function called in the onClick event returns false, then the href should not be followed.

[radar]

Okay so this is the current code:

 

<div id="content" class="innercontent">

						<ul>
							<li><a href="index.php" onClick="changeNavigation('index.php', 'pages');"><span>Pages</span></a></li>
							<li><a href="?pg=menus"><span>Menu</span></a></li>
						  <li><a href="index.php"  onClick="changeNavigation('index.php', 'footer');"><span>Footer Info</span></a></li>
					  </ul>
					</div>	

function changeNavigation(url, query) {
req=AjaxObjectCreateGeneral(); 
	if(req) { 
		var myRand = parseInt(Math.random()*99999999);
		var query = query;
		var url = url;
		var srcs = url+"?pg="+query+"&rand="+myRand;
		$('TransMsgDisplay').innerHTML='<img src="../templates/admin/img/indicator.gif" align="center">';
		req.onreadystatechange = processNavigation;
		req.open("GET",srcs,false);
		req.send(null);
	} 
}

function processNavigation()
{
if(req.readyState == 4) 
{
	if(req.status == 200) 
	{  
		$('TransMsgDisplay').innerHTML=req.responseText;
	}
}

}

 

so i changed it to false, and the href is still followed.

 

 

[radar]

alright, so i started doing some research and noticed that if behind every onclick function i put in return false, instead of just changing true to false in my req.open the href is not followed and allows the javascript to run. 

 

Would be nice though is MS would figure out that onclick means hey do something! not 'hey do something then go to this page' but oh well.

 

Next I have to figure out how to use scriptaculous dragdrop.js on the fly so i can get rid of the ?pg=menus link and have that done purely in ajax too.  but who knows if i'll ever figure out how to get it to work eh.

 

Anyway thanks for pointing me in the right direction on that return false, it was your idea that gave me the base for my search parameters to find a solution.