Question

我有一个自举模式。我用＃data-target称呼它。我遇到的问题是我想在模块中填写我从数据库中获取的反馈列表中的项目的详细信息。我希望它是动态的，因此它显示了从循环中单击的任何项目的数据。我是js的新手，并不知道如何处理它。这是我的反馈代码：

<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调用以通过$feedback->content

检索id

从链接中删除data-target和data-toggle属性

向链接
添加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-＆gt; subject和$ feedback-＆gt;内容到模态弹出窗口。

请尝试以下代码，根据 [Laravel]

将主题和内容字段显示在模型中

1）{{$ feedback-＆gt; subject}}

2）{{$ feedback-＆gt; content}}

<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

如何在单击按钮时创建模态接受数据？

3 个答案: