Saving the status of answers

Once the author clicks the button, the status has to be saved to the database as true or false depending on the current status of the answer. Let's go through the jQuery code located inside the questions.js file for making the AJAX request to the server:

    jQuery(document).ready(function($) { 
      $(".answer-status").click( function() { 
        $(body).on("click", ".answer-status" , function() { 

          var answer_button = $(this); 
          var answer_status  = $(this).attr("data-ques-status"); 
          // Get the ID of the clicked answer using hidden field 
          var comment_id = $(this).parent().find(".hcomment").val(); 
          var data = { 
          "comment_id":comment_id, 
          "status": answer_status 
        }; 

      $.post( wpwaconf.ajaxURL, { 
        action:"mark_answer_status", 
        nonce:wpwaconf.ajaxNonce, 
        data : data, 
      }, function( data ) { 
        if("success" == data.status){ 
          if("valid" == answer_status){ 
             answer_buttonval("Mark as Incorrect"); 
             answer_button.attr(" 
     data-ques-status","invalid"); 
          }else{ 
            answer_button.val("Mark as Correct"); 
            answer_button.attr(" 
     data-ques-status","valid"); 
            } 
          } 
        }, "json"); 
      }); 
    }); 

Let's understand the implementation of saving the answer status. This code snippet executes every time a user clicks the button to change the status. We get the current status of the answer by using the data-ques-status attribute of the button. Next, we get the ID of the answer using the hidden field with hcomment as the CSS class. Then, we send the data through an AJAX request to the mark_answer_status action.

Once the AJAX response is received, we display the new status of the answer and update the data attribute of the button with the new status.

The next step of this process is to implement the server-side code for handling the AJAX request. First, we need to define AJAX handler functions using the WordPress add_action function. Since only logged-in users are permitted to mark the status, we don't need to implement the add_action function for wp_ajax_nopriv_{action}. Let's add the AJAX action to the instance function of the main class of the plugin:

    add_action('wp_ajax_mark_answer_status',  
    array(self::$instance,'mark_answer_status'));                 

Then, we need to add the mark_answer_status function inside the main class. Implementation of the mark_answer_status function is given in the following code:

    function mark_answer_status() { 
      $data = isset( $_POST['data'] ) ? $_POST['data'] : array(); 
  $comment_id     = isset( $data["comment_id"] ) ? 
 absint($data["comment_id"]) : 0; 
  $answer_status  = isset( $data["status"] ) ? $data["status"] : 
 0; 
      // Mark answers in correct status to incorrect 
      // or incorrect status to correct 
      if ("valid" == $answer_status) { 
        update_comment_meta( $comment_id, "_wpwa_answer_status", 1 ); 
      } else { 
      update_comment_meta( $comment_id, "_wpwa_answer_status", 0 ); 
      } 
      echo json_encode( array("status" => "success") ); 
      exit; 
        } 

We can get the necessary data from the $_POST array and use it to mark the status of the answer using the update_comment_meta function. This example contains the most basic implementation of the data saving process. In real applications, we need to implement necessary validations and error handling.

Now, the author who asked the question has the ability to mark answers as correct or incorrect. So, we have implemented a nice and simple interface for creating a question-answer site with WordPress. The final task of the process will be the implementation of the questions list.