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
}

第一次一切正常。但是我在第一个复选框按预期消失后标记的第二个复选框什么也没做。它不会激活 php 脚本，也不会返回响应。

由于我仍然是使用 AJAX 的新手，因此我将不胜感激使用我的代码的示例或带有解释的好示例。

修订版 1：
这是复选框所在页面的结构 在此处输入图像描述

4

1 回答 1

5

我认为您的问题来自您的选择器：

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

它返回所有taskStatusRadio检查的输入，而不仅仅是您单击的输入。
您的 php 脚本接收在数组中检查的所有 taskid，然后选择第一个对其进行处理并发送响应。
所以第一次，没关系，你只选中了一个复选框。但是当您选中第二个复选框时，所有选中的 taskid 都将被发送，并且只会$_POST["task_id"][0]处理。
来自您的 php 脚本的相同响应，前视图没有变化。

所以，我认为，你只需要修改一点你的代码，只发布你点击它的复选框的taskid。

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 回答