Why does the jquery UI doesn't work for the checkbox?

Question

Here is the demo link : http://cistrome.org/cps/sequences?did=2653&Gene_box=&region_select=proximal&distance_nearest_bp_number=5000&distance_further_bp_number=0&displaygenes=genesymbol&extend_bp_number=200&repeat_bp_number=150 :

When you first enter the page, the checkbox looks like this: The style is broken and it's not clickable.

Only when you refresh the page , the checkbox looks normal like this: It's clickable now.

This is reproducible on Firefox15.0.1. ( If it works for you in the first time, you can click the blue button Find binding sites . And then you may see the broken checkbox.. )

I'm just wondering that why it's broken when you get in the page for the first time, but restores normal when the page is refreshed. I use firebugs to debug the javascript code but it only says:

TypeError: $("#radio_tss").buttonset is not a function
[Break On This Error]   

$("#radio_tss").buttonset();

Which makes me confused..

The jquery UI reference of checkbox can be seen here:

http://jqueryui.com/demos/button/#radio

Does anyone have ideas about what happens to this checkbox?

Thanks!

Answer 1

Your insertion of dynamic <script> tags in the mygene module to load jQuery UI will default to async execution, sometimes allowing your call to .buttonset() to proceed before jQuery UI has actually completed loading.

On the second load the file is already in the browser cache, making the problem less likely.