在ajax調用中使用jQuery刷新div

Question

我有一個div，其中包含foreach，如下所示：

<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>

我也有一個表格可以輸入新的答案：

<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>

我正在通過ajax提交表單，並希望div #conversation每次用戶提交問題答案時刷新並重新加載。 現在，我有以下ajax代碼：

<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>

您會注意到我已經嘗試過$("#conversation").hide().html(data).fadeIn('fast'); 但它沒有成功完成這項工作。 它僅將通過ajax傳遞的信息重新加載到div中，而不是僅重新加載foreach。

如何刷新div或<?php foreach(); ?> <?php foreach(); ?>在成功函數中調用ajax？

Answer 1

米奇，我在看這部分：

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

參見表達式“ .html（數據）” ??? 在哪里聲明“數據”？ 上面的代碼將永遠無法工作。 現在，看下面幾行。 特別是第一個。 看到我的零錢嗎？

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

做出更改后，您需要使用調試器（chrome或其他工具）來檢查ajax調用返回的內容（我們這里沒有）。 但首先，修復該錯誤。

祝好運。

Answer 2

jQuery .load（）方法（ http://api.jquery.com/load/ ）可以從網頁中獲取和更新單個塊。 它將在后台重新加載整個網頁，因此會產生一些開銷。

將您的ajax成功更改為如下所示：

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

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

這應該加載您的對話塊及其所有子項，並替換當前（舊）對話塊。