Question

Just updated jQuery UI from 1.8.5 to 1.8.16, and the modal dialogs I’ve been using succesfully in my app stopped showing all of a sudden, by which I mean that the overlay is displayed correctly, but the actual box is not showing at all.

Dialog creation and usage is straight forward:

var dlg=$('<div></div>').dialog({modal:true,autoOpen:false});
dlg.html('some content');
dlg.dialog('open');

This used to work fine. Now I just get the overlay, no actual dialog box.

Required JS is loaded fine (single jQuery UI file, containing all dependencies, plus the jQuery lib), also the CSS (using Smoothness theme), checked with Firebug.

There are no errors or warnings in the Firebug console.

The only change I made to the downloaded distribution was rename some of the files by removing the version number and “ui”, i.e. jquery-ui-xyz.js becomes jqueryui.js. As I said, the scripts load fine.

I have seen the few questions here regarding the same problem, but no real answer. Before rolling back or start altering my previously working code, please let me know if I’m missing something here.

Many thanks.

Answer 1

Solved. One of those stupid cases where the apparent problem is just a red herring, and the real problem lies somewhere else.

What I did was, altered a single variable in my MVC framework, which caused the jQuery UI scripts and other essential scripts to load in the head section, instead of the body section. I did this just before upgrading jQuery, and did not test the effect, assuming nothing would change: what, I just moved the scripts around, I’ll get an error if something goes wrong, I’ll catch it then.

Thing is, one of those scripts contains the above code. And it’s now loaded in head. I have to assume that creating a div element via JS in the head section of a document is not gonna work, is it? And that’s a silent fail, no error issued!

I then upgraded jQuery, and got the above described problem. I got mislead further by the lack of any error report, and the fact that the usual culprits (not properly loading scripts and CSS) were not to blame here.

I pulled my hair out since, until I got it tonight and solved it. I deserve that for not making incremental changes to the project, testing at each step, esp. before such a significant sub-framewok overhaul.

So, apologies to the jQuery team. My bad.

TL;DR: It wasn’t jQuery’s fault. It was bad developing practices all along. Also, make sure you don’t create a jQuery UI Dialog object in the head section of your page (however stupid that sounds).