Using jQuery with partial views in asp.net mvc 4

Question

I have a View with the following layout

The parent View is composed of several PartialViews as ilustrated in the picture. One of which is a list where each item has a corresponding Edit button which loads the item into another PartialView, but this is loaded via ajax into a modal dialog-bootstrap. This part works fine.

The problem I have is that no script or jquery event related to the controls of this modal gets executed. For example datepicker widget is never displayed, can not capture the change event of the dropdown, or capture the submit event for the form or the click event of Submit button. All the scripts are placed in the main View. for example this is the event handler for the modal submit:

$(function () {
            $('#myModal form').on('submit', function () {
                console.log("okk");
                clearErrors();
                $.post($(this).attr('action'), $(this).serialize(), function (data, status) {
                    $('#myModal').modal('hide');
                    $("#details").html(data);

                }).error(function (error, status, a, b) {                    
                    $('.modal-body p.body').html(error.responseText);
                });
                return false;
            });
        });

In my _Layout.cshtm I have included the necessary scripts (I think):

@Scripts.Render("~/js")
        @Scripts.Render("~/bundles/globalization")        
        @RenderSection("scripts", required: false)
    </div>
</body>

where "~/js" is:

bundles.Add(new ScriptBundle("~/js").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery-migrate-{version}.js",
                "~/Scripts/bootstrap.js",
                "~/Scripts/bootstrap-datepicker.js",
                "~/Scripts/jquery.validate.js",
                "~/scripts/jquery.validate.unobtrusive.js",
                "~/Scripts/jquery.validate.unobtrusive-custom-for-bootstrap.js",
                "~/Scripts/locales/bootstrap-datepicker.es.js"
                ));

What could be the problem with my scripts and jQuery for this dialog ? Indications from similar questions in the site have not worked for me so far.

I have tried to express as clearly as possible if something is not understood the code or the illustrations I'm all ears. Thank you

Answer 1

As Partial View is loaded via ajax you need to initialize datepicker after the html is rendered on page so you need to put datepicker initialization script in success function callback:

$.post($(this).attr('action'), $(this).serialize(), function (data, status) {
                    $('#myModal').modal('hide');
                    $("#details").html(data);
                    $("#textBoxID").datepicker(); //  initialize datepicker for partial view element here

                })

For events you can write delegated events to make them work,choose the closest element of the partial view, i am using container of partial in which you are appending partial view html:

For click event:

$("#details").on("click","#someButtonId",function(){

// write event code here

})

For more detials of on() you can see HERE

Answer 2

如果它们是由ajax加载的，则可能需要为选择器提供更多上下文。

$(document).on('submit', '#myModal form', function () { ...