CODEWITHSUNDEEP
phpjqueryajax
Aristona
Aristona

Reputation: 9341

Updating a div with ajax, depending on the return value of PHP

I have a form like the following.

<div id="loginerr"></div>
<form action="?page=login" method="POST" id="loginForm">
    <table width="224" cellpadding="0" cellspacing="0" border="0" align="center" style="padding-top: 45px;">
        <tr>
            <td height="26" align="center" valign="middle">
                <input tabindex="1" id="username" name="username" type="text" style="width: 157px; background-color: #e8eff7; border: 2px solid #889db0; padding: 0px; margin: 0px;"/></td>
            <td align="center" valign="middle" rowspan="2" width="57" height="52">
                    Login button --> <div id="login" class="login"></div>
            </td>
        </tr>

        <tr>
             <td height="26" align="center" valign="middle">
                <input tabindex="2" id="password" name="password" type="password" style="width: 157px; background-color: #e8eff7; border: 2px solid #889db0; padding: 0px; margin: 0px;"/>
            </td>
        </tr>

        <tr>
            <td height="40" colspan="2" align="center" valign="middle">
                <a><:FORGOT_PASSWORD:></a>
            </td>
        </tr>

        <tr>
            <td colspan="2" align="center" valign="middle">
                <a href="#!?page=register"><div class="signup"></div></a>
            </td>
        </tr>
    </table>
</form>

This script requests ?page=login address with Username and Password and updates "loginerr" div with the returned data.

<script>
$(document).ready(function(){
    $("#login").click(function(e)
    {
        e.preventDefault();  // prevent normal form submit
        $("#loginerr").html('<img src="<%THEME%>images/loading.gif">');
        var formData = $("#loginForm").serialize();
        $.post("?page=login", formData, function(data)
        {
            $("#loginerr").html(data);
        });
    });
});

The thing I want to do is, if it returns success message (user successfully logged in) it should replace this form with account.php contents.

I tried to do it myself, but failed.

Please help.

Upvotes: 0

Views: 422

Answers (2)

mkk
mkk

Reputation: 7693

what was my solution (not in PHP but doesn't matter) is that my action returned either an HTML which I updated via $('#res').html(data) or a json with a href attribute, to which I was redirecting. In your case you can do exactly the same, but instead of redirection just make another AJAX call if you wish. The code in 'onSuccess' was something like:

if(data.href) doAjaxCall(data.href) else $('#res').html(data)

hope this helps

in your code to vizualize it would be something like

$(document).ready(function(){
    $("#login").click(function(e)
    {
        e.preventDefault();  // prevent normal form submit
        $("#loginerr").html('<img src="<%THEME%>images/loading.gif">');
        var formData = $("#loginForm").serialize();
        $.post("?page=login", formData, function(data)
        {
            if(data.href) doAjaxCall(data.href) else $("#loginerr").html(data) // this line changed
        });
    });
});

Other way of handling this problem is to return different status if logging in did not work, for example 403, in that case you can check what was the response status and either update #loginrr or something else. you can also return json array with index "failed" and "succeeded" and use if(data.failed) update loginrr else if (data.succeeded) update somethingElse. There are plenty of possibilities. pick the one you like.

Upvotes: 1

Luc
Luc

Reputation: 985

Their doesn't seem to be any reference above to account.php above? You are posting to?page=login ?

Upvotes: 0

Related Questions