Laravel-如何清除啓動模式，打開遠程視圖

在我的觀點之一，我有以下的HTML來填充表中的數據從數據庫（從視圖控制器傳遞），並在每行包括一個按鈕打開彈出窗口模式，提供有關該項目的更多信息。Laravel-如何清除啓動模式，打開遠程視圖

我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

的問題是，我不知道什麼時候該模式被關閉如何清除模式的內容。因此，除非用戶刷新頁面，否則在用戶單擊以查看一個項目的更多信息後，總是在模式中顯示相同的數據。我試過以下的javascripts，但他們似乎沒有工作。

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

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

我正在使用Laravel的資源控制器。這是我的「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>

SOLUTION：按照尼古拉的解決方案，但使用該腳本清除修正：

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

來源

2017-08-10 JonTan

試試這個：

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

UPDATE

嘗試添加此模式。像這樣：

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

也嘗試移動模態股利，所以它是在任何具有特殊定位的元素之外。一個很好的地方可能只是結束標記</body>

更新2 試着在你的app.blade.php並在index.blade.php添加此情態動詞創建另一個產量前：

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

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

來源

2017-08-10 23:07:59

不幸的是，這也沒有工作：\ – JonTan

如何顯示模態中的數據？ –

我正在使用Laravel的資源控制器的CRUD設計。所以視圖控制器的show（）函數將數據傳遞給「show.blade.php」。我將使用show.blade.php的代碼更新我的問題。 – JonTan

Laravel-如何清除啓動模式，打開遠程視圖

回答

相關問題