2

私はまだAJAXの使い方を学んでいるので、ここに初心者用コードを表示します...

私はこのdivを取得しました(チェックボックスのリストとして繰り返されます):

<div class="updateTask fs11">
  <input type="checkbox" name="taskStatusRadio" id="taskStatus" value="<?php echo $taskId; ?>" <?php echo $done; ?> > 
  <?php _e('Task Done', 'sagive'); ?>
</div>

これをアクティブにするもの：

jQuery(function($){
    $('.updateTask').click(function () {

        $.post(ajax_object.ajaxurl, {
            action: 'action_update_task',
            task_id: $("input[name=taskStatusRadio]:checked").map(function () {return this.value;}).get()

        }, function(data) {

            // USE DATA RETURNED //////////
            var $response   = $(data);
            var message     = $response.filter('div#message').html();
            var taskid      = $response.filter('div#taskid').html();        

            // SUCCESS RESPOND //////////
            setTimeout(function(){
                $('#success ul li').append(message + taskid);
                $('#success').fadeIn();
                $('#success').css("display", "block");              
            }, 1000);   

            setTimeout(function(){
                $('#success ul li').empty();
                $('#success').fadeIn();
                $('#success').css("display", "none");               
            }, 30000);


            hideTask = "#" + taskid;
            $(hideTask).hide("slow");

            hideTask = '';

        });
    });
});

そして、このphpファイルを使用します： 

wp_enqueue_script( 'ajax-update-task', get_stylesheet_directory_uri().'/ajaxLoops/ajax-update_task.js', array('jquery'), 1.0 ); // jQuery will be included automatically
wp_localize_script( 'ajax-update-task', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); // setting ajaxurl

add_action( 'wp_ajax_action_update_task', 'ajax_update_task' ); // ajax for logged in users
function ajax_update_task() {

    global $current_user;
    get_currentuserinfo();
    $task_user = $current_user->display_name;
    if($taskUser == '') {$taskUser = $current_user->user_login;}

    $task_id = $_POST["task_id"];
    $task_id = $task_id[0];
    $task_status = 'done';
    $task_title = get_the_title($task_id);
    $task_title = mb_substr($task_title, 0 ,35).'...';

    update_post_meta($task_id, '_sagive_task_radio_selector', $task_status);
    update_post_meta($task_id, '_sagive_task_user_changed', $task_user);

    echo '<div id="message">'.__('The task: ', 'sagive').$task_title.__('Was Marked Completed!', 'sagive').'</div>';
    echo '<div id="taskid">'.$task_id.'</div>';

    die(); // stop executing script
}

初めてでもすべてうまくいきます。しかし、最初のチェックボックスが消えた後にマークした2番目のチェックボックスは、期待どおり何もしません。php スクリプトをアクティブにせず、応答を返しません。

私はまだ AJAX を使用したばかりなので、私のコードを使用した例または説明付きの良い例をいただければ幸いです。

リビジョン 1:
これは、チェックボックスがあるページの構造です。 ここに画像の説明を入力

4

1 に答える 1

5

あなたの問題はセレクターにあると思います：

$("input[name=taskStatusRadio]:checked").map(function () {return this.value;}).get();

taskStatusRadioこれは、クリックしたものだけでなく、チェックされ たすべての入力を返します。
あなたのphpスクリプトは、配列でチェックされたすべてのタスクIDを受け取り、それを処理して応答を送信する最初のものを選択します。
最初は、チェックボックスを 1 つだけオンにするだけで問題ありません。しかし、2 番目のチェックボックスをオンにすると、オンになっているすべての taskid が送信され、 のみ$_POST["task_id"][0]が処理されます。
PHPスクリプトからの同じ応答で、正面図に変化はありません。

したがって、コードを少し変更して、クリックしたチェックボックスのタスク ID のみを投稿する必要があると思います。

jQuery(function($) {
    // we listen only the checkbox, not the div click action
    $(':checkbox', '.updateTask').click(function () {
        // if the checkbox is checked
        if ($(this).attr('checked') == "checked") {

            $.post(ajax_object.ajaxurl, {
                  action: 'action_update_task',
                  task_id: $(this).val() }, 
                  function(data) {

                      // SUCCESS RESPOND //////////
                      setTimeout(function() {
                          $('#success ul li').append( $(data).html());
                          $('#success').fadeIn();
                          $('#success').css("display", "block");              
                          }, 1000);   

                      setTimeout(function() {
                          $('#success ul li').empty();
                          $('#success').fadeIn();
                          $('#success').css("display", "none");               
                          }, 30000);

                      // we hide the checkbox
                      $(this).hide("slow");
             });
         }
     });
 });

フロントの JavaScript が変更されたため、php スクリプトを次のように単純化する必要があります。

wp_enqueue_script( 'ajax-update-task', get_stylesheet_directory_uri().'/ajaxLoops/ajax-update_task.js', array('jquery'), 1.0 ); // jQuery will be included automatically
wp_localize_script( 'ajax-update-task', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); // setting ajaxurl

add_action( 'wp_ajax_action_update_task', 'ajax_update_task' ); // ajax for logged in users
function ajax_update_task() {

    global $current_user;
    get_currentuserinfo();
    $task_user = $current_user->display_name;
    if($taskUser == '') {$taskUser = $current_user->user_login;}

    $task_id = $_POST["task_id"];
    $task_status = 'done';
    $task_title = get_the_title($task_id);
    $task_title = mb_substr($task_title, 0 ,35).'...';

    update_post_meta($task_id, '_sagive_task_radio_selector', $task_status);
    update_post_meta($task_id, '_sagive_task_user_changed', $task_user);

    //  Note : now we send the message directly well-formed with the task_id
    echo __('The task: ', 'sagive').$task_title.__('Was Marked   Completed!', 'sagive'). $task_id;

    die(); // stop executing script
}

私の答えがあなたの問題を解決することを願っています;）

ps: 下手な英語で申し訳ありません...

于 2012-09-26T12:49:39.940 に答える