jquery ajax call not working as expected

Question

ive got an ajax call looking like this:

$("#loginForm").submit(function(e){
           $.ajax({
                type:'POST',
                url:'login.php',
                data: $("#loginForm").serialize();
                success: function(data){


                        if(data=="1"){
                        $("#message").html('<span class="gmessage">You are already logged in!</span>');
                        }
                        else if(data=="2"){
                            $("#message").html('<span class="gmessage">You have been logged in!</span><br/>'
                                               '<span class="bmessage">You will be redirected in 10 seconds</span>');
                            $("#message").fadeOut(1000, function(){
                                window.location = <?php echo $_SESSION['ref'];?>;
                            });
                        }
                        else if(data=="3"){
                             $("#message").html('<span class="rmessage">The password you entered was incorrect</span>');
                        }
                        else if(data=="4"){
                             $("#message").html('<span class="rmessage">That account does not exist, you may need to register for an account</span>');
                        }
                        else{
                            $("#message").html('<span class="rmessage">There was an error: please try again</span>');
                        }

                }

           });
           e.preventDefault();
        });

the php has been tested and behaves as expected according to the messages in the spans, but when this ajax call executes no message is displayed, thats if it is executing at all. The corresponding html is this:

       <tr>
         <td id="message" name="message" colspan="2"></td>
       </tr>
        <tr>
         <td colspan="2" style="height:50px">
           <center>
                <input type="submit" name="submit" id="submit" value="Login!" style="font-family: arial;font-size:14pt;"/><br/><br/>
                <span class="registerSpan">Don't have an account?:</span><br/><br/>
                <input type="button" onClick="parent.location='createacct.php'" style="font-family:arial; font-size:14pt;" value="Register"/>
          </center>
         </td>
        </tr>

for what reason is this not working? another related question: is ajax the best way of handling this?

Answer 1

Using jsfiddle's jslint checker I sorted some syntax errors that exsisted in your code.

$("#loginForm").submit(function(e){
       $.ajax({
            type:'POST',
            url:'login.php',
            data: $("#loginForm").serialize(),
            success: function(data){


                    if(data=="1"){
                    $("#message").html('<span class="gmessage">You are already logged in!</span>');
                    }
                    else if(data=="2"){
                        $("#message").html('<span class="gmessage">You have been logged in!</span><br/><span class="bmessage">You will be redirected in 10 seconds</span>');
                        $("#message").fadeOut(1000, function(){
                            window.location = <?php echo $_SESSION['ref'];?>;
                        });
                    }
                    else if(data=="3"){
                         $("#message").html('<span class="rmessage">The password you entered was incorrect</span>');
                    }
                    else if(data=="4"){
                         $("#message").html('<span class="rmessage">That account does not exist, you may need to register for an account</span>');
                    }
                    else{
                        $("#message").html('<span class="rmessage">There was an error: please try again</span>');
                    }

            }

       });
       e.preventDefault();
    });​

Answer 2

Apart from the obvious syntax error pointed out by @Alexander you should also pass dataType: "text" to tell jQuery what data to expect.

Also, it would be better if you use json using HTTP status codes. The success function could look like

success(function(result) {
    var message = '<span class="gmessage">Some Initial text</span>';
    if(result.status == 200) {
        message = '<span class="gmessage">' + result.message + '</span>';
    }
    else if (result.status == 401) {
        .......
    }
    $('#message').html(message);
}

There are obviously ways to optimize this further by using templates and not making a lot of DOM manipulations.