I am trying to implement bootstrap modal window when opening details. 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:
Quote:
modal is not a function
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:
@using jidloApp.Classes
@using jidloApp.Models
@model DispDisplayVM
@{
ViewBag.Title = "PartialDisplay";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- 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: true
});
}
</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? Should I download some new ajax libs?
What I have tried:
I tried to change priority for loading of scripts, but nothing helped