IE 7 redirecting after jQuery ajax calls

Question

I have the following code in my file to load a div with HTML from an AJAX call:

$('#searchButton').click( function() {
    $('#inquiry').load('/search.php?pid=' + $('#searchValue').val());
});

This works fine in Firefox and Google Chrome, but whenever I do the search in IE I get redirected back to index.php. I grabbed the URL from Firebug and pasted that into IE and no redirection happens, I just get the output that should be returned.

I also tried changing it to a $.get() request and a full $.ajax() request but still the same redirection.

Answer 1

IE Handles default events differently (also beware of hitting enter in a text field). IE is causing some default event handler to fire. If searchButton is a link with HREF of "" it will reload the current page. You can try to set the href to "javascript:void(0)" or do something like:

$('#searchButton').click( function(e) {
    $('#inquiry').load('/search.php?pid=' + $('#searchValue').val());
    e.preventDefault();
});

Answer 2

More fun. I have the input text and button wrapped in this form:

<form onSubmit="return false;">
[HTML]
</form>

and IE seems to be ignoring the return false. I tried modding the jQuery function to be like Steve's but it was still refreshing inproperly.

I removed the form tags and that took care of it.

Answer 3

set the action attribute of the form to a javascript function (e.g. your search handling function) or "return false"

MSIE is firing the form action when you hit enter

Answer 4

Your function should return false to prevent the submit action of the button. I don't know how jQuery handles that, though.