Question

I have a form in a jQuery tab div that is loaded with AJAX:

<div id="tabs-2">
    <form id="frmLogin" name="frmLogin" class="cmxform" method="post" action="actions/login.php">
        <p>
            <label>Username</label>
            <input type="text" id="username" name="username" maxlength="30" />
        </p>
        <div class="clear"></div>
        <p>
            <label>Password</label>
            <input type="password" id="password" name="password" maxlength="40" />
        </p>
        <p>
        <input class="submit" type="submit" id="submit" value="Login" />
        </p>
        <div class="clear"></div>
    </form>

</div>

The form submits to the listed PHP file. This .js file using the Form and Validation jQuery plugins submits the form via AJAX. The PHP file echoes back JSON data:

$(document).ready(function() { 
$("#frmLogin").validate({
                    rules: {
                            username: {
                                required: true,
                                minlength: 6
                            },
                            password: {
                            required: true,
                            minlength: 6
                            },
                            },
                            submitHandler: function(form) {
                                $("#frmLogin").ajaxSubmit({
                                                        dataType: 'json',
                                                        success:    processLogin,
                                                        })
                            }
});
function processLogin(data) {
    if (data.un) {
        $("div#tabs-2").slideUp(function() {
            $("li#login").html('<a href="ajax/loggedin.html">Welcome, '+data.fn+'</a>');
        });
    } else {
        alert("uh-oh"); 
    }
}
});

This all works fine. I’ve got the link which previously read “Login” to read back a Welcome message. Now I want to replace that tab’s contents (login form) with a ul of user options.

The problem: the link with the Welcome message no longer functions as a tab. When clicked, it directs the browser to the “ajax/loggedin.html.”

I’ve tried restating the tabs function in the “loggedin.html” file and calling it in the processLogin function in “login.js”. My next fix attempt will be to change the html content of the tabs-2 div in the processLogin function, but this seems like it will generate a lot of clunky code.

Any suggestions for preventing the disabling of the tab behavior?

Answer 1

This the classic when-code-is-run problem. You are setting the tab behavior to check for tabs and set them up. Then you load new code, but you haven’t initialized the tab for these.

The solutions are to use delegate (or live) instead of direct click events or to initialize the tabs in the ajax callback. The latter is the best solution for this problem.