I have a page like this:
<form class="ajax" method="post" action="add_item.php">
[text input] [submit button]
</form>
[list any items the user has in a div here called #items]
When the user clicks the submit button, a function like this is called:
$("form.ajax").live('submit', function(event) {
params = $(this).serialize();
$.post($(this).attr("action"), params, function(data){
json = $.parseJSON(data);
// do stuff based on the json results
if(json.success.action == 'replace'){
$(json.success.container).html(json.success.message);
}
else{
$(json.success.container).prepend(json.success.message);
$(json.success.container).find(".item:first").slideDown();
}
});
event.returnValue = false;
return false;
});
This is supposed to load add_item.php into the #items div, and it works fine in FF, Chrome, Safari, just not IE. In IE (tested 7 and 8) when I click Submit it redirects the page to add_item.php rather than loading it into the #items div.
I tried adding event.preventDefault(); to the end of the function but that didn't work.
Any ideas?
