Modal Popup will not show if i do ajax-based paging inside my WebGrid

Question

I am working on an asp.net mvc5 web application, and i am facing a problem as jquery is not loading if i do ajax paging inside my webgrid. I got the following.The main view which have the grid:-

    @model SkillManagement.Models.PagedList<SkillManagement.Models.Phone>
    @{
        ViewBag.Title = "Phone List";
    }

    <h1>Phone List</h1>
    <div class="well">
       @using (Html.BeginForm("index", null, FormMethod.Get))
        {

            <div style="margin-top:17px;">
                @{
                var grid = new WebGrid(
                            canPage: true,
                            rowsPerPage: Model.PageSize,
                            canSort: true,
                            ajaxUpdateContainerId: "grid");

                grid.Bind(Model.Content, rowCount: Model.TotalRecords, autoSortAndPage: false);
                grid.Pager(WebGridPagerModes.All);

                @grid.GetHtml(htmlAttributes: new { id = "grid" },   // id for ajaxUpdateContainerId parameter
                fillEmptyRows: false,
                tableStyle: "table table-bordered table-hover",
                mode: WebGridPagerModes.All,
                columns: grid.Columns(
                  grid.Column("PhoneId", "ID"),
                 //code goes here
                  grid.Column(header: "Action", canSort: false, style: "action",
                    format: @<text>
                       @Html.Raw("<a data-modal='' href='/phone/details/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Detail'> <span class='glyphicon glyphicon-search'> </span> </a>")
                       @Html.Raw("<a data-modal='' href='/phone/edit/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Edit'> <span class='glyphicon glyphicon-edit'> </span> </a>")
                       @Html.Raw("<a data-modal='' href='/phone/delete/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Delete'> <span class='glyphicon glyphicon-trash'> </span> </a>")
                    </text>)

                ));
                }


            </div>
        }
    </div>


    <!-- modal placeholder-->
    <div id='myModal' class='modal fade in'>
        <div class="modal-dialog">
            <div class="modal-content">
                <div id='myModalContent'></div>
            </div>
        </div>
    </div>
@section scripts{
    @Scripts.Render("~/scripts/appjs/phones.js")
}

and the _partial view which will be rendered as a modal popup:-

@model SkillManagementTDMGroup.Models.Phone

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 class="modal-title">Edit Phone</h3>
    </div>


    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(m=>m.PhoneId)

        <div class="modal-body">

           //code goes here...
            <input class="btn btn-primary" type="submit" value="Save" />
            <button class="btn btn-warning" data-dismiss="modal">Close</button>
        </div>
    }
    <script>
        $("form").removeData("validator");
        $("form").removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse("form");
    </script>

and here is the phones.js:-

$(function () {
        $.ajaxSetup({ cache: false });
        $("a[data-modal]").on("click", function (e) {
            $('#myModalContent').load(this.href, function () {
                $('#myModal').modal({
                    keyboard: true
                }, 'show');

                bindForm(this);
            });
            return false;
        });


    });

    function bindForm(dialog) {
        $('form', dialog).submit(function () {
            var isValid = true; // assume all OK
            $('form').validate(); // perform validation on the form
            $('input[type="text"]').each(function (index, item) { // could change selector to suit e.g $('input, textarea').each(..            
                if (!$(this).valid()) {
                    isValid = false; // signal errors
                    return false; // break out of loop   
                }
            })
            if (!isValid) {
                return false; // exit
            }
            $('#progress').show();
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        $('#myModal').modal('hide');
                        $('#progress').hide();
                        //location.reload();
                        alert(result.message);
                    } else {

                        $('#progress').hide();
                        $('#myModalContent').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        });
    }

now when i visit the main view the modal popup will work well, but if i do some paging inside the webgrid and i click to render the partial view as modal popup i will get the following exception :-

Unhandled exception at line 51, column 9 in http://localhost:58652/phone/edit/3

0x800a1391 - JavaScript runtime error: '$' is undefined

on the following Script section inside the partial view:-

<script>
            $("form").removeData("validator");
            $("form").removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse("form");
        </script>

Answer 1

This issue is fixed and worked fine for me....

"Modal Popup will not show if i do ajax-based paging inside my WebGrid"

OR

"When navigate to 2nd page and click on edit, delete or view it is displaying normal page instead of displaying it in modal pop up".

Change code in phones.js:

From

$("a[data-modal]").on("click", function (e) {

To

$(document).on("click","a[data-modal]", function (e) {

Enjoy coding................