title: How to refresh content after ajax update?
body: <p>I have an admin page for a WordPress plugin that, <em>thanks to the stackoverflow community</em>, I've learned how to add ajax calls to all of the functions that add/delete/update questions and answers for the plugin to access.</p>
  
  <p>To help visualize it:
  <img src="https://i.stack.imgur.com/xonWj.png" alt="enter image description here"></p>
  
  <p>The next step is to refresh the content after a successful ajax call. Of course I don't want to just re-load the page and I assume refreshing the entire page might cause the answer divs to collapse, which would be undesirable. So refreshing only the related content is best.</p>
  
  <p>The list of questions is generated with the following call to the database:</p>
  
  <pre><code>&lt;?php
      $qresult = $wpdb-&gt;get_results("SELECT * FROM " . $wpdb-&gt;prefix . "ccd_ex_questions ORDER BY sort ASC");
      $qcount = $wpdb-&gt;num_rows;
      foreach( $qresult as $key =&gt; $qrow ) {
      ?&gt;
  
          &lt;div id="question&lt;?php echo $qrow-&gt;id; ?&gt;" class="display-questions"&gt;
              &lt;form id="update-question-&lt;?php echo $qrow-&gt;id; ?&gt;" action="" method="post"&gt;
  
                              //question form and content
  
              &lt;/form&gt; {snip...}
  </code></pre>
  
  <p>and the answers are done similar and within the loop generating the list of questions:</p>
  
  <pre><code>&lt;?php
  $aresult = $wpdb-&gt;get_results("SELECT * FROM " . $wpdb-&gt;prefix . "ccd_ex_answers WHERE question_id = " . $qrow-&gt;id . " ORDER BY sort ASC");
  foreach( $aresult as $key =&gt; $arow ) {
  ?&gt;      
  
      &lt;form id="update-answer-&lt;?php echo $arow-&gt;question_id."-".$arow-&gt;id; ?&gt;" action="" method="post"&gt;
  
              //answer form and content
  
      &lt;/form&gt; {snip...}
  </code></pre>
  
  <p>The following is one of the jQuery functions using an ajax call to update content:</p>
  
  <pre><code>//Add New Answer
      jQuery(document).ready(function($) {        
          $('.asubmitbutton').live("click", function(){   
          var thisasubmit = $(this).data('asubmit');
              $(thisasubmit).submit(function(){
  
                  // Get the proper instance of the form fields for the variables
                  var answer = $(this).find('.answer').val();
                  var sort = $(this).find('.sort').val();
                  var correct = $(this).find('.correct').val();
                  var question_id = $(this).find('.question_id').val();
  
                  $.ajax({
                      type: 'POST',
                      url: ajaxurl,
                      data: {
                          action: 'ccd_ex_insert_answer',
                          answer: answer,
                          sort: sort,
                          correct: correct,
                          question_id: question_id
                      },
                      success: function(data, textStatus, XMLHttpRequest){
                      console.log(data);
                      console.log(answer);
                      console.log(sort);
                      console.log(correct);
                      },
                      error: function(MLHttpRequest, textStatus, errorThrown){
                          alert(errorThrown);
                      }
                  });
              return false;
              });
          });
      });
  </code></pre>
  
  <p>And while we're at it, here's the php function handling this ajax call:</p>
  
  <pre><code>//Add an answer
  function ccd_ex_insert_answer() {
      global $wpdb;
      $wpdb-&gt;insert( $wpdb-&gt;prefix . 'ccd_ex_answers', array( 
          'answer' =&gt; $_POST['answer'],
          'sort' =&gt; (int)$_POST['sort'],
          'correct' =&gt; (bool)$_POST['correct'],
          'question_id' =&gt; (int)$_POST['question_id']
          )
      );
  }
  add_action( 'wp_ajax_ccd_ex_insert_answer', 'ccd_ex_insert_answer' );
  </code></pre>
  
  <p>As is, everything works except that changes don't show until the next page re-load.</p>
  
  <p>I presume that I need to add the functions to refresh the data into the success: handler, but I couldn't find an example that spoke to updating the content that is pulled from the database.</p>
  
  <p><strong>So my question is:</strong> <strong><em>How to refresh only the updated content after ajax call and, if possible, maintain the visibility of expanded divs?</em></strong></p>
  
  <p>Any help would be greatly appreciated! <strong>Note:</strong> I am barely an intermediate jQuery user and this is my first ajax attempt, so it's better to assume I know nothing if it prevents something important from shooting over my head. ;)</p>
  
  <p><strong>UPDATE:</strong> I think I am making progress, but still missing something. Problem with the proposed solution is that .html(data) was returning '0'. By removing the line: <strong>url: ajaxurl,</strong> from the ajax call, what is returned now is the entire page content. What I really need to be returned is just the updated content.</p>