Laravel - Wie bootstrap modal zu löschen, die Remote-Ansicht öffnet

Question

In einer meiner Ansichten habe ich die folgende HTML, um eine Tabelle mit Daten aus der Datenbank zu füllen (vom View-Controller übergeben), und eine Schaltfläche in jeder Zeile enthalten öffnet ein Pop-Up-Modal mit mehr Informationen über den Gegenstand.

Mein 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 

Das Problem ist, dass ich weiß nicht, wie der modalen Inhalt zu löschen, wenn die modalen geschlossen ist. Wenn der Benutzer die Seite nicht aktualisiert, werden nach dem Klicken auf weitere Informationen für ein Element die gleichen Daten immer im Modal angezeigt. Ich habe die folgenden Javascripts ausprobiert, aber sie scheinen nicht zu funktionieren.

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

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

Ich benutze Laravel Resource Controller. Hier ist meine "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> 

Hier ist meine 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> 

LÖSUNG: Fest von Nikolas Lösungen folgenden aber mit diesem Skript löschen:

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

Answer 1

Versuchen Sie folgendes:

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

UPDATE

Versuchen Sie, dies in Ihrem Modal hinzuzufügen. Wie so:

Versuchen Sie auch, das modale div so zu bewegen, dass es außerhalb irgendwelcher Elemente mit spezieller Positionierung ist. Ein guter Platz sein könnte kurz vor dem Schließkörper Tag </body>

UPDATE 2 Versuchen Sie eine andere Rendite für Modalverben in Ihrem app.blade.php erstellen und in Ihrem index.blade.php hinzufügen, um diesen:

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

Fügen Sie auch bootstrap.js in Ihrer app.blade.php