Laravel - How to clear bootstrap modal which opens remote view

Question

In one of my views, I have the following html to populate a table with data from the database (passed from the view controller), and include a button on each row which opens up a pop-up modal with more information about the item like so.

My 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

The problem is that I do not know how to clear the modal content when the modal is closed. Therefore, unless the user refreshes the page, after the user clicks to view more information for one item, the same data is always displayed in the modal. I have tried the following javascripts but they do not seem to work.

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

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

I am using Laravel's resource controller. Here is my "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>

Here is my 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: Fixed by following Nikolas's solutions but using this script to clear:

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

Answer 1

Try this:

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

UPDATE

Try adding this in your modal. Like so:

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

Also try moving the modal div so it is outside any elements with special positioning. One good place might be just before the closing body tag </body>

UPDATE 2 Try creating another yield for modals in your app.blade.php and in your index.blade.php add this:

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

Also add bootstrap.js in your app.blade.php