Question

I have a page on which I’m using jQuery UI Tabs, what I’m doing is loading the content of each tabs via Ajax, but the problem I’m having is that, in the content of my tabs, the buttons (I’m using jQuery ui button) lose all their jquery ui classes, meaning:

When the page loads for the first time, my buttons look like this:

<button class="my_button ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only">
<span class="ui-button-icon-primary ui-icon ui-icon-plusthick"></span>
</button>

As you can see, my buttons have all the jquery-ui classes ui-button, ui-widget, etc.... Also, my buttons have a span which displays a plus(+) sign as a label for my buttons. Therefore, my buttons display correctly.

But when I load the same content (which contains the same buttons) via Ajax, my buttons become like this:

<button class="my_button"></button>

As you can see, I lose all the jQuery ui classes of my button. Therefore, the button is not styled

How can I fix this?

NOTE : Please note that I did not manually add those jquery-ui classes to my buttons in my HTML. When you initialize the buttons using $(".my_button").button(); in jQuery, jQuery automatically applies all the necessary jquery-ui classes to my button appropriately. So please don’t tell me it’s because I didn’t not assign the jquery-ui classes to my buttons upfront (I should not have to). Also, I tried .live(), .delegate(), none of those work.

Please help me with this anyone

Thank you

Answer 1

I’ve faced this problem once and solved this problem using the document.ready call like

function myreadyFunc(){
    $(".my_button").button();
    // Other codes
}

I had my document.ready like following

$(document).ready(function(){
    myreadyFunc();
});

After each ajax (success) call I used to call

myreadyFunc();

Hope this will help you too. I used this approach to execute document.ready’s code that was not possible by calling document.ready after each ajax call.