Getting "CSS & jQuery UI" after -> jQuery load (ajax)

I have a page with jQuery UI, working fine. Within this page I change the content of some div containers with jquery.load(), works fine too. But if the content which I load uses jQuery UI by itself (to show a ac开发者_开发技巧cordion or a dialog as an example), I need to load the jQuery .js files and the css file again in the div container. Else it won't work :(

What can I do to not load the files again AND having a working ui-dialog, ui-accordion, ui-buttons, ... in the reloaded div?

Hope you understand what I wanted to tell :)

jQuery UI relies on the jQuery framework. You cannot have jQuery UI embedded in a page without having jQuery itself as well.

when you use jquery ui buttons for example you initialize them trough a certain call like this:

$( ".button" ).button({ parameters });

now, lets say you load a big piece of your page trough ajax load, jquery.load() or any other means (for all i know you could be manually creating new DOM nodes on the fly after certain button clicks)

the only thing you would do here is wrap your piece of code in a function

function initializeButtons(container){
    container = (typeof(container)==="undefined") ? $('body') : container;
    $( '.button', container ).button({ parameters });
}

and wherever you have an ajax load you can call this function in your callback. like so:

$('#mydiv').load("/mypath/mydata.html", function(){
    // content is loaded, now init the buttons
    initializeButtons($('#mydiv'));
});

now do the same with all elements of jquery ui you use, datepickers, accordions, buttons or other...

please keep in mind, that this is a very basic idea, for more flexibility you can add other features, in order not to initialize .button(); on the same element twice you could add some sort of test for that too, and many other things, but this is just the basic idea of it.