點擊按鈕時如何讓模態接受數據？

Question

我有一個引導模式。我使用＃data-target來調用它。我遇到的問題是我希望使用從數據庫中獲取的反饋列表中的項目的詳細信息填充模式。 我希望它是動態的，所以它顯示了從循環中點擊的任何項目的數據。我對js非常陌生，不知道如何處理它。這裏是我的反饋laravel代碼：

<div class="body"> 
         @if(count($feedbacks) > 0) 
         <ul class="basic-list"> 
          @forelse($feedbacks as $feedback) 
          <li>{{ $feedback->subject }} <a href="javascript:void(0);" data-toggle="modal" data-target="#defaultModal"><span class="pull-right label-info label">View</span></a></li> 
          @empty 
          <p class="text-danger">No Feedbacks Yet</p> 
          @endforelse 
         @endif 
         </ul> 
        </div> 

，這是模態：

<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title" id="defaultModalLabel">{{ $feedback->subject }}</h4> 
      </div> 
      <div class="modal-body">{{ $feedback->content }}</div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-link waves-effect">SAVE CHANGES</button> 
       <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button> 
      </div> 
     </div> 
    </div> 
</div> 

的模式，現在顯示的，但在單擊時沒有傳遞數據。

Answer 1

，如果你想避免多模態，而且還從數據庫中獲取數據，執行Ajax調用其id

1. 雷莫檢索$feedback->content從你的鏈接VE的data-target和data-toggle屬性
2. 添加class屬性和獨特id = {{$feedback->id}}到連桿

<div class="body"> 
@if(count($feedbacks) > 0) 
    <ul class="basic-list"> 
    @forelse($feedbacks as $feedback) 
     <li>{{ $feedback->subject }} <a href="#defaultModal" id="{{$feedback->id}}" class="feedback-open"><span class="pull-right label-info label">View</span></a></li> 
    @empty 
     <p class="text-danger">No Feedbacks Yet</p> 
    @endforelse 
    </ul 
@endif 
</div> 

創建接受的路由反饋ID作爲url參數

Route::get('/get-feedback-content/{feedback}', 'YourController@getFeedbackContent'); 

一下添加到YourController：

public function getFeedbackContent($feedback){ 
    //this assumes you have a feedback model, change as appropriate 
    $fb = FeedbackModel::find($feedback); 

    //return an feedback object as an array 
    return response()->json(array('feedback'=> $fb), 200); 
} 

使用jQuery腳本應該是這個樣子此：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 

    $(".feedback-open").click(function(){ 
     id = $(this).attr('id'); 
     getMessage(id); 
    }) 
    function getMessage(id){ 
     $.ajax({ 
     type:'GET', 
     url:'/getmsg/'+id, 
     data:'_token = <?php echo csrf_token() ?>', 
     success:function(data){ 
      $("#defaultModal .modal-title").html(data.feedback.subject); 
      $("#defaultModal .modal-body").html(data.feedback.content); 
      $('#defaultModal').modal('show'); 
     } 
     }); 
    } 
}); 
</script> 

Answer 2

我認爲你沒有在這兩個字段中顯示兩個字段，即$ feedback-> subject和$ feedback-> content到模態 popup。

請嘗試以下代碼以顯示主題和內容字段放入模型按 [Laravel]：

1）{{$反饋 - >受試者}}

2）{{$反饋 - >內容} }

<div class="body"> 
    @if(count($feedbacks) > 0) 
    <ul class="basic-list"> 
     @forelse($feedbacks as $feedback) 
     <li>{{ $feedback->subject }} <a href="javascript:void(0);" data-toggle="modal" data-target="#defaultModal_{{ $feedback->id }}"><span class="pull-right label-info label">View</span></a></li> 
     <div class="modal fade" id="defaultModal_{{ $feedback->id }}" tabindex="-1" role="dialog"> 
      <div class="modal-dialog" role="document"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <h4 class="modal-title" id="defaultModalLabel">{{ $feedback->subject }}</h4> 
        </div> 
        <div class="modal-body">{{ $feedback->content }}</div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-link waves-effect">SAVE CHANGES</button> 
         <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button> 
        </div> 
       </div> 
      </div> 
     </div> 
     @empty 
     <p class="text-danger">No Feedbacks Yet</p> 
     @endforelse 
    @endif 
    </ul> 
</div> 

希望這可以幫助你。

Answer 3

莫代爾必須爲每個數據唯一且您未使用{{}}呼應的數據，請看看下面的代碼：

<div class="body"> 
@if(count($feedbacks) > 0) 
<ul class="basic-list"> 
    @foreach($feedbacks as $key => $feedback) 
    <li> 
     {{ $feedback->subject }} 
     <a href="javascript:void(0);" data-toggle="modal" data- 
      target="#modal-{{$key}}"><span class="pull-right label-info label">View</span></a> 

     <div class="modal fade" id="modal-{{$key}}" tabindex="-1" role="dialog"> 
      <div class="modal-dialog" role="document"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <h4 class="modal-title" id="defaultModalLabel">{{$feedback->subject}} </h4> 
        </div> 
        <div class="modal-body"> {{$feedback->content}}</div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-link waves-effect">SAVE CHANGES</button> 
         <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button> 
        </div> 
       </div> 
      </div> 
     </div> 

    </li> 
    @endforeach 
</ul> 
@else 
<p class="text-danger">No Feedbacks Yet</p> 
@endif