Using javascript confirm dialog on a button within an UpdatePanel - posting back full page

Question

I basically want to show a dialog box with confirm or cancel options on it.

Confirm should allow the partial postback to take place, cancel should not. I have tried using a trigger and calling __doPostBack() as advised here but it posts back the full page not just the panel.

$('#buttonInUpdatePanel').live('click', function (event) {
    event.preventDefault();
    var item = this;
    var title = 'Confirm';
    var msg = 'Please confirm something';

    var $dialog = $("<div id='myDialog'></div>")
        .html(msg)
        .dialog({
            modal: true,
            buttons: {
                "Confirm": function () {
                    $(this).dialog("close");
         __doPostBack('Button1', null); //tried this and .submit() on the button
                    //return true;
                },
                "Cancel": function () {
                    $(this).dialog("close");
                    //return false;
                }
            },
            title: title
        });
});

My UpdatePanel:

<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <asp:TextBox runat="server" ID="TextBox1" />
        <asp:Button 
            ID="Button1" 
            Text="Add" 
            OnClick="AddExtraVehicle_Click" 
            runat="server" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

UPDATE:

I have changed the doPostBack to use the button ID now and commented out the return true and false lines.

When I click the button it calls the confirmation dialog but when you click on confirm it appears to do nothing. I was expecting a call to the method AddExtraVehicle_Click but the breakpoint didn't trigger.

Nikhil Nikhil · Accepted Answer · 2011-03-31T15:38:48

UPDATE: this

 __doPostBack('Button1', null)

will not work. When ASP.NET renders your Button1, the ID is not really 'Button1'. It is changed to contain the id of its naming contained. You need to do this

 __doPostBack($('input[id$=Button1]').attr("id"), null); //You need to use the real ID of the button which this statement will do

You are on the right tracks but slightly off the road :). Try this code

var $dialog = $("<div id='myDialog'></div>")
        .html(msg)
        .dialog({
            modal: true,
            buttons: {
                "Confirm": function () {
                    $(this).dialog("close");
         __doPostBack($('input[id$=Button1']).attr("id"), null); //tried this and .submit() on the button
                    return true;
                },
                "Cancel": function () {
                    $(this).dialog("close");
                    return false;
                }
            },
            title: title
        });
});

Basically you want to call __doPostBack with the Id of the control that has been registered as an asynch trigger of an update panel. Hope that helps!

Using javascript confirm dialog on a button within an UpdatePanel - posting back full page

1 Answers