javascript - Laravel - 如何清除打开远程 View 的引导模式

Question

在我的一个 View 中，我有以下 html 来用数据库中的数据(从 View Controller 传递)填充一个表，并在每一行上包含一个按钮，该按钮打开一个弹出模式，其中包含有关的更多信息项目是这样的。

我的 index.blade.php:

@extends('layouts.app')

@section('style')
<style>
.panel-pagination {
    margin: 0 0 !important;
}

.panel-container {
    padding-right: 0 !important;
    padding-left: 0 !important;
    height:35px;
}

.abc {
    height:35px;
    display:table-cell !important;
    vertical-align:middle;
}

.link-btn,
.link-btn:visited,
.link-btn:link,
.link-btn:active {
    color: #3196D6;
    background: #fff;
    padding: 10px 20px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
}

.link-btn:hover {
    background: #E7E7E7;
}
</style>
@endsection

@section('content')
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="panel-container">
                <div class="col-xs-12 col-sm-6 col-lg-8 text-left">
                    <h4 class="panel-title abc">
                        <i class="glyphicon glyphicon-hdd"></i>
                        Machine Configurator
                    </h4>
                </div>
                <-- some html stuff -->
            </div>
        </div>
        <div class="panel-body">
            <table class="table table-striped table-bordered" id="machineTable">
                <thead>

                    <-- some table header stuff -->

                </thead>
                <tbody>
                @foreach($machines as $key => $value)
                    <tr>
                        <td>{{ $value->machineName }}</td>
                        <td>{{ $value->departmentName }}</td>
                        <td>{{ $value->partName }} {{ $value->partRevision }}</td>
                        <td>{{ $value->productionStatus }}</td>
                        <td>
                            <a class="btn btn-small btn-success" href="{{ URL::to('machine/' . $value->machineId) }}"
                                data-toggle="modal" 
                                data-target="#showMachinePopupModal">
                                <!-- Info -->
                                 <i class="glyphicon glyphicon-info-sign"></i> 
                            </a>

                            <-- some more buttons -->

                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
<div id="showMachinePopupModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
$(document).ready(function() {
   $("#showMachinePopupModal").on("hidden.bs.modal", function() {
       $("#showMachinePopupModal .modal-content").empty();
   });
});
</script>
@endsection

问题是我不知道如何在模态关闭时清除模态内容。因此，除非用户刷新页面，否则当用户点击查看某个item的更多信息后，modal中始终显示相同的数据。我尝试了以下 javascript，但它们似乎不起作用。

$('#showMachinePopupModal').on('hidden.bs.modal', function () {
    $('.modal-content').html("");
});

$('#showMachinePopupModal').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

我正在使用 Laravel 的资源 Controller 。这是我的“show.blade.php”

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">X</button>
    <h2 class="modal-title text-center">#{{ $machine->machineId }} - {{ $machine->machineName }}</h2>
</div>
<div class="modal-body">
    <p>
        <strong>Type:</strong> {{ $machine->machineType }}<br>
        <strong>Department:</strong> {{ $machine->departmentName }}<br>
        <strong>Production Status:</strong> {{ $machine->productionStatus }}<br>
        <strong>Quality Status:</strong> {{ $machine->qualityStatus }}<br>
        <strong>Part Loaded:</strong> {{ $machine->partName }} {{ $machine->partRevision }}<br>
        <strong>Last Updated:</strong> {{ $machine->updatedAt }}<br>
    </p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>

这是我的 app.blade.php

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'SEI-MQE') }}</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
        crossorigin="anonymous"> 
    <!-- <link href="{{ asset('css/app.css') }}" rel="stylesheet">   -->
    @yield('style')
</head>

<body>

    @include('include.navigationBar')

    @include('include.flashMessage')

    @yield('content')

    @yield('modal')

    <!-- Scripts -->
    <!-- <script src="{{ asset('js/app.js') }}"></script>  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
    @yield('script')
</body>

</html>

解决方案:通过遵循 Nikolas 的解决方案但使用此脚本清除来修复:

$(document).ready(function() {
    $('#showMachinePopupModal').on('hidden.bs.modal', function () {
        $(this).removeData();
    });
});

Answer 1

试试这个:

$(document).ready(function() {
   $("#showMachinePopupModal").on("hidden.bs.modal", function() {
       $("#showMachinePopupModal .modal-content").empty();
   });
});

更新

尝试在您的模式中添加它。像这样:

<div id="showMachinePopupModal" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">

也尝试移动模态 div，使其位于任何具有特殊定位的元素之外。一个好的地方可能就在结束的 body 标签之前 </body>

更新 2尝试在 app.blade.php 和 index.blade.php 中为模态创建另一个 yield 添加:

@section('modal-forms')
    PUT YOUR MODAL HERE
@stop

同时在你的 app.blade.php 中添加 bootstrap.js