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

See more:

bootstrap

ASP.NET5

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