title: jQuery Javascript Modal Popup not working in MVC
body: <p>when I click on link "Comments" a modal popup opens up and shows content, therefore it does what it is supposed to. </p>
  
  <p>Going to my issue:
  In the first scenario, it happens what I want but some other code does not get implemented. In this case, I place the "@section" inside Index.cshtml and the modal popup is rendered in the middle of the page with some styling(which is what I want),  but the datatable and yadcf code above the @section does not seem to get executed(datatable filters not there for example).  I show this scenario in jpeg attached called "Wanted Modal Popup .
  <a href="https://i.stack.imgur.com/jsBrI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jsBrI.jpg" alt="enter image description here"></a></p>
  
  <p>On the other hand, in the second scenario, if I put the @section inside the "ViewAll" view the datatable works correctly, the modal popup come up as well, but it does appear like in the first scenario.  I show this second scenario in the jpeg called "Unwanted Modal Popup".
  <a href="https://i.stack.imgur.com/8aotj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8aotj.jpg" alt="enter image description here"></a></p>
  
  <p>I would like to leave the code in the ViewAll view(second scenario) as this is the one related to the modal popup.  Also, when I do that the attached error comes up.  I looked the error up and it seems there may be some incompatibility?  If so, why would it work on the index page then?
  <a href="https://i.stack.imgur.com/uRAuL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uRAuL.jpg" alt="enter image description here"></a></p>
  
  <p>Could you please help?  I spent lots of time trying to resolve the issue but was unsuccessful.</p>
  
  <p><strong>LAYOUT VIEW CODE:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
          &lt;html&gt;
          &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;@ViewBag.Title - My ASP.NET Application&lt;/title&gt;
          @Styles.Render("~/Content/css")
          @Scripts.Render("~/bundles/modernizr")
          &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 
          rel="stylesheet" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  @Html.ActionLink("Helpdesk Support", "Index", "Tickets", null, new { @class = "navbar-brand" })
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="container body-content"&gt;
          @RenderBody()
          &lt;hr /&gt;
          &lt;footer&gt;
              &lt;p&gt;&amp;copy; @DateTime.Now.Year - Nicola's Application&lt;/p&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  
  
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
  
      &lt;script src="~/Scripts/Scripts.js"&gt;&lt;/script&gt;
  
      @RenderSection("scripts", required: false)
      @RenderSection("scriptsKnowledge", required: false)
      @RenderSection("modalComments", required: false)
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>INDEX.CSHTML VIEW CODE:</strong></p>
  
  <pre><code>@{
      ViewBag.Title = "Index";
  }
  
  &lt;ul class="nav nav-tabs"&gt;
      &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#firstTab"&gt;View All&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="tab" href="#secondTab"&gt;Add New&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="tab" href="#thirdTab"&gt;Knowledge&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="tab" href="#fourthTab"&gt;IT Tasks&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tab-content"&gt;
      &lt;div id="firstTab" class="tab-pane fade in active"&gt;@Html.Action("ViewAll")&lt;/div&gt;
      &lt;div id="secondTab" class="tab-pane fade in"&gt;@Html.Action("AddOrEdit")&lt;/div&gt;
      &lt;div id="thirdTab" class="tab-pane fade in"&gt;@Html.Action("ViewAllKnowledge")&lt;/div&gt;
      &lt;div id="fourthTab" class="tab-pane fade in"&gt;@Html.Action("ViewAllTasks")&lt;/div&gt;
  &lt;/div&gt;
  
  
  
  @*jQuery Datatable CSS*@
  &lt;link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;                @*for the visual style of the datepicker of the dtLastUpdated column*@
  &lt;link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css"&gt;    @*For column reorder functionality*@
  &lt;link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css"&gt;    @*For column reorder functionality*@
  
  
  @section scripts
  {
      @Scripts.Render("~/bundles/jqueryval")
  
      @*jQuery Datatable JS*@
      &lt;script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"&gt;&lt;/script&gt;
     &lt;script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;                                  
      &lt;script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"&gt;&lt;/script&gt;     
      &lt;script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"&gt;&lt;/script&gt;     
  
  
      &lt;script&gt;
          function activatejQueryTable() {
  
              var table = $('#ticketTable').DataTable({
                  rowReorder: { selector: 'tr' }, 
                  colReorder: true,               
                  "stateSave": true,              
                  "stateDuration": 0,             
                  "autoWidth": false,             
                  "columnDefs": [
                      { "width": "40px", "targets": 0, "visible": true },     
                      { "width": "150px", "targets": 1, "visible": true },    //dtLastUpdated
                      { "width": "250px", "targets": 2, "visible": true },    //vcSubject
                      { "width": "150px", "targets": 3, "visible": true },    //vcFrom
                      { "width": "53px", "targets": 4, "visible": true },     //vcPriority
                      { "width": "90px", "targets": 5, "visible": true },     //vcAssignedTo
                      { "width": "53px", "targets": 6, "visible": true },     //vcStatus
                      { "width": "90px", "targets": 7, "visible": true },     //vcRequestType
                      { "width": "90px", "targets": 8, "visible": true },     //vcLocation
                      { "width": "90px", "targets": 9, "visible": true },     //vcCategory
                      { "width": "90px", "targets": 10, "visible": true },    //dtAnticipatedCompletion
                      { "width": "50px", "targets": 11, "visible": true }     //edit and delete buttons
                  ],
  
                  //Create the dropdowns
                  responsive: true,
                 "bAutoWidth": false,            
                  initComplete: function () {
  
                      this.api().columns([4, 5, 6, 7, 8, 9]).every(function () {      //this is to put a dropdown just for some columns
                          var column = this;
  
                          var select = $('&lt;select class="myDropdown"&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;')
  
                              .appendTo($("#filters").find("th").eq(column.index()))
                              .on('change', function () {
                                  var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                  column.search(val ? '^' + val + '$' : '', true, false).draw();
                              })
                              .on('click', function (e) {
                                  e.stopPropagation();                                //this event handler catches the click and then prevents propagation. Without this, the sort of the column happens every time you click on the dropdown
                              });
  
                          column.data().unique().sort().each(function (d, j) {
                              $(select).append('&lt;option value="' + d + '"&gt;' + d + '&lt;/option&gt;')
                          });
                      });
                  }
                  //End of create dropdowns
              });
  
  
  
              //Datepicker for dtLastUpdated column, which has id="datepicker" and class="datepicker"
              $(".datepicker").datepicker({
                  maxDate: 0,
                  changeMonth: true,
                  changeYear: true,
                  dateFormat: 'mm/dd/yy',
                  onClose: function (selectedDate) {
                      table.draw();
                  }
              }).on("input change", function () {
  
                  filterGlobal();
              });
          }
          //});
  
  
          //Also part of Datepicker for dtLastUpdated column
          function filterGlobal() {
              $('#ticketTable').DataTable().search(
                  $(".datepicker").val()
              ).draw();
          }
  
  
  
          $(function () {
              activatejQueryTable();
          });     
  
      &lt;/script&gt;
  }
  
  
  
  @section scriptsKnowledge
          {
      &lt;script src="~/DataTables/datatables.js"&gt;&lt;/script&gt;
      @*&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.3/jquery.dataTables.yadcf.min.js" integrity="sha256-nX2mPo5tTUWsDUalF2TgsIn8mKkjzrkc/XMHbfpRfF0=" crossorigin="anonymous"&gt;&lt;/script&gt;*@
      &lt;script src="~/Yadcf/jquery.dataTables.yadcf.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          function yadcfTable() {
              var oTable;
              oTable = $('#knowledgeTable').DataTable({
                  stateSave: true
              });
  
              yadcf.init(oTable, [
                  { column_number: 0 }]);
          }
  
          $(function () {
              yadcfTable();
          });
      &lt;/script&gt;
  }
  
  
  
  @section modalComments
  {
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script type="text/javascript"&gt;
          function showComments() {
              $("#dialog").dialog({
                  autoOpen: false,
                  modal: true,
                  title: "View Details"
              });
              $("#ticketTable .details").click(function () {
                  var ticketNum = $(this).closest("tr").find("td").eq(0).html();
                  $.ajax({
                      type: "POST",
                      url: "/Tickets/ViewComments",
                      data: '{ticketNum: "' + ticketNum + '" }',
                      contentType: "application/json; charset=utf-8",
                      dataType: "html",
                      success: function (response) {
                          $('#dialog').html(response);
                          $('#dialog').dialog('open');
                      },
                      failure: function (response) {
                          alert(response.responseText);
                      },
                      error: function (response) {
                          alert(response.responseText);
                      }
                  });
              });
          };
  
          $(function () {
              showComments();
          });
      &lt;/script&gt;
  }
  </code></pre>
  
  <p><strong>VIEWALL.CSHTML VIEW CODE:</strong></p>
  
  <pre><code>@model IEnumerable&lt;HelpDeskSupport.Models.Ticket&gt;
  
  @{
      ViewBag.Title = "ViewAll";
      //Layout = null;
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  
  
  @section modalComments
      {
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script type="text/javascript"&gt;
          function showComments() {
              $("#dialog").dialog({
                  autoOpen: false,
                  modal: true,
                  title: "View Details"
              });
              $("#ticketTable .details").click(function () {
                  var ticketNum = $(this).closest("tr").find("td").eq(0).html();
                  $.ajax({
                      type: "POST",
                      url: "/Tickets/ViewComments",
                      data: '{ticketNum: "' + ticketNum + '" }',
                      contentType: "application/json; charset=utf-8",
                      dataType: "html",
                      success: function (response) {
                          $('#dialog').html(response);
                          $('#dialog').dialog('open');
                      },
                      failure: function (response) {
                          alert(response.responseText);
                      },
                      error: function (response) {
                          alert(response.responseText);
                      }
                  });
              });
          };
  
          $(function () {
              showComments();
          });
      &lt;/script&gt;
  }
  
  
  
  @*&lt;head&gt;*@
  @*&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;*@
  @*@Scripts.Render("~/bundles/jquery")*@
  @*&lt;script src="~/Scripts/jquery-3.4.1.js"&gt;&lt;/script&gt;*@
  @*&lt;script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;*@
  @*&lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;*@
  @*&lt;script type="text/javascript"&gt;
          $(function () {
              $("#dialog").dialog({
                  autoOpen: false,
                  modal: true,
                  title: "View Details"
              });
              $("#ticketTable .details").click(function () {
                  var ticketNum = $(this).closest("tr").find("td").eq(0).html();
                  $.ajax({
                      type: "POST",
                      url: "/Tickets/ViewComments",
                      data: '{ticketNum: "' + ticketNum + '" }',
                      contentType: "application/json; charset=utf-8",
                      dataType: "html",
                      success: function (response) {
                          $('#dialog').html(response);
                          $('#dialog').dialog('open');
                      },
                      failure: function (response) {
                          alert(response.responseText);
                      },
                      error: function (response) {
                          alert(response.responseText);
                      }
                  });
              });
          });
      &lt;/script&gt;*@
  @*&lt;/head&gt;*@
  
  
  
  @*&lt;input type="submit" value="Clear Filters" id="filterBtn" class="bg-info" onclick="cleanFilters()"&gt;*@
  &lt;button type="button" onclick="cleanFilters()" value="Clear Filters" id="filterBtn" class="btn btn-primary btn-sm"&gt;Clear Filters / Reset&lt;/button&gt;
  
  
  @*jQuery Datatable (and could also be for ThemeRoller*@
  &lt;table class="display table table-striped table-bordered" id="ticketTable" style="width:100%"&gt;
      &lt;thead&gt;
          &lt;tr id="filters"&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.iNumber)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.dtLastUpdated)
                  &lt;input type="text" id="datepicker" class="datepicker"&gt;    @*readonly="readonly"*@
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.vcSubject)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.vcFrom)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.vcPriority)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.vcAssignedTo)
              &lt;/th&gt;
              @*&lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.dtAssignedDate)
                  &lt;/th&gt;*@
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.vcStatus)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.vcRequestType)
              &lt;/th&gt;
              @*&lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.vcBody)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.dtDateSubmitted)
                  &lt;/th&gt;*@
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.vcLocation)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.vcCategory)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.dtAnticipatedCompletion)
              &lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
          @foreach (var item in Model)
          {
              &lt;tr&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.iNumber)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.dtLastUpdated)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.vcSubject)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.vcFrom)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.vcPriority)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.vcAssignedTo)
                  &lt;/td&gt;
                  @*&lt;td&gt;
                          @Html.DisplayFor(modelItem =&gt; item.dtAssignedDate)
                      &lt;/td&gt;*@
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.vcStatus)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.vcRequestType)
                  &lt;/td&gt;
                  @*&lt;td&gt;
                          @Html.DisplayFor(modelItem =&gt; item.vcBody)
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.DisplayFor(modelItem =&gt; item.dtDateSubmitted)
                      &lt;/td&gt;*@
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.vcLocation)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.vcCategory)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.dtAnticipatedCompletion)
                  &lt;/td&gt;
                  &lt;td&gt;
                     &lt;a class="btn btn-primary btn-sm" onclick="Edit('@Url.Action("EditOneRecord", "Tickets", new { id = item.iNumber })')"&gt;&lt;i class="fa fa-pencil fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;a class="btn btn-danger btn-sm" onclick="Delete('@Url.Action("Delete", "Tickets", new { id = item.iNumber })')"&gt;&lt;i class="fa fa-trash fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;a class="details" href="javascript:;"&gt;Comments&lt;/a&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          }
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;div id="dialog" style="display: none"&gt;
  &lt;/div&gt;
  </code></pre>