Aug 072010

Project Moved

This project has moved to BitBucket:

 Posted by at 3:46 pm

  23 Responses to “dialogWrapper- Simplified use of jQuery UI Dialogs”

  1. […] boxes, or worse, using a plethora of dynamic dialogs is a bit more painful than it should be. Enter dialogWrapper. It basically adds a set of one shot functions for creating normal dialogs, alert style boxes, and […]

  2. Hi,

    Thank you for this wonderful code. I found a small issue with IE when modal: true, the transparent layer is opaque and also adds pixels to height and width making the page grow with scroll bars to the side and bottom.

    Original jQuery UI Dialogs did not suffer in this aspect. Can you please advise what mods can fix this issue. If this is resolved I could use it in a production web site.

    • Thanks for visiting! I see exactly what you mean, and I’ll work on a fix. However, I did notice that even jQuery’s ui-dialog demo suffers from the little bit of added pixels, at least when I try this demo in IE: I will investigate that too and try to patch it.

    • I have fixed the issues you have been experiencing in version 1.6 of my plugin. The overlay only turned opaque when fadeIn was enabled. This was because fadeIn wasn’t working correctly when the CSS Filter property wasn’t predefined for the overlay. The overlay itself caused vertical and horizontal scroll bars to appear, probably because of a minor positioning or padding issue. I fixed this by changing the position property to fixed. Please try the new version, and tell me if you experience any other issues.

  3. Thank you for the quick fix. I will test it and inform you how it goes.

    I have encountered another issue and hoping you can shed some light or fix this one.

    For my integration, it is required to pass width & height for the dialog box. So I tried the following code and it worked accurately in quirks mode.

    $.showDialog(“title”, “content”, {
    width:”600″, height:”580″

    But when I declare dialog box width input is ignored. For testing I declared width in css and it worked .ui-dialog{width:600px;} but it’ll be nicer to pass it via $.showDialog (like in quirks mode)

    Again thank you for sharing this wonderful work!

  4. Hi, I tested your updated code, overlay worked well in IE8, however in IE6 the overlay did not show and the browser stopped responding (scary). I tried this in 2 PC’s running IE6 and both behaved the same way. At the moment I went back to the original code.

    When !DOCTYPE is declared in FireFox the width goes to default CSS value about 300px. In quirks mode the width works as declared. Since I am calling this via onclick function I’ll have the script update width in CSS probably that will solve the issue.

    • Have you tried using the overlay in IE6, but disabling the fadeIn? Like this: $.showDialog(“Title”, “Content”, {fadeIn: false});

      It could be the effect that is freezing the browser. If it is, I would suggest disabling this effect when IE6 is detected.

      • In the previous code (before the update), IE6 was not freezing while fade in was on, the overlay was coming but it was opaque instead of being transparent. In IE6 width & height was not growing like IE8.

        • In the code, try removing lines 87-92, the try-catch block right after the randomID() function. This isn’t a permanent fix, but I don’t have IE6 handy so I can’t do it myself.

  5. Declaring Dialog Width: I was referring to jQuery UI documentation, the following parameter is used to set dialog width

    $( “.selector” ).dialog( “option”, “width”, 460 );

    When using your wrapper, what will be the correct parameter to declare width?

    Thanks again

    • Just pass the width like you would with the regular dialog function. Example: $.showDialog(“Title”, “Content”, {width: 100});

      Again, this is passed directly to jQuery’s Dialog module unchanged. If there is an issue with it, it is probably with jQuery UI itself.

      • I have a weird problem. I am passing width & height via onclick function. So the code will look something like
        $.showDialog(“Title”, “Content”, {width: dbW, height:dbH});

        In FireFox, Chrome & Safari the “variable” width is getting ignored while height is passing through OK! this happens only when !DOCTYPE is declared.

        I just discovered, if I manually input width then it works
        $.showDialog(“Title”, “Content”, {width: 500, height:dbH});

        I am confused… I put in a “alert (dbW);” and it alerts the width correctly from the onclick function!

        I have very little idea about javascript, if this problem rings a bell please let me know how to fix it.

  6. removing lines 87-92 did not fix the issue in IE6, it froze solid!

    dbW or dbH are variables inside a function since I am calling via onclick function as follows (dbW > dialog box width)

    The Link:
    Open Dialog Box 1

    The Function:
    function newdialog(title, content, dbW, dbH){
    $.showDialog(title, content,{width:dbW, height:dbH});

    To recap, this function works in all browsers, however when !DOCTYPE is declared, FireFox, Chrome & Safari is ignoring the width, while IE & opera works as intended.

    Please let me know, if you have any idea what might cause this weird behavior. I have very little idea about java script.

  7. I am getting an alert from line 196 of the js file: “TODO restore overflow” when I try to close a dialog from the top right x button. It’s in the proto.close = function () override. Is it just ok to remove this alert, or is there a later version of the source code? Thanks.

  8. How to make the dialog box resizable? resizable: true option is not operating.


    • Could you please tell me which version of dialogWrapper you are using, and which browser? This:

      javascript: void $.showDialog("test", "resizable", {resizable: true});

      works for me in the latest version of Firefox. Also, make sure the jQuery UI Resizable Interaction is installed. dialogWrapper relies on it for the resizable option. Thank you.

  9. This is really great, but I have a question about which your documentation is ambiguous. Can I control the speed at which fading occurs? If not, that would be super to have added. If so, please explain how to do it! Thanks!

    • Hi Jim,

      Thanks for the feedback! That is a really good idea. So far, it’s not implemented yet. If you get a chance, would you mind writing up a feature request in Google Code? If not, I can add the request for you.

      Thanks again,

  10. so i’m working on something like this myself, except that, i have it set up so that i don’t even know what is being called.

    meaning, that i can load edit existing contacts/notes/appointments/ or create new contacts/notes/appointments/ or delete contacts/notes/appointments and so on and so on. With the ability to decide, ok, i need another dialog, and simply create the json response for it, and than it loads. it’s all working fine except for one itty bitty little problem.

    I noticed that the dialogs don’t destroy. Obviously i need to completely destroy the dialogs once they’re closed, because what was happening, was that it would load in the previously rendered dialog which is hidden, and than render a new, wonderfully empty dialog.

    Now, keep in mind that I don’t even have a dialog div layer on the page. that is rendered dynamically as well, because I won’t know what page the user is on, when they call the function.

    Your method assumes static foreknowledge. However, what about this scenario. You want the user to be able to define their own edit requirements, on the fly, within a manager, than render that immediately, without a defined ID, and only content based upon their edit criteria.

    Though I have always enjoyed the jquery production items, I’ve always found that the number one draw back with all their items, is the requirement to have static anything within it.

    Yes i know i haven’t given you any code, however, this is a discussion of theoretical semantics, not actual code persay.

    meaning i have one function that is called “createWidget()” and another called destroyWidget() and beyond that, they render all the items dynamically.

    I am pulling it apart, because i noticed hmmmm, the x button in the top corner, is a headache. it won’t actually close/destroy anything, and if i bind to it, than i get a recursive loop, which is a bug within the jquery-ui library itself, because it loads the destroyed dialogs outside the DOM but within the document (meaning outside of the html of the document but within the document itself) as a hidden layer.

    very inefficient. If that is destroyed, than the dialog won’t render at all….

    • Hi James,

      I read your comment but I’m not completely sure what you are asking, especially the part about “static foreknowledge”. If you have a question regarding dialogWrapper, then feel free to ask. If it’s a bug report, then please post it on Google Code. Otherwise, I’d suggest asking implementation questions on StackOverflow ( since you will get multiple responses.

      Thanks for stopping by,

Leave a Reply