jQuery functionality disappear in ASP.NET MVC partial view

Question

I have a asp.net MVC partial view, inside it jQuery is used to popup a datepicker for a textbox. A cancel button using Ajax to reload the partial view when it is clicked. All work well in the first load. But after the cancel button is clicked, all the jQuery functionality disappear, for example the datepicker stop showing up for the textbox. Any idea what could be wrong with it?

If you have event listeners on specific ID's (not on event handlers), when you reload the partial view, you're probably wiping out those listeners. Post some code so we see how you're setting everything up. — David Hoerster
– David Hoerster, Commented Jul 25, 2012 at 15:40
I have the following script in the partial view: <script type="text/javascript"> jQuery(document).ready(function () { jQuery('.datepicker').datepicker({ dateFormat: "mm/dd/yy", minDate: 0 }); }); </script> — xiaobing
– xiaobing, Commented Jul 25, 2012 at 23:23

NullReference · Accepted Answer · 2012-07-25 15:50:51Z

1

If you're doing any updates to the partial view via ajax any events bound using jquery will need to be rebound or bind them using jquery live, or jquery on for 1.7+

$(document).on(events, selector, data, handler);        // jQuery 1.7+

answered Jul 25, 2012 at 15:50

NullReference

4,49414 gold badges59 silver badges91 bronze badges

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

2 Comments

xiaobing Over a year ago

I put the events binding inside the partial view $(document).ready function. I assumed that runs every time the partial view updated via ajax, am I wrong?

NullReference Over a year ago

@user1552107 $(document).ready doesn't get executed after an ajax update. There are many different ways to fix this the the easiest is to use the jquery live binding so that after an ajax update you events aren't lost

Colin Mackay · Accepted Answer · 2012-07-25 15:48:19Z

0

When you reload your partial view any handlers on the elements in the old (now replaced) partial will have been lost. You have to rebind them to get the functionality back.

A script block at the end of your partial that binds the handlers would work. Or the code that handles the AJAX success or complete call back can rebind them if you prefer.

answered Jul 25, 2012 at 15:48

Colin Mackay

19.3k8 gold badges66 silver badges91 bronze badges

Collectives™ on Stack Overflow

jQuery functionality disappear in ASP.NET MVC partial view

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related