When building a new learning module, we noticed that the “x” was missing from the jQuery UI dialog close button in the upper right corner of the title bar.

GARD Pro Not Registered

Screen Shot 2015-06-13 at 8.30.02 AM

At first I thought the “x” image might be missing but all the theme pieces were in place.
It turned out to be a conflict between Bootstrap buttons and jQuery UI buttons. One possible fix is to change the order of the two scripts involved,

Screen Shot 2015-06-13 at 8.29.07 AM

I had previously determined the best order for all the scripts used in the module based on other issues, and did not want to change the order of bootstrap.min.js and jquery-ui.min.js. Both bootstrap and recent versions jquery-ui define either $.fn.button or $.fn[name], so they conflict.

The best solution in this case was to redefine bootstrapButton back to what it should be. Insert this after $(document).ready() .

var bootstrapButton = $.fn.button.noConflict()
$.fn.bootstrapBtn = bootstrapButton;

Thanks to “Pretty Cool” on Stack Overflow for this tip.