2

ajax リクエストを実行する jQuery モバイル フォームをセットアップしました。問題はリクエストではありませんが、送信時に jQuery モバイルがページ コンテンツをロードするという事実です。これは、現在のページに追加したエラーが、ページがスワップされたときに削除されることを意味します (jquery モバイルを使用したことがある場合は、ページのハッシュなどがどのように機能するかがわかります)。

ps非ajaxクラスでフォームをラップしても、ajaxの実行が停止するため機能しません。

こんな感じで設定してます…

        <!--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.');
        }
    });
   });
});

私のPHPからのエラーの結果でわかるように、ページにdivを追加していますが、このページはスワップアウトされ、同じページからdivを除いたものに置き換えられます。とてもうるさい。ページスワップ後に追加する方法があると思いますか?

ありがとう。

4

1 に答える 1

2

フォームを送信するときに、そのアクションを抑制したいとします。そのようです：

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

または、false を返すことができます。

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

それ以外の場合は、イベントを使用せずに、ボタンでイベントをsubmit選択しclickてください。使用例を次に示しclick()ます: http://jsfiddle.net/Twisty/zaJud/

于 2013-02-05T19:11:32.810 に答える