jQuery Javascript Modal popup not working correctly

jwebster77
jwebster77 used Ask the Experts™
on
Hi, when I click on link "Comments" a modal popup opens up and shows content, therefore it does what it is supposed to.
 
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).  I show this scenario in jpeg attached called "Modal Popup Centered".

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 not get the rest of the functionalities(like being centered and the style).  I show this second scenario in the jpeg called "Modal Popup Not Centered".

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?

Could you please help?  I spent lots of time trying to resolve the issue but was unsuccessful.

THIS IS THE LAYOUT VIEW CODE:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Helpdesk Support", "Index", "Tickets", null, new { @class = "navbar-brand" })
            </div>
            
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Nicola's Application</p>
        </footer>
    </div>


    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")

    <script src="~/Scripts/Scripts.js"></script>

    @RenderSection("scripts", required: false)
    @RenderSection("scriptsKnowledge", required: false)
    @RenderSection("modalComments", required: false)

</body>

Open in new window



THIS IS THE INDEX.CSHTML CODE:
@{
    ViewBag.Title = "Index";
}

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#firstTab">View All</a></li>
    <li><a data-toggle="tab" href="#secondTab">Add New</a></li>
    <li><a data-toggle="tab" href="#thirdTab">Knowledge</a></li>
    <li><a data-toggle="tab" href="#fourthTab">IT Tasks</a></li>
</ul>

<div class="tab-content">
    <div id="firstTab" class="tab-pane fade in active">@Html.Action("ViewAll")</div>
    <div id="secondTab" class="tab-pane fade in">@Html.Action("AddOrEdit")</div>
    <div id="thirdTab" class="tab-pane fade in">@Html.Action("ViewAllKnowledge")</div>
    <div id="fourthTab" class="tab-pane fade in">@Html.Action("ViewAllTasks")</div>
</div>



@*jQuery Datatable CSS*@
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">                @*for the visual style of the datepicker of the dtLastUpdated column*@
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">    @*For column reorder functionality*@
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css">    @*For column reorder functionality*@


@section scripts
{
    @Scripts.Render("~/bundles/jqueryval")

    @*jQuery Datatable JS*@
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
   <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>                                  
    <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>     
    <script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>     


    <script>
        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 = $('<select class="myDropdown"><option value=""></option></select>')
                            
                            .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('<option value="' + d + '">' + d + '</option>')
                        });
                    });
                }
                //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();
        });     

    </script>
}



@section scriptsKnowledge
        {
    <script src="~/DataTables/datatables.js"></script>
    @*<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.3/jquery.dataTables.yadcf.min.js" integrity="sha256-nX2mPo5tTUWsDUalF2TgsIn8mKkjzrkc/XMHbfpRfF0=" crossorigin="anonymous"></script>*@
    <script src="~/Yadcf/jquery.dataTables.yadcf.js"></script>

    <script>
        function yadcfTable() {
            var oTable;
            oTable = $('#knowledgeTable').DataTable({
                stateSave: true
            });

            yadcf.init(oTable, [
                { column_number: 0 }]);
        }

        $(function () {
            yadcfTable();
        });
    </script>
}



@section modalComments
{
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        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();
        });
    </script>
}

Open in new window



VIEWALL VIEW CODE:
@model IEnumerable<HelpDeskSupport.Models.Ticket>

@{
    ViewBag.Title = "ViewAll";
    //Layout = null;
    Layout = "~/Views/Shared/_Layout.cshtml";
}


@section modalComments
    {
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        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();
        });
    </script>
}



@*<head>*@
@*<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>*@
@*@Scripts.Render("~/bundles/jquery")*@
@*<script src="~/Scripts/jquery-3.4.1.js"></script>*@
@*<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>*@
@*<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />*@
@*<script type="text/javascript">
        $(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);
                    }
                });
            });
        });
    </script>*@
@*</head>*@



@*<input type="submit" value="Clear Filters" id="filterBtn" class="bg-info" onclick="cleanFilters()">*@
<button type="button" onclick="cleanFilters()" value="Clear Filters" id="filterBtn" class="btn btn-primary btn-sm">Clear Filters / Reset</button>


