点击按钮时如何让模态接受数据？

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