locked
Use Sweetalert to confirm link button in listview RRS feed

  • Question

  • User31164289 posted

    I want to use sweetalert2 plugin to replace javascript confirm.

    In a page I have listview with a link button to delete selected record.

    This my code:

            <asp:ListView ID="lvwAssociazioni" runat="server" GroupPlaceholderID="groupPlaceHolder1" DataSourceID="odsListAbbinati"  
                ItemPlaceholderID="itemPlaceHolder1">
                <LayoutTemplate>
                    <table class="table table-striped dt-responsive nowrap" id="datatable-buttons" style="width:100%">
                        <thead>
                            <tr>
                                <th>
                                    <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Sort" CommandArgument="Ragionesociale">
                                        <asp:Label runat="server" ID="Label0" Text="Ragionesociale" ></asp:Label>
                                    </asp:LinkButton>
                                </th>  
                                <th style="text-align:center">
                                    <asp:Label runat="server" ID="Label4" Text="Azioni" ></asp:Label>
                                </th>
                            </tr>
                        </thead>
                      
                        <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
                    </table>
                </LayoutTemplate>
                <GroupTemplate>
                    <tr>
                        <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
                    </tr>
                </GroupTemplate>
                <ItemTemplate>                                          
                    <td>
                        <asp:LinkButton ID="HyperLink1" runat="server" Text='<%# Eval("RagioneSociale") %>' PostBackUrl="~/Account/Abbinamenti.aspx"  />                        
                    </td>      
                    <td style="text-align:center;padding-top:5px;padding-bottom:0px">
                        <asp:LinkButton runat="server" ID="btnDelete" ToolTip="Elimina abbinamento" CssClass="mdi mdi-delete" Style="font-size:21px" CausesValidation="false"
                            CommandName="Elimina" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Id") %>' OnClientClick="return sweetAlertConfirm(this);" >
                        </asp:LinkButton>                                                
                    </td>
                </ItemTemplate>  
                                        
            </asp:ListView>
            <asp:ObjectDataSource runat="server" ID="odsListAbbinati" TypeName="BusinessLogic.BLL.ClienteUtente"  SelectMethod="ListaAbbinati" >
                <SelectParameters>
                    <asp:QueryStringParameter QueryStringField="UserId" Name="IdUtente" DbType="String"  />
                </SelectParameters>
            </asp:ObjectDataSource>                                
    

    and this javascript:

    <script type="text/javascript">
    
        function sweetAlertConfirm(btnDelete) {
    
            if (btnDelete.dataset.confirmed) {
                // The action was already confirmed by the user, proceed with server event
                btnDelete.dataset.confirmed = false;
                return true;
            } else {
                // Ask the user to confirm/cancel the action
                event.preventDefault();
                swal({
                    title: 'Confermi la cancellazione del record?',
                    text: "L'operazione non sarà ripristinabile",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ok'
                })
                    .then(function () {
                        // Set data-confirmed attribute to indicate that the action was confirmed
                        btnDelete.dataset.confirmed = true;
                        // Trigger button click programmatically
                        btnDelete.click();
                    }).catch(function (reason) {
                        // The action was canceled by the user
                        return false
                    });
            }
        }    
    </script>

    I found this code from a similar example.

    Everything works except that when in the confirmation window I click on the cancel button the record is deleted anyway.

    What do I have to change to make the code work?

    Ps. I use Masterpage.

    Friday, March 27, 2020 4:24 PM

Answers

  • User31164289 posted

    I have found my problem.

    Sweetalert version in use on my web app is 7.33.1. In you example version is 6.3.8

    If I change to new version all work.

    So I think there is a bug in old library.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 1, 2020 1:27 PM

