bulk update meta value with ajax

Question

I want to update posts meta value in the wp_query to a different value on click. What I am basically doing is making a notification bubble (like stackoverflow).

1. wp_query with the number of posts that have meta value 'unread' - WORKING
2. Show the count bubble on top op logged in user's display name - WORKING
3. On clicking the notification, hide the bubble and change post meta value with ajax only for the posts in the wp_query from 'unread' to 'read' so that the count is only visible next when there's a new post with meta value 'unread' - HOW?
4. Show a dropdown of all latest posts with meta value 'read' - maybe another query?

Here's my code for count bubble.

add_shortcode('notify', 'notify_member');
    function notify_member() {
        global $current_user;
        get_currentuserinfo();
        $userid = $current_user->ID;
            $args = array(
                'posts_per_page' => '-1',
                'post_type' => 'answer',
                'post_status' => 'publish',
                'author__not_in' => $userid, //exclude user posts
                'meta_query' => array(
                        'relation' => 'AND',
                    array(
                        'key' => 'question_owner_id'
                        'value' => $userid, //only show posts for the user
                        'compare' => '='
                    ),
                        array(
                            'key' => '_read_answer'
                            'value' => 'unread', //only show unread posts
                            'compare' => '='
                        ),
                    )
                );
                $questions = new WP_Query( $args );
                $html = '';
                $html .= '<a href="#" class="count">'.$questions->found_posts.'</a>'; //total count
                return $html;
    }

I have looked at ajax like and vote tutorials, they tackle one post at a time. I will need the below to work for all returned posts from the query and change at the same time.

            if( $questions->have_posts() ) {
            while ( $questions->have_posts() ) { $questions->the_post();
                 update_post_meta( $post->ID, '_read_answer', 'read' ); 
                }
            }

I am out of ideas, any direction is welcome. Thanks. P.S. I am not a coder, so please do explain a little.

Answer 1

After click on <a> tage send an ajax request. I will write only php code do jQuery part yourself.

<script type="text/javascript" >
    jQuery(document).ready(function($) {

    var data = {
        action: 'my_action'
    };

    // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
    $.post(ajaxurl, data, function(response) {
        //Do watever after you get response
    });
});
</script>

In Your function.php

add_action( 'wp_ajax_my_action', 'my_action' );
add_action( 'wp_ajax_nopriv_my_action', 'my_action' );
function my_action(){
    global $current_user;
    get_currentuserinfo();
    $userid = $current_user->ID; //You can also user get_current_user_id() to get current user id
    $args = array(
        'posts_per_page' => '-1',
        'post_type' => 'answer',
        'post_status' => 'publish',
        'author__not_in' => $userid, //exclude user posts
        'meta_query' => array(
            'relation' => 'AND',
            array(
                'key' => 'question_owner_id'
                'value' => $userid, //only show posts for the user
                'compare' => '='
            ),
            array(
                'key' => '_read_answer'
                'value' => 'unread', //only show unread posts
                'compare' => '='
            ),
         )
    );
    $questions = new WP_Query( $args ); //Get all the post whose meta you want to update
    foreach($questions->posts as $question):
        update_post_meta( $question->ID, '_read_answer', 'read' ); //Update all the posts meta.
    endforeach;
    echo true; //Send the response. You can aslo send response whatever you want.
    die();
}

When ever some one click on a tag it will send an ajax request to the server. The server run the previous code to get posts whose meta you want to update. After getting the post update their meta value.