Html response from Jquery not working with javascript

Question

I have find a lot of posts similar to this question but I don't think I'm doing it wrong since I'm not putting javascript in the response of the ajax call.

Basically the ajax returns pure html that is put inside a div. This div is inside my page and the page already contains references to css and javascript files.

In one of those javascript files I try to render the buttons returned by the ajax call to look nice with a jquery ui function so basically what I do is this

$(".ButtonClass").button();

This piece of code is in the document.ready function, and the html returned by ajax includes the "ButtonClass" for all the buttons.

The .button() works for a button outside the returned ajax html, but it does not work for elements returned by the ajax call.

I think it should work because css styles are applied to the results but I cannot get any function to work with the results, i repeat I don't return javascript code I have this code in an external file which is referenced in the whole page.

Answer 1

If you want to enable buttons for elements returned by the AJAX request, you should execute it again when receiving the response.

.button() is executed on the elements that have been selected at the time it was called - which does not include the AJAX ones when called before the AJAX request was made.

Please do note that $(".ButtonClass") will also include previous .ButtonClass elements, so they will be converted to buttons twice. You'd have to select only the ones from the AJAX response.

Answer 2

Try calling

$(".ButtonClass").button();

In ajax callback.

Answer 3

I think you need to apply your decorator function when the ajax call has been succesfully terminated. Something along this lines:

$('#myelement').load('script.php', function() {

   // Now the page has some more button to decorate:
   $(".ButtonClass .ugly").button().removeClass('ugly'); 

});

As you may see I added a "ugly" class to the new buttons, so to not re-beautify the already beatiful buttons present :)

Answer 4

The .button() function must be called every time new markup is introduced in the page that should be a button. You do this correctly on .ready(), but you should also do it on the success function of the ajax call.

Answer 5

You will have to initialize these buttons after you populate your div.

If your div is stored in, for instance, a javascript variable called $container , then run the code $('.ButtonClass',$container).button() after you have added this content to your page.

Answer 6

in your callback for the ajax, do this $(".ButtonClass").button(); again.