jQuery ui css disappearing when elements loaded through ajax

Question

I have an element that I want update through ajax. The element is using jQuery ui buttonset function.

Now when I load the element with buttonset, the buttonset jQuery ui css no longer shows on the element.

I have tried using ON() but that didn't work either.

How can you have jQuery ui css with elements loading on the fly?

UPDATE:

Ok so I have an element with buttonset

$('#element').buttonset()

And an ajax call

$('.new_filter_button').click(function(){ // when a feature button is selected
    var serialize = $('#header_dropdown_make').serialize(); // takes all the values of the filter
    $.ajax({  
        type : 'POST',
        url  : 'http://localhost/ajax/new-filters.php', 
        data : serialize,
        success : function(data) {
            $("#new_results_toolbar").html(data);
        }
    }); 
});

The new new-filters.php will return the id element. It is replacing the old element with the new one on the fly in the DOM.

Can you add your code to jsfiddle? It is easier that way to see the issue. — Siva
– Siva, Commented Mar 27, 2014 at 0:27
Are you updating it or are you taking it out of the DOM and replacing it? If so, you need to restore all the proper CSS classes for it to retain its jQuery UI appearance. — Two-Bit Alchemist
– Two-Bit Alchemist, Commented Mar 27, 2014 at 0:33

fabiofl · Accepted Answer · 2014-03-27 00:37:51Z

1

I imagine the way you're doing this is removing the original markup and replacing with the new html via AJAX.

If that is true, what is happening is that the original $.button() "instance" is lost when you remove the element, and the new element loaded with AJAX was never passed to $.button().

I think you can fix this just by "re-linking" the updated element in the complete callback $.ajax provides.

answered Mar 27, 2014 at 0:37

fabiofl

3051 silver badge4 bronze badges

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

Collectives™ on Stack Overflow

jQuery ui css disappearing when elements loaded through ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related