Question

I have a jQuery mobile form set up that runs an ajax request. The problem is not request however it’s the fact that jQuery mobile loads out the page content when the submission is sent. This in turn means that the error that I have added to the current page then get’s removed when the page get’s swapped around (if you’ve used jquery mobile you’ll know how the page hashing etc works).

p.s Wrapping the form in non-ajax class will not work as it will stop my ajax running.

This is how I have it set up…

        <!--Log in/Go to register page -->
    <div data-role="page" id="one">
        <div data-role="header">
            <h1>Register of Log In</h1>
        </div>
        <div data-role="content">
            <h2>Log In form</h2>

            <form id='logInForm' action="#" method="POST">
                <div data-role="fieldcontain">
                    <label for="email">Email address:</label>
                    <input type="text" name="emailLogIn" id="emailLogIn" value=""   />
                    <br>
                    <label for="password">Password:</label>
                    <input type="password" name="passwordLogIn" id="passwordLogIn" value=""   />
                    <br>
                    <button type="button" aria-disabled="false">Submit</button>
                </div>
            </form>

            <p><a href='#two'>Not a member? Register here</a></p>

        </div>
    </div>
    <!-- /page one -->

JQuery

$(function() {
var logInFormData = $('#logInForm');

$('#logInFor').submit(function(){
    $.ajax({
        url: 'http://www.mysite.co.uk/project/logIn/logIn.php',
        type: 'post',
        data: logInFormData.serialize(),
        dataType: 'json',
        crossDomain : true,
        timeout: 5000,

        success: function(logInReturn){
            if(logInReturn.message[1]){
                localStorage.clear();
                $('form#logInForm').append("<div class='inputError'><p>" + logInReturn.message[1] + "</p></div>");
            }
            else if(logInReturn.message[2]){
                localStorage.setItem('userHandle', logInReturn.message[2].userHandle);
                localStorage.setItem('userId', logInReturn.message[2].userId);              
                window.location ='selectProject.html';
            }
        },

        error: function(){
            alert('There was an error loading the data. Contact the admin.');
        }
    });
   });
});

so as you can see on result of an error from my PHP i’m adding a div on to the page but this page is then swapped out and replaced with an identical page minus the div. Very annoying. I’m guessing there is a way to append it after the page swap?

Thanks.

Answer 1

When you submit the form, you want to suppress it’s action. Like so:

$('#logInForm').submit(function(e){
    e.preventDefault();
    $.ajax({ 

Or you can return false:

$('#logInForm').submit(function(){
    $.ajax({
        // Your Ajax code
    });
    return false;
});

Otherwise, do not use the submit event, but select a click event on your button. Here is an example using click(): http://jsfiddle.net/Twisty/zaJud/