如何在模态上发送数据并在 foreach 上使用它

Question

我敢打赌那是不可能的，但我想问问...

我在 blade/laravel/bootstrap4 页面上，我想用按钮上下文中的一些数据打开模态框，但我不明白如何填充模态框。

我的按钮是这样的：

@foreach($workflows as $workflowId => $tasks)
                                <button type="button"
                                        class="btn btn-primary bottoneblu"
                                        data-toggle="modal"
                                        data-target="#exampleModal"
                                        data-title="{{$workflowId}}"
                                        data-tasks="{{json_encode($tasks)}}">

                                </button>
@endforeach

然后 jquery 实现目标：

$(document).ready(function(e) {
                $('#exampleModal').on('show.bs.modal', function (event) {
                    var button = $(event.relatedTarget) // Button that triggered the modal

                    var title = button.data('title')
                    var tasks = button.data('tasks')

                    var modal = $(this)
                    modal.find('.modal-title').text('Workflow numero: ' + title)
                })
            });

相关的模态应该是这样的：

  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                       @foreach (json_decode($tasks as $task)
                                {{$task->something}}
                       @endforeach
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

标题部分还没有工作，如果可能的话我不太清楚，是传递“$tasks”并使用它，没有表单或通过 http 重定向或在按钮上添加一打 data-something部分。即使因为任务可以是 1 个或多个...所以我无法逐个字段地在按钮上填充它。

Answer 1

不要在模态模板中评估任务 json 对象，而是在 show.bs.modal 事件处理程序中。

删除这部分：

@foreach (json_decode($tasks as $task)
  {{$task->something}}
@endforeach

并将其添加到您的事件处理程序中：

$.each(tasks, function() {
    modal.find('.modal-body').append( this.something );
});

如何在模态上发送数据并在 foreach 上使用它

how to send data on a modal and use it on foreach

jquery

laravel

bootstrap-modal

laravel-blade

bootstrap-4