Tag Archives: jQueryUI

Access jQueryUI dialog buttons after dialog was created

If you’re using jQuery UI Dialog, you know sometimes there’s a need to access dialog’s button objects after the dialog has already been created. This can be easily done via 

$(dialogElement).dialog("option").buttons

command. One possible scenario where this can be useful – is executing specific button click function when user clicks [X] in dialog title. Imagine that buttons are set via array and the last object in this array is always something like CANCEL or NO or DISREGARD – and you want to simulate click of that last button whenever user clicks [X]. Using above command it’s pretty straightforward:

$(oDivDialog).dialog({
   //... some dialog parameters
   buttons: arrayOfButtonObjects,
   //... some more parameters
   close: function () {
      var buttons = $(this).dialog("option").buttons;
      buttons[buttons.length - 1].click();
   }
})

Line 5 begins close event which is called on dialog closing.
Line 6 retrieves array of buttons for the dialog
Line 7 calls click() function of the last button in the array

Infragistics WebDataMenu: Manual postback from client-side Click event

There’s a a few possible scenarios when you need to manually to initiate server-side Click event of Infragistics WebDataMenu control. For example in client side click event you do some verification/user confirmation and upon positive confirmation (e.g. user clicks YES) – server-side Click event should kick in.

In a normal flow of event you can use set_cancel(bool) method to allow/disallow natural menu postback e.g.

function Menu_ItemClick(sender, eventArgs) {

   if (confirm('Are you sure?'))
       eventArgs.set_cancel(false)
   else
       eventArgs.set_cancel(true)

}

This works because this dialog stops code execution waiting for the user input. But what if you use something like jQueryUI dialog that relies on callback functions to get user feedback? In this case execution of the code continues immediately so you have to cancel postback right away and instead in the callback of the dialog initiate manual postback e.g

function Menu_ItemClick(sender, eventArgs) {

   $("#dialog").dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Yes": function() {
          $(this).dialog("close");
          __doPostBack(sender.get_id(), 'ItemClick' + eventArgs._getPostArgs());
        },
        "No": function() {
          $(this).dialog("close");
        }
      }
   });  

   eventArgs.set_cancel(true)

}

The example above initiates modal confirmation jQuery UI dialog and immediately cancels menu postback (Line 18). Later if user clicks “Yes” button – dialog is closed and manual menu postback is initiated (Line 10) – it passes menu ID and correct postback argruments which result in server-side Click event of menu control. If user clicks “No” – dialog is closed and nothing else happens.