Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

jquery dialog confirm delete and do postback

Posted on 2014-10-09
4
Medium Priority
?
763 Views
Last Modified: 2014-10-26
Good Morning,

I have the below code.  I am learning jquery think I almost have this but require a little asistance to complete it.  I am using jquery dialog to confirm delete.  Dialog is working up to the point of displaying.   On click of Confirm I want to postback to the rowcommand function of the gridview and delete the record.  My problem is the __doPostBack.  I don't know how to target the gridview button that was clicked.  Can someone help me to finish this please.



<asp:UpdatePanel ID="updatepanel2" runat="server">
 <ContentTemplate>

  <div id="grid"  runat="server" class="thehide" style="position:absolute;top:200px;left:30px">
        <table><tr style="margin-top:15px;margin-bottom:15px;"><td><asp:Label ID="mymessage" runat="server" CssClass="instruct"></asp:Label></td></tr>
        </table>
           <asp:GridView ID="grdRecords" runat="server"  AutoGenerateColumns="False" Width="700px"  OnRowDataBound="grdRecords_RowDataBound" OnRowCommand="grdRecords_RowCommand"  DataKeyNames="Request_Id" AllowPaging="true" AllowSorting="true"  CssClass="mGrid"  PageSize = "35" OnSorting="grdRecords_Sorting" OnPageIndexChanging="OnPaging"> 
       <PagerStyle CssClass="pagercss" />    <Columns> 
        
           
           
           <asp:TemplateField HeaderText="Delete"><ItemTemplate>
           
                   <asp:LinkButton ID="btnDelete" runat="server" Text="Delete" CommandName="DeleteRow" CommandArgument='<%# Eval("REQUEST_ID") %>'></asp:LinkButton>
   
       </Columns> <EmptyDataTemplate><asp:Label ID="nodata" Text=" No data to display" ForeColor="Red" runat="server" Font-Size="Medium"></asp:Label></EmptyDataTemplate>
        </asp:GridView>
</div>

<div id="dialog" style="display: none">
    <span id="id"></span>
    <br />
    <b>Subject:</b> <span id="subject"></span>
    <br />
    <b>Requester:</b> <span id="requester2"></span>
    
    <br />
</div>

<script language="javascript" type="text/javascript">

    $(document).ready(function () {
        BlockUI("dvGrid");
        $.blockUI.defaults.css = {};


            $(document).on("click", "[id*=btnDelete]", function () {


                   var row = $(this).parents("tr:first");
                id = "<b>Are you sure you want to delete</b>";
                subject = row.children("td:eq(3)").text();
                requester = row.children("td:eq(4)").text() + "?";
                $("#id").html(id);
                $("#subject").html(subject);
                $("#requester2").html(requester);
                $("#dialog").dialog({
                    title: "Confirm Delete",
                    buttons: [
                                {
                                    id: "btnConfirm",
                                    text: "Confirm",
                                    click: function () {
                                //  __doPostBack($(btnDelete).attr('name'), '');
                                    $(this).dialog("close");
                                    }
                                },
                                {
                                    id: "btnCancel",
                                    text: "Cancel",
                                   click: function () {
                                        $(this).dialog("close");
                                    }
                                }
                    ],
                    open: function (event, ui) {
                        $("#btnCancel").focus();
                        $('.ui-dialog').css('z-index', 153);

                    },
                    modal: true
                });
                return false;
            });

    });
</script>

</ContentTemplate><Triggers><asp:AsyncPostBackTrigger ControlID="searchby" EventName="SelectedIndexChanged" /><asp:AsyncPostBackTrigger ControlID="getRecords" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="validateprepub" EventName="Click" /><asp:AsyncPostBackTrigger ControlID="validatelit" EventName="Click" />
</Triggers></asp:UpdatePanel>

Open in new window




CODEBEHIND

protected void grdRecords_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "DeleteRow")
        {
 
            LinkButton lnkBtn = (LinkButton)e.CommandSource;
            GridViewRow myRow = (GridViewRow)lnkBtn.Parent.Parent;
            GridView myGrid = (GridView)sender;

           string requestID = myGrid.DataKeys[myRow.RowIndex].Value.ToString();
          //  MessageBox.Show(requestID.ToString());
            // Delete the record 
            DeleteRecordByID(requestID);

        }

    }

Open in new window

0
Comment
Question by:thamilto0410
  • 3
4 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 40371371
replace line 37 :
$(document).on("click", "[id*=btnDelete]", function () {
by :
$(document).on("click", "[id*=btnDelete]", function (event) {
         event.preventDefault();
         var myForm = $(this).closest("form");

Open in new window


and line 55 :
$(this).dialog("close");
by :
$(this).dialog("close");
myForm.submit();

Open in new window

0
 
LVL 1

Author Comment

by:thamilto0410
ID: 40373376
leakim971 thank you for your response.  However it does not work.  The dialog does show with cancel as default.  When I click confirm it does a postback because the grid refreshes but when it does postback it does not fall into the rowcommand and do the deleting?  I need to postback to the page and to the row that was clicked in the gridview and call the rowcommand function on the gridview.  Further suggestions?
0
 
LVL 1

Accepted Solution

by:
thamilto0410 earned 0 total points
ID: 40395866
Was not able to get the dialog working so went with ajax extendedpopup and that allowed me to customize according to customer specifications.
0
 
LVL 1

Author Closing Comment

by:thamilto0410
ID: 40404582
Did not get the dialog working so had to find another solution which I did on my own.
0

Featured Post

NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question