Saturday, June 18, 2011

JQuery UI dialog open - good practise

JQuery dialog is a fine plugin, but sometimes it doesn't work as we want to. I had a situation where my modal window pop up always third time and i had no idea why... Event for my button was binded well and popUpWindow execute every time, but open: function had strange behaviour. The code looked like this:
 
function popUpWindow(id, title, containerId) {
    $('#' + id).dialog('destroy');
    $('#' + id).dialog({
        autoOpen: false,
        bgiframe: true,
        modal: true,
        title: title,
        open: function (event, ui) {
            $('#' + id).append("simple Div Tag");
            $('#' + id).parent().appendTo($("form"));
        },
        close: function (event, ui) {
            $('#' + id).parent().appendTo($('#' + containerId));
            $("body").css("overflow", "auto");
        }
    });
    $('#' + id).dialog('open');
    $('#' + id + " input:text:visible:first").focus();
}
Function worked fine everywere else except a one particular userControl. The solution is to hold the modal div in a variable, so new funcion takes the form:
 
function popUpWindow(id, title, containerId) {

    var divObj = $('#' + id);
    divObj.dialog('destroy');
    divObj.dialog({
        autoOpen: false,
        bgiframe: true,
        modal: true,
        title: title,
        open: function (event, ui) {
            divObj.append("simple Div Tag");
            divObj.parent().appendTo($("form"));

        },
        close: function (event, ui) {
            divObj.parent().appendTo($('#' + containerId));
            $("body").css("overflow", "auto");
        }
    });
    divObj.dialog('open');
    $('#' + id + " input:text:visible:first").focus();
}
Hope this helps someone and saves precious time.

19 comments:

  1. Thanks
    Helpful article

    ReplyDelete
  2. Thanks, this helped me out

    ReplyDelete
  3. Thank you .Your article really saved me a lot of time

    ReplyDelete
  4. Indeed! This solved my issue. Thanks!

    ReplyDelete
  5. Thank you. It helped:)

    ReplyDelete
  6. Hi
    What will be containerId here?

    ReplyDelete
  7. Hi... how would I reference child objects in the dialog? I need to communicate with elements within the div...

    BTW: I am totally, totally new to js/jq :(

    ReplyDelete
  8. Perfect Answer. You saved another life :)

    ReplyDelete
  9. Great...........:). You saved mine life too :)

    ReplyDelete
  10. Sorry I'm starting to learn this, how do you use that function? Can you show the html code as well?
    That would help.
    Thanks
    R

    ReplyDelete
    Replies
    1. this is correct answers...great...

      Delete
  11. Yay, worked like a charm !

    ReplyDelete
  12. Thanks! This really helped!

    ReplyDelete
  13. I should found this article before... That would save a lot my time. I spent a whole day to make things work, and finally found this as solution. THANKS!

    ReplyDelete
  14. Thank you. You saved me.

    ReplyDelete
  15. Could you post an example of how to use the syntax highlighter within Blogger? Thanks!

    ReplyDelete
    Replies
    1. Chris check this:
      http://mlawire.blogspot.com/2009/07/blogger-syntax-highlighting.html

      Delete