$(document).ready() and partial view load

Question

I am developing an application using Asp.net mvc and jquery. I'd like to use the same naming convention (classes and ids) for html elements in different views.

In case when I want to load a partial view asynchronously, the $(document).ready() piece of code in the main view loses its usefulness because none of the patial view's html tags and css naming is recognized by jquery. I certainly do not want to write the same code for every view. What's th ebest way to solve this issue?

Answer 1

You can use .live() for this, for example:

$(".myClass").click(function() { });

Becomes this:

$(".myClass").live('click', function() { });

.live() works in a different way. .click() binds to the elements the selector matched when it ran, usually document.ready. .live() works by living at the DOM root, listening for events to bubble and executing the handler if the event that bubble's target matches the selector.

Answer 2

I personally just load all the content using my own wrappers around $.post, and initiallize content there as needed. This also helps to unify handling errors, waiting notifications, etc.

Third-party libraries usually provide a way to pre-process ajax-loaded content, too.

Partial views won't call document.ready, but they will evaluate scripts inside script tags in head, so that's how you can force invocation of partial view specific scripts.

Another way that I use is custom html tags on forms. E.g.

<form custom-setup="MyCustomSetupFunc">

and my $.post handler will check for this tag and call this function, passing the form instance. This helps to narrow the scope of the script when partial is loaded (useful when several instances of partial can be loaded on same page).