locked
how to put confirmation message box on run-time generated delete link RRS feed

  • Question

  • User1052662409 posted

    Hi All,

    I am loading data using jquery ajax method and at same time I am table and rows are creating by placing a loop.

      $(dt).each(function (i) {
                        _OT += "<tr><td>" + dt[i].vcname + "</td>";
                        _OT += "<td>" + dt[i].vcrate_phour + "</td>";
                        _OT += "<td>" + dt[i].dateadded + "</td>";
                        _OT += "<td><a href=\"../Edit/" + dt[i].bigid +"\"><img src=\"../../images/edit.gif\" alt=\"edit\" style=\"cursor:pointer;\" /></a>&nbsp;<img src=\"../../images/remove.gif\" alt=\"delete\" style=\"cursor:pointer;\" onclick=\"javascript:_delete_OT('" + dt[i].bigid + "');\"/></td></tr>";
    
                    });

    It's working fine no issue. 

    I just want to put a confirmation box when someone clicks on delete image link.

    <img src=\"../../images/remove.gif\" alt=\"delete\" style=\"cursor:pointer;\" onclick=\"javascript:_delete_OT('" + dt[i].bigid + "');\"/>

    I am already calling a function on click onclick=\"javascript:_delete_OT.

    How to put confirmation message box here.

    Friday, May 24, 2019 6:54 AM

All replies

  • User665608656 posted

    Hi demoninside,

    According to your description and the code you provided, you have written the JS method in the onclick event of img: _delete_OT.

    Therefore, to add a confirmation box when clicking on this img, you could add confirm('do you want to delete this row?') directly in this method before you perform the deletion operation. 

    For more details, you could refer to this example:

    <script type="text/javascript">
            function _delete_OT() {
                if (confirm("Do you want to delete this row?")) {
                    //delete the row
                    alert("delete success!");
                } else {
                    return false;
                }
            }
        </script>

    The result of my demo:
      


    Best Regards,

    YongQing.

    Friday, May 24, 2019 9:52 AM
  • User1052662409 posted

    For more details, you could refer to this example:

    I did the same but not working.

     function _delete_OT(_id) {
    
            $.ajax({
                type: "POST",
                url: "/OT.ashx",
                data: { "Delete_OT": _id },
                context: document.body,
                async: false,
                success: function (response) {
                    if (response == "Yes") {
    
                        if (confirm("Do you want to delete this row?")) {
                            //delete the row
                            alert("delete success!");
                        } else {
                            return false;
                        }
                    }
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
    
            fillvalue();
        }
    </script>

    Friday, May 24, 2019 10:14 AM
  • User475983607 posted

    The success callback function runs once the call to OT.ashx returns.   Therefore, your design will not work as it asks the user if they want to delete after the delete accurately happened.

    You'll need to rethink the design.  First, invoke the confirm(), see the previous post.  Then call the AJAX function if the user selects Ok.  

    On a side note, do not configure AJAX to run synchronously.

    async: false,

    Friday, May 24, 2019 10:49 AM
  • User665608656 posted

    Hi demoninside,

    As mgebhard said,you need to write confirm's judgment outside of the Ajax method.

    Confirm true to enter the Ajax method to perform deletion.Otherwise, you don't need to enter the Ajax method.

    Here is my detailed code based on the codes you provided:

    <script type="text/javascript">
            function _delete_OT(_id) {
                if (confirm("Do you want to delete this row?")) {
                    $.ajax({
                        type: "POST",
                        url: "/OT.ashx",
                        data: { "Delete_OT": _id },
                        context: document.body,
                        async: true,
                        success: function (response) {
                            if (response == "Yes") {
                                alert("delete success!");
                            }
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        },
                        error: function (response) {
                            alert(response.responseText);
                        }
                    });
    
                    fillvalue();
                } else {
                    return false;
                }
            }
    
        </script>

    Best Regards,

    YongQing.

    Monday, May 27, 2019 8:22 AM
  • User-2054057000 posted

    On dynamically created html controls when you add click events then they do not work. In such controls you will have to add the click event by using jQuery .on() method like shown below:

    <div id="div3">
    // create dynamic img tag here
    </div>
    $("#div3").on("click", "img", function () {
        alert('I am clicked');
    });

    Thank you !

    Tuesday, May 28, 2019 2:45 AM