顯示使用Ajax和jQuery

Question

我使用Laravel新數據，我有以下數據視圖

<div class="content-inside-main"> 
     <div class="content-inside" id="content-inside-feedback"> 
      <div class="row header-content space-div"> 
       <div class="col-lg-1"><h5>#</h5></div> 
       <div class="col-lg-1"><h5>Member Id</h5></div> 
       <div class="col-lg-4"><h5>Question</h5></div> 
       <div class="col-lg-4"><h5>Reply</h5></div> 
       <div class="col-lg-1"><h5>Replied by</h5></div> 
       <div class="col-lg-1"><h5>Options</h5></div> 
      </div> 
      <div> 
       <hr class="line-div"/> 
      </div> 

      <?php 
      $questions= \App\Question::all(); 
      ?> 

      <?php 
      foreach ($questions as $question): 
      $id = $question->id; 
      $member_id = $question->user_id; 
      $body = $question->message; 
      $status=$question->replied; 
      $reply=$question->reply; 
      $user_id=$question->replied_id; 

      $member=\App\Member::find($member_id); 
      $m_id=$member->id; 
      $m_name=$member->nick_name; 
      $m_reg_time=$member->reg_time; 
      $m_unreg_time=$member->unreg_time; 
      $m_status=$member->unreg; 
      $m_group_id=$member->group; 

      $group=\App\Group::find($m_group_id); 
      $m_group_name=$group->name; 

      if($id != NULL) { 
      ?> 

      <div class="row content-messages" > 
       <input type="hidden" id="count" value="{{$id}}"/> 
       <div class="col-lg-1"><?php echo $id; ?></div> 
       <div class="col-lg-1"><?php echo $member_id; ?></div> 
       <div class="col-lg-4"><?php echo $body; ?></div> 
       <div class="col-lg-4"> 
        <?php 
        if($status == 0){ 
        ?> 
        <div class="according-form-container" id="reply-feedback-form_<?php echo $id; ?>"> 
         <a class="btn-link show-add-form-div" data-toggle="collapse" data-parent="#reply-feedback-form_<?php echo $id; ?>" href="#reply-feedback-form_content_<?php echo $id; ?>" > 
          Reply 
         </a> 

         <div id="reply-feedback-form_content_<?php echo $id; ?>" class="collapse collapse-add-form"> 

          <form class="form" id="reply-feedback_<?php echo $id; ?>" enctype="multipart/form-data" method="post" action="addreply"> 
           {{csrf_field()}} 
           <div class="control-group"> 
            <label class="control-label" for="description">Message: </label> 
            <div class="controls"> 
             <input type="hidden" name="id" id="id" value="{{$id}}"/> 
             <input type="hidden" name="member_id" id="member_id" value="{{$member_id}}"/> 
             <input type="hidden" name="user_id" id="user_id" value="{{Auth::id()}}"/> 
             <textarea name="description" id="feedback-message_<?php echo $id; ?>" class="input-block-level" required></textarea> 
             <br/><br/> 
             <button id="submitfeedback_<?php echo $id . '_' . $member_id; ?>" type="submit" class="btn feedback-reply-submit-btn">Send</button> 
            </div> 
           </div> 

          </form> 
          <div id='preview_feedback_<?php echo $id; ?>'> 
          </div> 

         </div> 
        </div> 

        <?php 
        } else {?> 
        <div class="col-lg-4">{{$reply}}</div> 
        <?php 
        } 
        ?> 

       </div> 
       <div class="col-lg-1"> 
        <?php 
        if($user_id != null){ 
         $user_name= DB::table('admin')->where('id',$user_id)->value('name'); 
         echo $user_name; 

        }else { 
         echo 'None'; 
        } 
        ?> 
       </div> 
       <div class="col-lg-1"> 
        <button id="view_member" name="view_member" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#view_memeber" 
          >View 
        </button> 
       </div> 
      </div> 
      <hr class="line-div" /> 
      <?php 
      } 
      endforeach; 
      ?> 
      <div id="show"></div> 
     <div class="text-center navigation-paginator" id="paginator" > 
     </div> 
    </div> 

我還有一個application.It填充問題表anytime.I想做的事。如果問題表有新的記錄，在不刷新的情況下在本頁面顯示它們。

像下面的截圖：

before

after

Answer 1

你可以定期發送Ajax調用，然後比較你已經添加的新值的數據結果。這可能是沿着這條路線的東西：

function query() { 
    $.ajax({ 
    url: 'your/url', 
    success: function(data) { 
     var loadedValues = JSON.parse(data).values; 
     // Iterate only in the new values 
     for(i = existingValues.length; i < loadedValues.length; i++) { 
     $("#content-inside-feedback").append(/*HTML you want to add*/); 
     } 
    } 
    }); 
    setTimeout(executeQuery, 5000); 
} 

$(document).ready(function() { 
    // First call, then it will be called periodically 
    setTimeout(query, 5000); 
});