Question

I’m referring to a problem similar to the one in this post, because the solution described there doesn’t work for me.

The starting point is a HTML page (called profile) with jQuery UI tabs:

<div id="tabs"> 
    <ul> 
        <li><a href="#realtab">Foo Bar</a></li> 
        <li><a href="?cmd=changePassword" title="pwd-settings">
                        <span> Dynamic tab </span>
            </a></li>
    </ul>
</div>

The HTML rendered within the DIV is:

<form method="post" id="subform" action="http://myhost.com/example.php">
    <input type="hidden" name="cmd" value="submitChangedPassword">

    <dl>
        <dt>PWD1</dt>
        <dd><input type="password" name="password" /></dd>

        <dt>PWD CHK</dt>
        <dd><input type="password" name="passwordChk" /></dd>

        <dt>&nbsp;</dt>
        <dd><input type="submit" value=" Apply " /></dd>
    </dl>
</form>

In addition, I use the following JS script (based on the post linked in the introduction):

$('#subform').submit(function() { // catch the form's submit event - should I use the form id?
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            $('#pwd-settings').html(response); // update the DIV - should I use the DIV id?
        }
});
return false; // cancel original event to prevent form submitting
});

The record is submitted, but the behavior is different depending on the browser:

• IE, Firefox, Opera: correct content into DIV, excellent!

• Safari, Chrome: correct content, but the entire page is refreshed with the results

Please let me know what I’m doing wrong. Many many thanks!

UPDATE 1: The DIV named pwd-settings is created by the tab interface only. Please note that the behavior is the same, even if I add it to the HTML (with <div id ="pwd-settings"></div>).

UPDATE 2: I also removed the JavaScript above and all browsers became “correct content, but the entire page is refreshed” = “old URL, new content”. As soon as I added the JavaScript to the HTML page rendered within the DIV, it started working in the browser described above. Hence I see two possible error reasons:

1) The JS is simply not executed in the browsers having errors or

2) The JS within the DIV doesn’t work because it addresses a DIV which only exists outside

Answer 1

I finally found out the reason: some browsers (namely the ones having issues) behave differently when the JS described in the question is loaded due to the fact the form does not exist yet because the content of the tab is loaded later on via Ajax.

Hence the solution is to create a JS function instead of the code above and adapt the button (submit becomes button, introducing onClick):

<input type="button" value=" Apply " onClick="callMyFunction()" />

This is handled correctly by Safari and Chrome then too.

Many thanks to all participants!