asp.net button control inside jquery-ui modal confirmation

Question

I'm deleting an item and want to pop-up a confirmation window before doing all the LINQ related deleting.

What i want is for an be loaded into the modal confirmation window to then perform the server-side functionality.

button on page:

<input type="button" onclick="deleteConfirmation();" value="Eyða korti" id="btnDelete"/>

javascript basically from jquery-ui sample page. I don't want the buttons

function deleteConfirmation() {

    $(".confirmation").dialog({
            resizable: false,
            height: 350,
            modal: true,
    });
}

markup to load into the modal window:

<div class="confirmation" style="display:none;">
Do you really want to delete...
<asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="btnDelete_Click" />
<input type="button" value="Cancel" class="button" />

Needless to say The OnClick event doesn't fire up. How do i attain the desired functionality.

Edited: I also tried antoher thing

i put the buttons inside the dialog and then return true/false Then have the onclientclick="return deleteConfirmation()" on the asp button, that worked up to a point because the server side code runs but the popup doesn't await user input.

nunespascal · Accepted Answer · 2012-07-05 12:44:21Z

3

By default jQuery dialogs clone the dom elements and place them at the end of body.

This is outside the form tag.

Since it is outside the form tag, asp.net does not receive these events.

You need to put the dom back into the form. Something like this:

function deleteConfirmation() {

    $(".confirmation").dialog({
            resizable: false,
            height: 350,
            modal: true,
    });

    //dialog put the asp elements outside form, bring it back

    $(".confirmation").each(function() { 
      var popup = $(this); 
      popup.parent().appendTo($("form:first")); 
    });

    //asp.net has its precious elements back into the form tag.

}

edited Jul 5, 2012 at 12:44

answered Jul 5, 2012 at 11:25

nunespascal

17.7k2 gold badges45 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fogedi Over a year ago

I catch your drift in regards to the elements but i'm not sure I understand what you mean by the code. Do you mean that by saying var popup = ... the modal window is going to behave differently that is to say it isn't going to copy the dom elements? Also i've added a small change to the question in regards to onclientclick

nunespascal Over a year ago

That bit of code will run for all elements that have the class="confirmation" and put them back into the form tag. This will ensure that your button clicks are detected by asp.net. I saw your change, but when you call dialog doesn't matter. It will always put the contents to the end of body. This code should run after you call dialog. I will update the answer.

Cesar Moreno · Accepted Answer · 2013-02-13 03:52:39Z

0

I found this post: http://www.aspsnippets.com/Articles/How-to-make-ASPNet-Button-do-PostBack-in-jQuery-Modal-Dialog-Popup.aspx

I hope it could make a little bit easier the way you get a Postback from your click event.

answered Feb 13, 2013 at 3:52

Cesar Moreno

1

Collectives™ on Stack Overflow

asp.net button control inside jquery-ui modal confirmation

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related