1

複数ページのフォームで jQuery モバイルを使用しています。ユーザーが [次のページ] というラベルの付いたボタンをクリックすると、AJAX 要求を実行したいと考えています。AJAX リクエストの結果によっては、ユーザーが次のページにアクセスできないようにしたいと考えています。

私が直面している問題は、AJAX リクエストが次のページ イベントよりも応答に時間がかかることだと思います。したがって、AJAX リクエストを終了させずに、ユーザーが次のページに入ることができます。

少なくとも私はそれが起こっていると思います。この問題の解決策を知っているか、前にこれに遭遇した人はいますか?

HTML:

<div id="page1" data-role="page">
    <div data-role="header" data-position="fixed" data-theme="d">
        <a href="#page2" data-role="button" id="btnPage2" class="ui-btn-right" data-icon="arrow-r">Next Page</a>
    </div>
    <div role="main" class="ui-content">
        <label for="testVal">Test Val:</label>
        <input type="text" id="testVal" name="testVal"/>
    </div>
</div>
<div id="page2" data-role="page">
    <div role="main" class="ui-content">

    </div>
</div>

jQuery:

$('#btnPage2').click(function(){
    var isValid = '';
    var aValue = $('#testVal').val();
    $.ajax({
        type: "POST",
        url: "php-file.php",
        data: {"something":aValue },
        success: function(data){
            var json = $.parseJSON(data);
            if(json.hasOwnProperty('error')){
                console.log("the user is not allowed on page 2");
                isValid = false;
            }else{
                isValid = true;
            }
        }
    });
    if(!isValid){
        alert('sorry you can not enter page 2');
        return false;
    }
});

上記のコード サンプルでは、​​[次のページ] ボタン (つまり#btnPage2) をクリックすると、コンソール ログを確認すると "ユーザーはページ 2 で許可されていません" と表示されますが、ページ 2 にアクセスできます。

アップデート：

コードを次のように調整してみました。ユーザーがページ2へのアクセスを許可されていない場合にのみ機能します。 e.preventDefaultajaxを終了させて​​いますが、page2への変更を強制する方法がわかりません。ユーザーが page2 へのアクセスを許可されている場合、行

$(":mobile-pagecontainer").pagecontainer("change", "#page2");

問題を引き起こしているようです... pageChange イベントを呼び出す無限ループを作成するだけです。それがpage2へのページ変更を強制する方法だと思いましたが、私は間違っていると思います.page2への変更を強制する方法がわかりません

$(document).bind('pagebeforechange', function(e, data) {
    var to = data.toPage,
        from = data.options.fromPage;

    if (typeof to === 'string') {
        var u = $.mobile.path.parseUrl(to);
        to = u.hash || '#' + u.pathname.substring(1);
        if (from) from = '#' + from.attr('id');

        if (from === '#page1' && to === '#page2') {
        e.preventDefault();
        var aValue = $('#testVal').val();
            $.ajax({
                type: "POST",
                url: "php-file.php",
                data: {"something":aValue },
                cache: false,
                success: function(data){
                    var json = $.parseJSON(data);
                    if(json.hasOwnProperty('canNotPass')){
                        alert('Sorry you can not view page 2');
                    }else{
                        ///  if json does not contain canNotPass then continue to page2 
                        $(":mobile-pagecontainer").pagecontainer("change", "#page2");
                    }
                },
                beforeSend: function() {
                    $.mobile.loading("show");
                },
                complete: function() {
                    $.mobile.loading("hide");
                }
            });   
        }            
    }
});

更新 #2

@deblocker 修正を実装しようとしましたが、まだ同じ問題が発生しています。canNotPassajax がコードに設定されている状況で次のコードを実行するとtrue、 の値をテストするポイントに到達しないようですcanNotPass。したがって、設定されることはなくe.preventDefault、ユーザーは page2 へのアクセスを許可されます。

解決策は、ページ変更が発生する前に ajax が終了する時間を許可する遅延オブジェクトを設定することと関係があると思います。唯一の問題は、遅延オブジェクトを設定/操作する方法を知っていることです。

JSFiddle

4

2 に答える 2