How can I prevent the jQuery dialog from closing immediately if I click the Edit or Delete button?

advertisements

If I click "Add new" button it opens a jQuery dialog containing a GridView with Edit and Delete buttons Which have the full code behind functionalities. If I click on “Edit” button the jQuery dialog disappears. I am not able to edit.

If I click again "Add new" button it opens jQuery dialog with “update, cancel”.

How can I prevent jQuery dialog closing immediately if i click on Edit or Delete button?

<script type="text/javascript">

  $("[id*=btnPopup]").live("click", function (ev) {
    $("#dialog").dialog({
    title: "Add new",
    width: 1200,
    height: 500,
    modal: true,
    open: function (type, data) {
    $(this).parent().appendTo("form");
      },
     buttons: {
       Close: function () {
       $(this).dialog('close');
          dialog.parent().appendTo(jQuery("form:first"));
       }
      }
   });

    return false;
   });

</script>

.aspx file
<div id="dialog" style="display: none">
<asp:GridView ID="gridViewShowVariables" runat="server" ......>
 </asp:GridView>
<div/>
<asp:Button ID="btnPopup" runat="server" Text="`enter code here`Add new item" />


I think you're finding some of the limitations of the ASP.NET postback model. When you click a button, it causes a postback to the server, meaning the page must be entirely resent and you'll lose the client side state. So what you can do is ClientScriptManager.RegisterStartupScript and re-open the dialog so that when the page is sent back to the client after postback, the dialog will open back up again.

--Update--

First, let's change how you declare the dialog.

$("[id*=btnPopup]").live("click", function (ev) {
    $("#dialog").dialog({
    title: "Add new",
    width: 1200,
    height: 500,
    modal: true,
    autoOpen: false,
    appendTo: "form",
     buttons: {
       Close: function () {
       $(this).dialog('close');
          dialog.parent().appendTo(jQuery("form:first")); //I think this can be eliminated too.
       }
      }
   });

Then, when you want to open it, do this:

$("[id*=btnPopup]").live("click", function (ev) {
    $("#dialog").dialog("open");
});

Now, any time your cause a postback, and you want to leave the dialog open after the postback, do this on the server side:

ClientScriptManager.RegisterStartupScript Method (this.GetType(), "open-dialog", "$('#dialog').dialog('open');", true);

--End Update--

Alternatively you could use an UpdatePanel for partial postbacks. But I don't recommend those, because they tend to cause more problems than they solve.

My top recommendation is to switch off GridView to a regular table, then use AJAX to send updates back to the server.