Question

I am still learning how to use AJAX so would display a novice code here…

I got this div (which repeats itself as a list of checkbox):

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

Which activates this:

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 = '';

        });
    });
});

And uses this php file:

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
}

It all works fine the first time. But the second checkbox I mark after the first one disappears as expected does nothing. It doesn’t activate the php script and doesn’t return a response.

Since I’m still new using AJAX, I would appreciate an example using my code or a good example with explanation.

Revision 1:
This is the structure of the page where the checkboxes are at

Answer 1

I think your problem comes from your selector :

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

which returns all the taskStatusRadio input checked and not just the one you click.

Your php script receive all the taskid checked in an array an pick the first one to treat it and send a response.

So the first time, it’s ok, you just have one checkbox checked. But when you check a second checkbox, all checked taskid will be send and only the $_POST["task_id"][0] will be treated.

Same response from your php script and no change in the front view.

So, i think, you just have to modify a little bit your code, to post only taskid of the checkbox you click on it.

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");
             });
         }
     });
 });

And because of this change in the front javascript, we have to simplify your php script like this :

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
}

I hope my answer will solve your problem 😉

ps: i apologize for my poor english…