0

結果を表示するページがあります。結果は、(document).ready の ajax リクエストを介してコンテンツ div に読み込まれます。結果は、フォームを使用してフィルタリングできます。$(#filter_form).submit() で ajax リクエストが行われ、コンテンツ div にフィルタリングされた結果が入力されます。ここまでは問題ありません。

結果をクリックすると、結果の詳細が新しいページにロードされます。非 ajax ロードです。戻るボタンをクリックすると、結果ページに戻ります。フォームのチェックボックスは引き続きチェックされていますが、フィルターは結果に適用されていません。明らかに、document.ready では、最初のフィルター処理されていない ajax 要求が行われ、フィルター処理されていない結果が読み込まれます。

私の最初のアイデアは、フォーム要素のいずれかがチェックされているかどうかを確認し、チェックされている場合はフォームを送信する準備ができているページでした。問題は、これを機能させる方法がわからないことです。

フィルタリングされた結果をロードするスクリプトは次のとおりです。

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

       $.ajax({
                url: '<?=base_url().'catalog/show_listings/?';?>'+queryString,
                type:'GET',
                data: $('form#filter_form').serialize(),
                dataType: 'json',
                success: function(listings){
                        $('#result_container').html(listings);
                    } // End of success function of ajax form       
         }); // End of ajax call
    });

フォーム要素がアクティブかどうかを確認する方法を見つけました：

 var validate= false;

    $('#requestfilter_from').each(function(){
        if($(this).val() != '' || $(this).attr('checked'))
            validate = true;
    });

2つを組み合わせる方法がわかりません。2番目のスクリプトでajaxリクエストを実行しようとしましたが（そのスクリプトを投稿する必要はもうありません）、結果は得られませんでした。

提案や指針をいただければ幸いです。

4

1 に答える 1

1

問題は、フィルターの「状態」を保存することだと思います（ユーザーがページを離れても、どのフィルターがチェックされているかを追跡します）。

これは、クエリ パラメータを URL に追加することで簡単に実行できます。たとえば、誰かがフィルターを選択した場合、URL にcheckbox1追加できます。&checkbox1=trueこのようにして、ユーザーがページを離れて戻るボタンを押しても&checkbox1=true、URL に含まれます。

ここで、データの初期読み込みを変更して、クエリ パラメーターを考慮に入れる必要があります。そのため、最初にすべてのデータをロードしないでください。代わりに、クエリ パラメータを解析し、クエリ パラメータで見つかったフィルタに基づいて URL を準備してから、初期データをロードする ajax クエリを起動します。

手順は次のとおりです-

  1. フィルタの選択時に、クエリ パラメータを URL に追加します。
  2. で、クエリ$(document).readyパラメータを解析し、
    • 入力ボックスを更新して、フィルターの状態が反映されるようにしてください。たとえば&checkbox1=true、URL に が見つかった場合は、チェックされていることinput[name=checkbox1]を確認します。
    • フィルター パラメーターを使用して最初の ajax クエリを実行する

これにはボーナスが付いています。これで、ユーザーは選択したフィルターを使用して URL を渡すこともできます。

PS：調べてくださいjQuery.param.querystring

于 2013-10-10T15:53:28.740 に答える