Need help with jQuery/AJAX call in Safari/Mac

Question

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+"\nstatus: "+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

Answer 1

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.

Answer 2

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!