jquery UI - simple example, what am I doing wrong?

Question

I am trying to put some jquery UI code into an existing asp.net app, and could use a helping hand...

I have a button, when a user clicks it, I want to popup a jquery UI dialog with two go/nogo confirmation buttons.

This works except, when I click the button, it opens and then immediately closes...as a new jquery user, I am sure I am just missing something simple...

Here is the javascript to open the dialog:

<script type="text/javascript" >

    $(function() {
    // Cancel Event Dialog Box
    $('#CancelDialog').dialog({
     autoOpen: false,
     width: 500,
     buttons: {
      "Cancel This Event": function() {$(this).dialog("close");}, 
      "Do Not Cancel": function() {$(this).dialog("close");} 
     }
    });

});
</script>

and here is the code that calls it:

<asp:Button id="btnCancelMeeting" Text="Cancel Event" runat="server" />
 <script language="javascript" type="text/javascript">  
    $(document).ready(function() {  
    $('#CancelDialog').dialog();  
    $('#btnCancelMeeting').click(function() {$('#CancelDialog').dialog('open'); });  
         });  
</script>

<div id="CancelDialog" title="Cancel and Event or Meeting"><p>Cancel this event.</p></div>

To recap: I click the button, I get the dialog with the two buttons and message that I want, but it closes by itself about 1 second later...What am I doing wrong?

EDIT: OK, now I think I see what is going on...when I click the button, the dialog pops as desired, but then the page is reloading again from the server...which resets the entire page, including clearing the dialog.

So what I really want to happen, is mimic this behavior:

<asp:Button id="btnDelete" Text="Delete Event" runat="server" OnClientClick='javascript:return confirm(&quot;Are you sure you would like to permanently delete this event/meeting? This action cannot be undone.&quot;)' OnClick="btnDelete_Click" />

where the click generates a client-side event, and only if "OK" is chosen, does the page force a reload. Can anyone give the syntax for hanging this queryUI dialog box off of the OnClientClick event?

Answer 1

Remove the

$('#CancelDialog').dialog();

after

$(document).ready(function() {

and try that.

Take 2. It's possible that the default behaviour of 'button' being submit may be what's cauising it to reload the page. Can you try adding type='button' to the button so that isn't doesn't default to submit?

Answer 2

I don't know jquery much better than you do, but I think to do what you want you should make the cancel meeting button click return false:

$('#btnCancelMeeting').click(function() {$('#CancelDialog').dialog('open'); return false; });

Then make the "Cancel This Event" button initiate the cancel with the server:

"Cancel This Event": function() { CallFunctionThatReallyCancelsTheEvent(); $(this).dialog("close");},

Answer 3

You don't need the first bit of JavaScript since it will be done by the second one anyway (I suspect that fighting over the system is causing the closing). Your second piece of JavaScript should be in a script block in the page header and should look like this.

<script>
  $(document).ready(function() {
  $("#btnCancelMeeting").click(function() {
      $("#CancelDialog").dialog({ 
          autoOpen: true,
          width: 500,
          buttons: {
          "Cancel This Event": function() { $(this).dialog("close"); },
          "Do Not Cancel": function() { $(this).dialog("close"); }
            } 
            });
      });
  });
</script>

I am a little worried about the fact that is on a ASP.NET button as I would suspect that would do a postback (unless you have turned that off - if memory serves there is a property which controls that) and that too could cause issues.

A working version is available at: test.html sample - I used a normal button rather than an ASP.NET one since I just wanted to get the functionality right.

Answer 4

so you want to catch the event before it triggers the server, right?

first of all, you need to take the Click event away, use that button as a normal button only, change the current button to:

<asp:Button id="btnShowDialog" Text="Delete Event" runat="server" OnClientClick="$('#myDialog').dialog('open');" />

or for this you can use a normal link or html button, instead using the server to create it

<input type="button" value"Delete Event" onclick="$('#myDialog').dialog('open');" />

this will open the Dialog:

Now, what you need is to place the Button that triggers the server event in the dialog it self!

that you can accomplish passing the save javascript that you can find the the browser status bar when you click the button, in other words, do a Post Back using only javascript - You can find the correct code changing Button to LinkButton and mouse over it.

change the:

 "Cancel This Event": function() {$(this).dialog("close");}

to:

"Cancel This Event": function() {
    __doPostBack('btnDeleteEvent', '');
}

this will do the same as a btnDeleteEvent does, you do need to have a LinkButton called this name to actual perform the click behavior (make text = "" so it doesn't show in the page).

<asp:LinkButton ID="btnDeleteEvent" runat="server" Text="" onclick="btnDeleteEvent_Click" />

remember to have in the code-behind file the event to be fired up

protected void btnDeleteEvent_Click(object sender, EventArgs e)
{
    // do something
}

Updated

added: link to the complete source

Answer 5

I'm not familiar with the server-side .NET part of this, but if this issue were happening in a regular jQuery client-side setup, this would need to be added to the click handling function:

function(event){
  event.preventDefault();
  event.stopPropagation();
  $(this).dialog("open");
}

EDIT: Sorry, this would be on the dialog open call, not the close handlers.