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.

16 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