Javascript: href and ajax problem

JavaScript
1

Im wanting to do an ajax page change that is search engine friendly.

Basically in theory, if a user clicks the link to another page, only the relevant content is changed. (ie. next page of product list) rather than the whole page.

However if search engines or people without javascript wil still be able to navigate the same old way.

So, I’ve got:


<a href="page2.html" onclick="MyAjaxFunction();">

In theory the MyAjaxFunction returns false to prevent the href. HOWEVER this doesn’t work. the broswer still follows the href as I presume the return false is being called too late (once the ajax page loads).

I tried putting the return false; at the end of the “onclick” in the href line, but still the same result.

How can this be remedied?

What is the best way about doing this?

2

This works for me:


<script type="text/javascript">
function handler()
{
  return false;
}
</script>
<a href="http://www.google.com" onclick="return false;">go 1</a>
<a href="http://www.google.com" onclick="return handler()">go 2</a>

Make sure you add the return keyword in the onclick; otherwise, the function is just being executed the returned boolean value isn’t being stored/sent anywhere.

3

I tried that too, but still doesn’t work with an ajax call in the function

4

Would you mind posting your ajax function?

5

I can’t as I dont have it in front of me…but it is just a very simpole one that sends data to a page and gets content back (html product list) to update the product container.

6

Make sure that it’s the invoked function through the onClick that is returning the boolean value and not the callback function for the Ajax request.

Wrong way:


function onclickAjaxFunc()
{
  Ajax.request('yoursite.com', {
    onSuccess : function(response)
    {
      // ... code to process response
      return false; // DON'T DO THIS
    }
  });
}

Right way:


function onclickAjaxFunc()
{
  Ajax.request('yoursite.com', {
    onSuccess : function(response)
    {
      // ... code to process response
    }
  });

  return false;
}
7

ill check that, but i think im doing it that right way

8

Ok…got the code sent to me


function getPage(link,page)
{
	
    				
	if (http.readyState == 4 || http.readyState == 0) 
	{   	
		http.open("POST", link, true);
		http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		var que = 'page=' + page;
		http.send(que);
		http.onreadystatechange=function() 
		{
			document.getElementById("ajaxContainer").innerHTML = "";
			document.getElementById("ajaxContainer").innerHTML = http.responseText;
		}
		http.send(null);							
	}	    
	
return false;
}
9

When you get a chance, post your Ajax function because I need visibility into that to see what the problem might be. Also–and knowing the hell of cross-browser issues–what browsers have you tested this in?

EDIT: I see you beat me with the code posting!

10

That helps a little. Now what is invoking getPage()? Is that the method in the onclick attribute such that the following is true:


<a href="foo.html" onclick="getPage(1,2)">click me</a>

Or, is getPage() invoked by another method? I’m just trying to get a picture of what your callstack is.

11

<a onclick=“return getPage(‘/handler.php’, ‘2’)” href=“page2.html”>Next</a>

testing on FF3

12

Keep in mind this breaks the ability for people to link to a specific page on your website.

13

true, im aware of that

14

I’m thinking this is a race condition problem, such that you’re replacing the DOM via a Ajax call yet still relying on the calling code to return false for an onclick on the very DOM you’ll be replacing. This setup is just asking for trouble.

I’m going to sandbox an alternative and post back in a few minutes with my results.

15

ok, thanks mate

16

Okay, get ride of that http.send(null); line. Try again.

Edit: That http.send(null) is causing an error, thus the “return false;” line is never reached. The Ajax call, however, is successfully being sent so the DOM is changing but then getPage() never returns false (because of the error) so the link then redirects you.

17

THANKS mate, that works a charm!