I've got something that works perfectly in FF and MSIE but it's not working properly in Safari. It's a form with selects that get updated via AJAX/jQuery from a MySQL DB.
In Safari, when you select the first item, it correctly loads the options for the next select menu; however, when you choose one of those (which loads new options in a subsequent select menu), the whole form resets and is broken from that point on. Does anyone know of a Safari bug that would cause this? Here's the JS:
$(document).ready(function(){
$("#searchForm select").change(updateSearchForm);
});
function updateSearchForm() {
$.ajax({
url: '/elements/search_form.php?ajax=true',
data: $('#searchForm').serialize(),
error:function(xhr,err){
alert("readyState: "+xhr.readyState+"
status: "+xhr.status);
alert("responseText: "+xhr.responseText);
},
success: function(data) {
$("#searchForm").html(data);
$("#searchForm select").change(updateSearchForm);
}
});
}
I can post the relevant PHP/HTML for the form, but it's lengthy. I'm relatively new to JS so I'm not sure where to start debugging this... TIA
Could be you are creating an invalid form by replacing the HTML. Some browsers are quite picky about this. Of course I dont know for sure because you did not send the whole code but have you tried to modify the form using append() instead of html() ? Also try to append a small portion first just for diagnostic reasons.
A friend figured this one out after reading Gabor's post... I needed to use ".replaceWith(data)" instead of ".html(data)." Evidently FF was compensating for this but Safari wasn't; each time the ajax loaded the new html it nested it inside the targeted element (#searchForm), so there were nested "form" tags, and Safari didn't like that. Thanks for your help, everyone!