@*jQuery Datatable (and could also be for ThemeRoller*@
<table class="display table table-striped table-bordered" id="ticketTable" style="width:100%">
    <thead>
        <tr id="filters">
            <th>
                @Html.DisplayNameFor(model => model.iNumber)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.dtLastUpdated)
                <input type="text" id="datepicker" class="datepicker">    @*readonly="readonly"*@
            </th>
            <th>
                @Html.DisplayNameFor(model => model.vcSubject)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.vcFrom)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.vcPriority)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.vcAssignedTo)
            </th>
            @*<th>
                    @Html.DisplayNameFor(model => model.dtAssignedDate)
                </th>*@
            <th>
                @Html.DisplayNameFor(model => model.vcStatus)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.vcRequestType)
            </th>
            @*<th>
                    @Html.DisplayNameFor(model => model.vcBody)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.dtDateSubmitted)
                </th>*@
            <th>
                @Html.DisplayNameFor(model => model.vcLocation)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.vcCategory)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.dtAnticipatedCompletion)
            </th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.iNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.dtLastUpdated)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.vcSubject)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.vcFrom)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.vcPriority)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.vcAssignedTo)
                </td>
                @*<td>
                        @Html.DisplayFor(modelItem => item.dtAssignedDate)
                    </td>*@
                <td>
                    @Html.DisplayFor(modelItem => item.vcStatus)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.vcRequestType)
                </td>
                @*<td>
                        @Html.DisplayFor(modelItem => item.vcBody)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.dtDateSubmitted)
                    </td>*@
                <td>
                    @Html.DisplayFor(modelItem => item.vcLocation)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.vcCategory)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.dtAnticipatedCompletion)
                </td>
                <td>
                   <a class="btn btn-primary btn-sm" onclick="Edit('@Url.Action("EditOneRecord", "Tickets", new { id = item.iNumber })')"><i class="fa fa-pencil fa-lg"></i></a>
                    <a class="btn btn-danger btn-sm" onclick="Delete('@Url.Action("Delete", "Tickets", new { id = item.iNumber })')"><i class="fa fa-trash fa-lg"></i></a>
                    <a class="details" href="javascript:;">Comments</a>
                </td>
            </tr>
        }
    </tbody>
</table>

<div id="dialog" style="display: none">
</div>

Open in new window


Modal-Popup-Centered.JPGModal-Popup-Not-Centered.JPGError I get on second scenario
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Ron MalmsteadInformation Services Manager

Commented:
Try downloading the jquery script files and host them locally.

Author

Commented:
I am not too experienced.  Could you please confirm the steps below are what I should take?

- Go to the webpages and save them as .js files to folder MyProject/MyProject/Scripts
- In Visual Studio, right-click on these files and "Include in Project"
- Include them in the view as so:
  <script src="~/Scripts/jquery.min.js"></script>
  <script src="~/Scripts/jquery-ui.js"></script>
  <script src="~/Scripts/jquery-3.4.1.js"></script>

Also, why would this work and not by linking directly to the webpage?  Thank you.

Author

Commented:
Hi, do you or anyone else has any comments please?  It would be highly appreciated as I feel lost with this.  Thank you very much.
Hi,

You have a lot of thing in your question..
I'm working with Yadcf and Datatables everyday

Per experience here are some recommendations

I don't recommend to put your filter in modal, first because this is not user freindly and may ne display well in mobile view.

My suggestion is to use only Yadcf for the filters, I do prefer using external way and I'm using it with the main datatables search box
https://yadcf-showcase.appspot.com/dom_source_externally_triggered.html

Try to filter a column at the time, there are some settings that need to be set in order to make this work, for example if you have html with your data,
for date, number anything that is not just word need some extra configuration.

Make sure you have Yadcf.js in your link and place it after datatables.js

Instead of using modal for extra info use + and show child
https://datatables.net/extensions/responsive/examples/child-rows/column-control.html
all way to display extra info (I do prefer using responsive )
you will find example here https://datatables.net/extensions/responsive/examples/

That will help you to prevent JS error to have everything on the same page without modal.
To fix your error you need jQuery(document).ready(function($) to use  jQuery object

here is an example
jQuery(document).ready(function($){
  //you can now use $ for your jQuery object
  var body = $( 'body' ); // this is an example use your code here
});

Open in new window

Thank you very much for your answers.  The problem was that I had 1.11.4 jquery-ui instead of a newer one.  I found out that Jquery 3.4.1 does not work with jquery 1.11.4 but it would with 1.12.0.  Thank you very much for your help.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial