modal popup javascript

Question

Hi all I have a div in my page which represents a popup window. I have a button inside the window. On click of the button, I need to call a javascript function.(I need to do this only in client side, not in server). If the validation is successful, the popup can close. If not, it should display an alert message and STAY THERE INSTEAD OF CLOSING. I need to close my popup only if validation is successful. Else, it should display an alert and just stay. How do I make it stay? The following are my codes.

Div structure:

<script type="text/javascript">
 $(function () {
 $("#dialog:ui-dialog").dialog("destroy");
 $('#TimeslotGroup').dialog({
 autoOpen: false,
 draggable: false,
 resizable: false,
 bgiframe: false,
 modal: true,
 width: 700,
 title: "Timeslot Group Entry",
 open: function (type, data) {
 $(this).parent().appendTo("form");
 }
 });
 });
 function showDialog(id) {
 $('#' + id).dialog("open");
 }
 function closeDialog(id) {
 $('#' + id).dialog("close");
 $("#dialog:ui-dialog").dialog("destroy");
 }
 //getter
 var modal = $(".selector").dialog("option", "modal");
 //setter
 $(".selector").dialog("option", "modal", true);
 </script>
 <script type="text/javascript">
 Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (evt, args) {
 $('#TimeslotGroup').dialog({
 autoOpen: false,
 draggable: false,
 resizable: false,
 bgiframe: false,
 modal: true,
 width: 500,
 title: "Timeslot Group Entry",
 open: function (type, data) {
 $(this).parent().appendTo("form");
 }
 });
 });
 </script><div id="TimeslotGroup" class="ui-widget-overlay" style="overflow-y: scroll;">

• MusicLovingIndianGirl: I need to close my popup only if validation is successful. Else, it should display an alert and just stay.
• Ian: Where's your validation?
• Arun P Johny: who is calling closeDialog and where is the validation logic
• MusicLovingIndianGirl: @Ian, here's a part of the function. if (newFromHour > oldFromHour || newFromHour > oldToHour) { alert("do not add."); } Here in else I need to make the popup stay.
• MusicLovingIndianGirl: @Arun, closeDialog is not related to my query..and I recently included the condition for validation..

Answer 1

Use the beforeClose event

$( "#dialog" ).dialog({
 beforeClose: function(e, ui){
 if(!valid){
 return false;
 }
 }
});

• MusicLovingIndianGirl: @All, I have a problem. In the popup, I have 4 dropdowns. From Hour, From Minute, To Hour and To Minute. In the parent page there is a grid with 2 columns - FromTime and To Time. When a row is clicked, I open the above said popup. I populate the values selected from dropdown to the grid. For example I select values From Time Hour = 08, From Time Minute = 40; To Time Hour = 09, To Time Minute = 20; they get populated in the grid as 08-40(FromTime) and 09-20(To Time). When I select time for next row(from the popup), it should not clash with the 08-40 and 09-20. How do I do this validation?