Ajax not working with Href (solution)

Question

I was having many problems trying to find the reason of why my ajax function was not working on Safari, Chrome and sometimes Firefox, but worked very well on IE. I made a little change, and everything start working perfect (in every browser), but I still dont know why, and I want to find out the main reason of this.

I had an Ajax function respuestas() which insert some data on a database. This function is called by some links like this: <a onclick="respuestas()" href="link.html">LINk </a>. So when I click on the link, the function takes the proper information and inserts it on the database and then go to link.html. Again, this only worked for IE.

I insert an alert(xml.responseText) to see the response that i was having. Safari, fireforx and chrome returns an empty alert.

I was tired of changing pages everytime I wanted to test my function, so I add a button calling my function (without going to another webpage) and IT WORKED!. Now, I have something like this: <a onclick="respuestas()" href="#">LINK </a> and put window.location.href="link.html" inside my ajax function, so the change of pages occur after the ajax response is completed, and it is working very well.

But I do not entirely understand why this works and the other way does not.

Answer 1

This because the link element has also it's default listener. So, to prevent any extra action on click, you should prevent default action. The simple way to do this is to return false on click.

<a onclick="respuestas(this); return false;" href="link.html">LINk</a>

And your respuestas in easiest way should be like this:

function respuestas(link) {

   /* do what you need here */

   window.location.href = link.href;
}

This is pretty primitive, but I believe you'll get the idea.