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。

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

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（data）”???宣布“数据”在哪里？上面的代码永远不会起作用。现在，看看下面的行。特别是第一个。看到我的变化？

  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 >*");
}

这应该加载你的会话块及其所有孩子并替换当前（旧）会话块。

在ajax调用中使用jquery刷新div

2 个答案: