JQuery UI dialog missing “X” from close button
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.
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,
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
var bootstrapButton = $.fn.button.noConflict()
$.fn.bootstrapBtn = bootstrapButton;
Thanks to “Pretty Cool” on Stack Overflow for this tip.