Refresh div with jquery in ajax call

Question

I have a div that has foreach's in them like so:

<div id="conversation">
   <?php foreach($singles as $question): ?>
     <div class="well well-sm">
       <h4><?php echo $question['question_title']; ?></h4>
     </div>
     <div class="bubble bubble--alt">
       <?php echo $question['question_text']; ?>
     </div>
   <?php endforeach; ?>
   <?php foreach($information as $answer): ?>
     <div class="bubble">
       <?php echo $answer['answer_text']; ?>
     </div>
   <?php endforeach; ?>
 </div>

And I also have a form to put in a new answer:

<form method="post" style="padding-bottom:15px;" id="answerForm">
    <input type="hidden" id="user_id" value="<?php echo $_SESSION['user_id']; ?>" name="user_id" />
    <input type="hidden" id="question_id" value="<?php echo $_GET['id']; ?>" name="question_id" />
    <div class="row">
      <div class="col-lg-10">
        <textarea class="form-control" name="answer" id="answer" placeholder="<?php if($_SESSION['loggedIn'] != 'true'): ?>You must be logged in to answer a question <?php else: ?>Place your answer here <?php endif; ?>" placeholder="Place your answer here" <?php if($_SESSION['loggedIn'] != 'true'): ?>disabled <?php endif; ?>></textarea>
      </div>
      <div class="col-lg-2">
        <?php if($_SESSION['loggedIn'] != 'true'): ?>

        <?php else: ?>
          <input type="submit" value="Send" id="newAnswer" class="btn btn-primary btn-block" style="height:58px;" />
        <?php endif; ?>
      </div>
    </div>
  </form>

I am submitting the form via ajax and would like the div #conversation to refresh and reload the for each every time the user submits an answer to the question. Right now I have the following ajax code:

<script type="text/javascript">
  $("#newAnswer").click(function() {
    var answer = $("#answer").val(); 
    if(answer == ''){
      $.growl({ title: "Success!", message: "You must enter an answer before sending!" });
      return false;
    }
    var user_id = $("input#user_id").val();
    var question_id = $("input#question_id").val();
    var dataString = 'answer='+ answer + '&user_id=' + user_id + '&question_id=' + question_id;
    $.ajax({  
      type: "POST",  
      url: "config/accountActions.php?action=newanswer",  
      data: dataString,  
      success: function() {  
         $.growl({ title: "Success!", message: "Your answer was submitted successfully!" });
         $("#answerForm").find("input[type=text], textarea").val("");
         $("#conversation").hide().html(data).fadeIn('fast');
      }  
    }); 
    return false;  
  });

</script>

You will notice that I have tried $("#conversation").hide().html(data).fadeIn('fast'); but it did not successfully do the job. It only reloaded the information that was passed through ajax into the div instead of just reloading the foreach.

How can I refresh the div or the <?php foreach(); ?> <?php foreach(); ?> in the success function of the ajax call?

Answer 1

Mitch, I'm looking at this part:

  success: function() {  
     $.growl({ title: "Success!", message: "Your answer was submitted successfully!" });
     $("#answerForm").find("input[type=text], textarea").val("");
     $("#conversation").hide().html(data).fadeIn('fast');
  } 

See the expression ".html(data)"??? Where is "data" being declared? The code above will never work. Now, look at the lines below. Particularly the first one. See my change?

  success: function(data) {  
     $.growl({ title: "Success!", message: "Your answer was submitted successfully!" });
     $("#answerForm").find("input[type=text], textarea").val("");
     $("#conversation").hide().html(data).fadeIn('fast');
  } 

Once you make this change, you need to use a debugger (chrome's or otherwise) to examine that what's coming back from your ajax call (which we don't have here) is what you need. But first, fix the bug.

Good luck.

Answer 2

jQuery .load() method ( http://api.jquery.com/load/ ) can fetch and update single block from webpage. It will reload whole webpage in background, so some overhead is generated..

Change your ajax success to something like below:

success: function() {  
  $.growl({ title: "Success!", message: "Your answer was submitted successfully!" });

  $("#conversation").load("config/accountActions.php #conversation >*");
}

This should load your conversation block and all it's childs and replace current(old) conversation block.