All replies

  • User-474980206 posted

    in the promise resolution from fire(), you always delete, you do not check the dismiss value. cancel is not an error. see the docs for handling a dismissal.

    Friday, March 27, 2020 6:37 PM
  • User31164289 posted

    Can you show me how?

    I'm not an jquery expert.

    Thanks

    Friday, March 27, 2020 7:08 PM
  • User31164289 posted

    Anyone can help me?

    Monday, March 30, 2020 1:05 PM
  • User1535942433 posted

    Hi clembo67,

    Accroding to your description and codes,I create a demo and works fine.I suggest you could press F12 to check the problem of the javascript of swal.

    Besides,could you post full codes about your masterpage and the code-behind?It will help us to solve your problem.

    More details,you could refer to below codes:

    master page:

    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </form>
    </body>

    ASPX:

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
         <link media="screen" rel="stylesheet" href="https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.min.css" />
        <link media="screen" rel="stylesheet" href='https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.css' />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script type="text/javascript" src="https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.min.js"> </script>
       <script type="text/javascript">
    
        function sweetAlertConfirm(btnDelete) {
    
            if (btnDelete.dataset.confirmed) {
                // The action was already confirmed by the user, proceed with server event
                btnDelete.dataset.confirmed = false;
                return true;
            } else {
                // Ask the user to confirm/cancel the action
                event.preventDefault();
                swal({
                    title: 'Confermi la cancellazione del record?',
                    text: "L'operazione non sarà ripristinabile",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ok'
                })
                    .then(function () {
                        // Set data-confirmed attribute to indicate that the action was confirmed
                        btnDelete.dataset.confirmed = true;
                        // Trigger button click programmatically
                        btnDelete.click();
                    }).catch(function (reason) {
                        // The action was canceled by the user
                        return false
                    });
            }
        }    
    </script>
         <div>
                <asp:ListView ID="lvwAssociazioni" runat="server" GroupPlaceholderID="groupPlaceHolder1"  ItemPlaceholderID="itemPlaceHolder1" OnItemCommand="lvwAssociazioni_ItemCommand" OnItemDeleting="lvwAssociazioni_ItemDeleting">
                    <LayoutTemplate>
                    <table class="table table-striped dt-responsive nowrap" id="datatable-buttons" style="width:100%">
                        <thead>
                            <tr>
                                <th>
                                    <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Sort" CommandArgument="Ragionesociale">
                                        <asp:Label runat="server" ID="Label0" Text="Ragionesociale" ></asp:Label>
                                    </asp:LinkButton>
                                </th>  
                                <th style="text-align:center">
                                    <asp:Label runat="server" ID="Label4" Text="Azioni" ></asp:Label>
                                </th>
                            </tr>
                        </thead>
                      
                        <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
                    </table>
                </LayoutTemplate>
                <GroupTemplate>
                    <tr>
                        <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
                    </tr>
                </GroupTemplate>
                    <ItemTemplate>
                        <td>
                            <asp:LinkButton ID="HyperLink1" runat="server" Text='<%# Eval("name") %>' PostBackUrl="~/Account/Abbinamenti.aspx" />
                        </td>
                        <td style="text-align: center; padding-top: 5px; padding-bottom: 0px">
                            <asp:LinkButton runat="server" ID="btnDelete" CommandName="Delete" ToolTip="Elimina abbinamento" CssClass="mdi mdi-delete" Style="font-size:21px" CausesValidation="false" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "id") %>' OnClientClick="return sweetAlertConfirm(this);">LinkButton
                            </asp:LinkButton>
                    
                        </td>
                    </ItemTemplate>
                </asp:ListView>
            </div>
    </asp:Content>

    Code-behind:

    protected void Page_Load(object sender, EventArgs e)
            {
                var xy = new List<Test>()
               {
                       new Test(){id=1,name="AA" },
                       new Test(){id=2,name="BB" },
                       new Test(){id=3,name="CC"},
                   };
    
                lvwAssociazioni.DataSource = xy;
                lvwAssociazioni.DataBind();
            }
            protected void lvwAssociazioni_ItemCommand(object sender, ListViewCommandEventArgs e)
            {
                if (e.CommandName == "Delete")
                {
                    e.Item.Visible = false;
                }
            }
    
            protected void lvwAssociazioni_ItemDeleting(object sender, ListViewDeleteEventArgs e)
            {
    
            }

    Result:

    Best regards,

    Yijing Sun

    Tuesday, March 31, 2020 9:26 AM
  • User31164289 posted

    Hi yin sun,

    thanks for your reply.

    My master page, in addition to html code, the page contains following references to the jquery libraries in a scriptmanager control:

     <asp:ScriptManager runat="server" ID="ScriptManager1" LoadScriptsBeforeUI="false" >
                <Scripts>                            
                    <asp:ScriptReference  Path="~/Scripts/vendor.min.js"/>                    
                    <asp:ScriptReference  Path="~/Scripts/jquery.dataTables.min.js"/>
                    <asp:ScriptReference  Path="~/Scripts/dataTables.bootstrap4.js"/>
                    <asp:ScriptReference  Path="~/Scripts/dataTables.responsive.min.js"/>
                    <asp:ScriptReference  Path="~/Scripts/responsive.bootstrap4.min.js"/>   
                    <asp:ScriptReference  Path="~/Scripts/dataTables.buttons.min.js"/>   
                    <asp:ScriptReference  Path="~/Scripts/buttons.bootstrap4.min.js"/>    
                    <asp:ScriptReference  Path="~/Scripts/buttons.html5.min.js"/>                            
                    <asp:ScriptReference  Path="~/Scripts/buttons.flash.min.js"/>      
                    <asp:ScriptReference  Path="~/Scripts/buttons.print.min.js"/>      
                    <asp:ScriptReference  Path="~/Scripts/dataTables.keyTable.min.js"/>      
                    <asp:ScriptReference  Path="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"/>   
                    <asp:ScriptReference  Path="~/Scripts/dataTables.select.min.js"/>                    
                    <asp:ScriptReference  Path="~/Scripts/pdfmake/pdfmake.min.js"/>                        
                    <asp:ScriptReference  Path="~/Scripts/pdfmake/vfs_fonts.js"/>     
                    <asp:ScriptReference  Path="~/Scripts/switchery/switchery.min.js"/> 
                    <asp:ScriptReference  Path="~/Scripts/bootstrap-select/bootstrap-select.min.js"/> 
                    <asp:ScriptReference  Path="~/Scripts/select2/select2.min.js"/> 
                    <asp:ScriptReference  Path="~/Scripts/sweetalert2/sweetalert2.min.js"/> 
                    <asp:ScriptReference  Path="~/Scripts/tippy-js/tippy.all.min.js"/>                                  
                </Scripts>
            </asp:ScriptManager>  

    and css reference;

    <!-- App css -->
        <link href="Css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="Css/icons.min.css" rel="stylesheet" type="text/css" />    
        <!-- third party css -->
                
        <link href="Css/datatables/dataTables.bootstrap4.css" rel="stylesheet" type="text/css" />
        <link href="Css/datatables/responsive.bootstrap4.css" rel="stylesheet" type="text/css" />
        <link href="Css/datatables/buttons.bootstrap4.css" rel="stylesheet" type="text/css" />
        <%--<link href="Css/datatables/select.bootstrap4.css" rel="stylesheet" type="text/css" />  --%>
        <link href="Scripts/switchery/switchery.min.css" rel="stylesheet" type="text/css" />
        <link href="Scripts/select2/select2.min.css" rel="stylesheet" type="text/css" />
        <link href="Scripts/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
    <%--    <link href="Scripts/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" type="text/css" />--%>
        <link href="Css/app.min.css" rel="stylesheet" type="text/css" />  

    I don't understand why your example works while mine doesn't. The fact is that when I run the command the system continues with execution even if I answer no.

    I try as soon as possible to post the complete code

    Wednesday, April 1, 2020 9:38 AM
  • User31164289 posted

    I have found my problem.

    Sweetalert version in use on my web app is 7.33.1. In you example version is 6.3.8

    If I change to new version all work.

    So I think there is a bug in old library.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 1, 2020 1:27 PM