Postback in jQuery UI dialog

Question

I've a gridview with some rows. On each row I have an imagebutton on the right side of the grid that offer the possibility to delete a record.

Clicking on the imagebutton is show a dialog created with jQuery UI.

jQuery code is:

$("[name*='btn_check']").click(function() {
    event.preventDefault();
    $("#dialog-confirm").dialog({
        autoOpen: true,
        resizable: false,
        height: 200,
        modal: true,
        buttons: {
            "Accept": function() {
                $(this).dialog("close");
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });
});

Code is quite simple and common for jQuery UI dialog.

So, now I wan to execute code when "Accept" button is clicked and I though __doPostBack could be a good solution.

So, I've created an hidden button in my gridview (near the imagebutton), then I've added this code to "Accept" function, as I found on another StackOverflow question:

__doPostBack('btn_hidden', '');

I've also tried to use this:

__doPostBack('<%= btn_hidden.UniqueID %>', '');

But without success.

So, which is the right way to execute a postback and how can I send the ID of the record to delete this record with code behind?

Alexander Manekovskiy · Accepted Answer · 2014-10-07 12:31:50Z

1

First of all you should have a correct CommandName and CommandArgument set on your ImageButton. Then call dialog from the OnClientClick. As I understood you have only one dialog element hidden somewhere so there should be no problems with ids:

<asp:ImageButton runat="server"
    CommandName="Delete" 
    CommandArgument='<%# Eval("YourKeyFieldNameHere") %>'
    OnCommand="ImageButton_Command"
    OnClientClick="javascript:return showConfirmDialog(this.name)"
/>

function showConfirmDialog(uniqueId) {
    $("#dialog-confirm").dialog({
        autoOpen: true,
        resizable: false,
        height: 200,
        modal: true,
        buttons: {
            "Accept": function() {
                $(this).dialog("close");
                __doPostBack(uniqueId, '');
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });

    return false; // this is to prevent default click handler to cause a postback
}

Codebehind:

protected void ImageButton_Command(object sender, CommandEventArgs e) 
{
    // e.CommandArgument will contain the record key and 
    // e.CommandName will be equal to "Delete" or whatever you'll set on aspx
}

edited Oct 7, 2014 at 12:31

answered Oct 7, 2014 at 9:14

Alexander Manekovskiy

3,2031 gold badge28 silver badges36 bronze badges

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

3 Comments

s.milziadi Over a year ago

Your solution is working well! I've just added event.preventDefault(); after function showConfirmDialog(uniqueId) { because it was returning "Invalid postback or callback argument" error. Thanks!

Alexander Manekovskiy Over a year ago

@s.milziadi actually it is enough to remove return before dialog call. Then it'll return false and there will be no postback. I've updated the code. Thanks for pointing out.

s.milziadi Over a year ago

Your solution is absolutely the best, because event.preventDefault(); work with IE and Chrome, but does not work fine in Firefox causing an error. Thanks again

Collectives™ on Stack Overflow

Postback in jQuery UI dialog

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related