Solved

jquery dialog confirm delete and do postback

Posted on 2014-10-09
4
540 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 82

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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
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)

759 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now