Is there a way for MVC Partial View retrieved using jQuery to keep UI CSS Styling?

Question

Hi All,

I have an MVC 2 project, consisting of a MasterPageView a child View called Index and a number of PartialViews. The PartialViews are loaded into the Index View using the jQuery Ajax method $.get(....).

My problem is that I am styling the buttons using jQuery UI like:

$('button').button();

but I find that I need to do this on every PartialView. What I would like to do is define this once in the MasterPageView, but if I do this the styling is lost. I'm guessing this is because the styling is applied before the DOM is loaded, is this correct? Is there any way to implement this i.e. just define it on the MasterPageView?

Thanks for the help !

Answer 1

This should work fine. Are you making sure to put your button() calls inside document.ready()?

Answer 2

This wont work when objects are added to the DOM after the initial load. In those cases you should go for the new .live() syntax in jQuery :

$("button").live("load", function(){
    $(this).button();
});

It listens for new objects being added to the DOM and attaches an eventhandler to it..

Hope that helps!