CODEWITHSUNDEEP
javascriptjqueryjquery-uidialog
TheRealPapa
TheRealPapa

Reputation: 4539

jQuery ui dialog trigger event after dialog created

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>');

Upvotes: 1

Views: 4576

Answers (2)

lloiser
lloiser

Reputation: 1191

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;
      }
    }
  });

Upvotes: 1

T J
T J

Reputation: 43156

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

Upvotes: 1

Related Questions