Why does jquery button take a second to refresh after updating a page using ajax

Question

when i refresh a part of a webpage that has a jquery ui button, it seems like I have to call:

$(":button").button();

again or it shows up as a regular button. Thats fine but when i do this, it still shows up as a regular button for a split second before converting to the styling of the jquery theme. is there anyway to avoid this as it looks a bit messy.

NOTE: i noticed that this is for anything that i am theming using jquery ui like autocomplete, button, etc. so its not button specific issue.

Answer 1

at what point do you widgetize the button? it seems to me like you are doing it a bit later then when you really want to do it.

also, can you try widgetizing the button before you add the DOM to your page.. it probably wont work, but worth a shot

so here is an example of what i said above:

function(data){ //so this is the success function which is called when your ajax comes back and you need to write that data to some part of the page.

  var $data = $(data); //create the dom for the new stuff but do not append into the page's dom yet!

  $data.find(":button").button()//widgetize the buttons now

  $("#page_of_the_page_to_be_updated").append($data); //update the page 

}

this might not work. but its worth a try.