1

私のメイン ページには、チケット ステータスの選択オプションと、送信ボタンとテキストエリアがあります。チケットごとにチェックボックスが付いたチケットのリストがあり、リストにはチケットに関するさまざまな情報が表示されます。

そのようです：

 _________________________________ \
|checkbox|ticket name|user|status| |
|checkbox|ticket name|user|status| |
|checkbox|ticket name|user|status| |
|checkbox|ticket name|user|status| |--> this is on my list.php page
|checkbox|ticket name|user|status| |
|checkbox|ticket name|user|status| |
|________________________________| |
 ___________________________       /
|select status|submit button| \
|___________________________| |
 ___________________________  |--> this is on my main page
|         text area         | |
|___________________________| /

チケットのリストは、XMLhttpRequest 経由で「list.php」を使用してロードされます。テキストを入力してステータスを選択し、更新するチケットをチェックして送信を押すと、POST XMLhttpRequest を介して情報が送信され、ページが更新されます。

XMLhttpRequest は、テキストエリア、ステータス、およびメイン ページからの送信を list.php に送信します。問題はチェックボックスです。それらはページ list.php にあるため、それらの処理方法がわかりません。

チェックボックスのリセット後に送信された新しいデータでlist.phpを更新し、チェックされたものを取得できないため、更新前と送信を押すときにそれらをチェックします。チェックボックスをリセットしたいのですが、リクエストが完了した後でのみです。

何か案は？

Pastebin の 2 つのページの簡単な例をここに投稿しました。

4

1 に答える 1

1

JavaScript と jQuery で必要なすべてのことができます

注: このコードはテストされていません。正しい方向を示しますが、構文エラーがあるか、コードと一致しない可能性があります。

まず、AJAX 呼び出しを jQuery POST メソッドに交換します。

単純化されたページには既に jQuery が含まれているため、単純な jQuery を使用してPOSTリクエストを実行できる場合は、これらの回りくどい XMLHttpRequests を使用しないでください (通常、これはより少ない行で実行しますが、簡単に実行できるようにスペースを空けています)。読んだ）：

function reloadList(statuses) {
    $.post(
        'list.php',
        {
           'data': some-variable,
           'more-data': some-other-variable 
        },
        function(data,status) {
           $('#list').html(data);
           restoreCheckedStatus(statuses);
        }
    );
}

POST データを入力する必要があります。

次に、これらのチェックボックスのステータスを保存する関数が必要です

jQuery セレクターを使用して、ページ上のすべてのチェックボックスを反復処理し、チェックされているかどうかを配列に格納します。

function saveCheckedStatus() {
    var statuses = new Array();
    $(':checkbox').each(function(){
        // Store the checkbox ID and checked status in an array
        var cbox = new Array();
        var cbox['id'] = $(this).attr('id');
        var cbox['checked'] = $(this).is(':checked');
        statuses.push(cbox);
    });
    return statuses;
}

それらの状態を復元する機能も必要です

この後、これらのステータスを入力配列から復元する関数を作成します。

function restoreCheckedStatus(statuses) {
    for(var cbox in statuses) {
        // Set a checkbox checked or unchecked based on ID
        $('#'+cbox['id']).attr('checked', cbox['checked']);
    }
}

最後に、すべてをまとめて投げます

ここで、誰かが [送信] ボタンをクリックするのを待ってから、上記のすべてを正しい順序で実行する必要があります。

$('#submit').click(function(){
    var statuses = saveCheckedStatus();
    reloadList(statuses);
});

これで問題が解決するはずです。この構文に基づいて動作するようになった場合は、間違っていることを教えてください。回答を編集して、将来役立つようにします。

于 2013-08-08T14:19:17.437 に答える