Info and Error Dialogs

by Annie Lagang

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">
<div id="sampleDiv"></div>
<div id="sampleDiv2"></div>

<div id="dialogDivideConfirm" title="Confirmation Required">
<p>
You are requesting to divide the current booking. This will create a new booking for the divided guests.
<br /><br />
Current Booking: <br />
test, x<br />
test, y
<br /><br />
New Booking:<br />
test, z
<br /><br />
You won’t be able to undo this action once you click OK. <br /><br />
Do you wish to proceed?
</p>
</div>

<div id="dialogDivideError" title="Error">
Please select at least (1) one guest.
At least (1) one guest should be retained on this booking.
</div>

<div class="main">
        <div id="errorDiv" style="display: none;"></div><br><br><span style="font-weight: normal; font-size: 1.5em;">Changing flights of one or two guests only on a booking of three or five? Don’t worry, you can easily do it now without calling our hotline. Tick the checkbox of the guest/s you want to divide out from this booking.<br><br>Please call the hotline for bookings with child and unaccompanied minors. </span><table border="0" cellspacing="0" cellpadding="0" width="100%" style="font-size: 1.3em;">
          <tbody><tr valign="top" width="43%">
            <td><b>Manila:</b><br>Tel: +632-7020-888</td>
            <td><b>Hong Kong:</b><br>Tel: +852-580-33088</td>
            <td><b>Australia:</b><br>Tel: +612-9119-2956</td>
          </tr>
          <tr valign="top" width="57%">
            <td><b>Cebu:</b><br>Tel: +6332-230-8888</td>
            <td><b>Singapore:</b><br>Tel: +65-315-80808</td>
            <td><b>United States:</b><br>Tel: 1-855-5-CEBPAC</td>
          </tr>
        </tbody></table><br><br><br><div class="row no-label"><span style="font-size: 1.5em; padding-left:10px;"><input id="ControlGroupDividePnrPassengerView_ControlsDividePnrPassengerView_CheckBoxPassenger_0" type="checkbox"...

CSS

.ui-dialog .ui-dialog-buttonpane { 
    text-align: center;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 
    float: none;
}

JavaScript

$("a[id*='LinkButtonSubmit']").click(function() {    
    //validatePassengers();
    getPassengerNames('sampleDiv', true);
    getPassengerNames('sampleDiv2', false);
});

 function getPassengerNames(controlId, checked) {
              if (checked) {
                  var values = $('input:checkbox:checked').map(function() {
                      return this.value;
                  }).get().join("<br />");
                  $('#' + controlId).html(values);
              } else {
                  var values =$("input:checkbox:not(:checked)").map(function() {
                      return this.value;
                  }).get().join("<br />");
                  $('#' + controlId).html(values);
              }
          }

$("#dialogDivideConfirm").dialog({
   autoOpen: false,   
   buttons: {
            	"OK": function () {
               $(this).dialog("close");
               callback(true);
            },
            	"Cancel": function () {
              $(this).dialog("close");
              callback(false);
            }
    },
    closeOnEscape: false,
    dialogClass: "no-close", //css class name(s) for dialog, as for this case the no-close class is defined as hidden in main.css
    draggable : false,
    modal: true,
    position: {
    						my: "center top",
                at: "center bottom",
                of: '.header'
    },
    resizable: false
});

$("#dialogDivideError").dialog({
   autoOpen: false,   
   buttons: {
            	"OK": function () {
               $(this).dialog("close");
            }
    },
    closeOnEscape: false,
    dialogClass: "no-close", //css class name(s) for dialog, as for this case the no-close class is defined as hidden in main.css
    draggable : false,
    modal: true,
    position: {
    						my: "center top",
                at: "center bottom",
                of: '.header'
    },
    resizable: false
});

// add hidden textbox containing the "boo" or "yah".
function callback(value) {
    if (value) {
      ...