1

I have a View with the following layout enter image description here

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

Improve this question
9
  • What happens when you debug JavaScript? Does for example $('#myModal form') return any items? Commented Jul 3, 2014 at 14:43
  • @DavidTansey, I just tried to move the scripts to the partial but i get the error "$ is undefined" in the firebug console Commented Jul 3, 2014 at 14:44
  • @AlexeiLevenkov, that event never gets executed :( Commented Jul 3, 2014 at 14:46
  • thanks @KyleGobel, let me ask. It is not supposed that jquery is already available in the ParentView? All scripts there works fine. Commented Jul 3, 2014 at 14:49
  • @AlexeiLevenkov, i edited the question, please review Commented Jul 3, 2014 at 15:22

2 Answers 2

Reset to default
6

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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Ehsan, that worked!, This is a step forward, please what about the events, there is something else i have to do?
@Elio.Batista: anything and everything that needs to be initialized on something in the partial view (event handlers, etc.) must go in the call back. Otherwise, the actual elements you're trying to bind to don't exist yet.
@ChrisPratt, your comment complements this answer.
Events can be written in main view but you have to write delegated event
True, but you have to be careful with delegated events. They should be used sparingly and the element you bind to should be as close as possible in the DOM to the element generating the event: e.g., #myModel is good, document would be very bad.
|
1

If they are being loaded in by ajax you may need to give more context to your selectors.

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

7 Comments

Your suggested sample is identical to OP version... not sure what exactly your suggestion is... Plus ID selector is already very specific since IDs are unique in valid HTML (and for invalid HTML one should not have any expectations for behavior of scripts/browser).
The selector '#myModal form' will not contain any form element inside #myModal that is added later.
+1. I see what you mean now... indeed your code makes sense, should not have read text you've added - sorry. (Clearly as "give more context" you mean "add filters for on call because form may be inserted later").
@AlexeiLevenkov no worries, you're just trying to help.
@Elio.Batista I'd try just having one of those partials loaded into the page normally with razor on page build and see if it works. If it does you'll have to see what's different about what you're loading in via ajax.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.