jQuery ui dialog trigger event after dialog created

Question

I am trying to trigger the function setupCheckBox('chk-img'); after the jQuery ui dialog is created but I cannot crack it. Any help is appreciated!

I have tried both open and create events (which I bind at the start of my code):

jQuery("#TicketTC").on( "dialogcreate", function( event, ui ) {
    setupCheckBox('chk-img');
});

and

jQuery("#TicketTC").on( "dialogopen", function( event, ui ) {
    setupCheckBox('chk-img');
});

My dialog code is:

jQuery("#TicketTC").dialog({
    modal: true,
    width: 600,
    height: 'auto',
    autoOpen: true,
    buttons: {
        CONTINUE: function() {
            jQuery(this).dialog("close");
            return true;
        },
        CANCEL: function() {
            jQuery(this).dialog("close");
            return false;
        }
    }
}).html('<div class="support-msg">' + tempHTML + '</div>');

Hi @PeterKA, yes, I have added an alert("HERE!"); line to the dialogcreate/open bindings and it triggers OK just prior to the dialog showing on the screen. I am trying to execute the code (essentially custom checkboxes) after the dialog opens, but both seem to trigger as it opens and as such the HTML with the checkboxes is not yet added to the DOM so the checkBoxes code does not work. — TheRealPapa
– TheRealPapa, Commented Nov 5, 2014 at 17:57
Would you be able to create a jsfiddle demo to demonstrate the issue? — PeterKA
– PeterKA, Commented Nov 5, 2014 at 18:00

lloiser · Accepted Answer · 2014-11-05 21:07:24Z

1

dialog(...) opens the dialog immediately. So the html you set afterwards using html is not in the dialog. And bind to the dialogopen event.

jQuery("#TicketTC")
  .on("dialogopen", function (event, ui) {
    setupCheckBox('chk-img');
  })
  .html('<div class="support-msg"></div>')
  .dialog({
    modal: true,
    width: 200,
    height: 'auto',
    autoOpen: true,
    buttons: {
      CONTINUE: function () {
        jQuery(this).dialog("close");
        return true;
      },
      CANCEL: function () {
        jQuery(this).dialog("close");
        return false;
      }
    }
  });

answered Nov 5, 2014 at 21:07

lloiser

1,1919 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TheRealPapa Over a year ago

Thanks @lloiser. I think I will need a JSFiddle to help you help me! I will do one next. Your suggestion makes sense in terms of sequence but it now has a strange behavior. On first and second dialog open (without page refresh) it does not work, but it works on the third dialog open?! Madness! I will do a JSFiddle to see what I learn in the process.

T J · Accepted Answer · 2014-11-05 18:10:43Z

1

You should bind the event handlers before the dialog is initialized since the dialog is set to open by default (If you bind the event afterwards it'll not be invoked since both the events already happened).

Rather than binding the events manually, Initializing the widget with the callbacks will be safer method:

jQuery("#TicketTC").on("dialogcreate", function (event, ui) {
   setupCheckBox('chk-img');
});
jQuery("#TicketTC").on("dialogopen", function (event, ui) {
   setupCheckBox('chk-img');
});
jQuery("#TicketTC").dialog({
   modal: true,
   width: 200,
   height: 'auto',
   autoOpen: true,
   create: function (event, ui) { // this is more reliable
      setupCheckBox('chk-img');
   },
   buttons: {
    CONTINUE: function () {
        jQuery(this).dialog("close");
        return true;
    },
    CANCEL: function () {
        jQuery(this).dialog("close");
        return false;
    }
  }
}).html('<div class="support-msg"></div>');

JSFiddle

edited Nov 5, 2014 at 18:10

answered Nov 5, 2014 at 18:05

T J

43.2k13 gold badges87 silver badges142 bronze badges

3 Comments

TheRealPapa Over a year ago

Hi @TJ it still does not work. I was getting the Alerts myself too (see my comment for @PeterKA). It seems the code that generates the checkboxes is just out of sync with the HTML being created by the dialog. I will create a fiddle and place here. I need sleep now, 5AM in Sydney... Thanks for the help!!

T J Over a year ago

@TheRealPapa ok I'll try modifying the answer once you share the fiddle :)

TheRealPapa Over a year ago

As a matter of fact I placed an ALERT inside setupCheckBox() and it triggers prior to the dialog opening, so there is no HTML for it to execute against. I think I need something like afterOpen listener.

Collectives™ on Stack Overflow

jQuery ui dialog trigger event after dialog created

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related