Asp.net MVC - error after second attempt on opening a modal window - ajax

Question

I am trying to implement bootstrap modal window when opening details. The modal window is open on ajax call. The problem is, I can only open it once. It opens with whole template, while it should not and during the second attempt I get error:
Uncaught error: modal is not a function
Then I get this error and can not open modal window any more.
Container for main view:
<div id="data-container">
#Html.Action("PartialDisplay", "Disp")
</div>
I display all data in partial view, so the controller looks like this:
public ActionResult Display()
{
return View();
}
public PartialViewResult PartialDisplay(int[] checkId)
{
if (checkId == null)
{
[my code]
return PartialView(viewModel);
}
details view:
#{
ViewBag.Title = "PartialDisplay";
Layout = null;
}
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Detail</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="modalContent">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>Nazev Jidla</th>
<th>Kategorie</th>
<th>Akce</th>
</tr>
</thead>
<tbody>
#foreach (Jidlo jidlo in Model.Jidlos)
{
<tr>
<td>
#Html.DisplayFor(modelItem => jidlo.name)
</td>
<td>
#Html.DisplayFor(modelItem => jidlo.Category.popis)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = jidlo.JidloID }) |
#Ajax.ActionLink("Details","Details", new { id = jidlo.JidloID }, new AjaxOptions(){ UpdateTargetId = "modalContent", InsertionMode = InsertionMode.Replace, OnBegin = "openModalWindow" }) |
#Html.ActionLink("Delete", "Delete", new { id = jidlo.JidloID }, new { onclick = "return confirm('opravdu smazat polozku " + jidlo.name + "?');" })
</td>
</tr>
}
</tbody>
</table>
<script type="text/javascript">
function openModalWindow() {
$('#myModal').modal("show");
}
</script>
Controller Action:
public ActionResult Details(int id = 0)
{
Jidlo jidlo = db.Jidlos.Find(id);
if (Request.IsAjaxRequest())
{
return PartialView(jidlo);
}
else {
return View(jidlo);
}
}
Layout scripts included:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="#Url.Content("~/Scripts/jquery-3.2.1.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.js")"></script>
What am I missing here? I tried to change priority for loading and couple more things like add jQuery.noConflict to script and still nothing.

Answer 1

Problem is loading jquery script twice
<script src="#Url.Content("~/Scripts/jquery-3.2.1.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.js")"></script>
That is correct.
Another this was removing the template markup in the details view.