How to remove row on client side by jQuery based on key auditor id and budget year?

Question

I work on jQuery with asp.net . I face issue I can't remove row from grid view based on key AUD_RECID and P_BUDGET_YEAR .

AUD_RECID with different P_BUDGET_YEAR so I need key will be both from AUD_RECID and P_BUDGET_YEAR

SO I will have unique Value when remove row and it will remove it success based on key contain both (AUD_RECID,P_BUDGET_YEAR)

I can't add P_BUDGET_YEAR with AUD_RECID to be one key for remove this is my issue .

code below working when remove based on AUD_RECID so

my modification need add P_BUDGET_YEAR with AUD_RECID to be as key when delete

what I try as below

1- When press delete row on every row on grid view .

function ADD_AUDITORWithComplain() {
    var AUD_RECID = $("#ddlP_AUDITORS_CURInfo").val();
    var AUD_DESC = $("#ddlP_AUDITORS_CURInfo option:selected").text();
    var P_BUDGET_YEAR = $("#ddlP_BUDGET_YEAR_CUR option:selected").text();
    
    
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "../BusinessLayer/WebMethods.asmx/ADD_AUDITOR_COMPLAIN",
        data: "{'AUD_RECID':'" + AUD_RECID +
            "','AUD_DESC':'" + AUD_DESC +
            "','P_BUDGET_YEAR':'" + P_BUDGET_YEAR +
            "'}",
        dataType: "json",
       
        success: function (Result) {
            CloseLoading();

            $.each(Result.d, function (key, value) {

                if (value.Status == "1") {

                    if (value.ADDED_AUDITORS_INFO != null) {
                        if (value.ADDED_AUDITORS_INFO.length > 0) {
                            $("#gvP_AUDITORS").empty();
                            var rowNo = 1;
                            for (var i in value.ADDED_AUDITORS_INFO) {

                                if (rowNo == 1) {
                                    $("#gvP_AUDITORS").append("<tr class='card-info card-header text-white text-center'><th>م</th><th>مراقب الحسابات</th><th>السنة المالية</th><th></th></tr>");

                                }
                                var row = "<tr align='center' id='tr" + value.ADDED_AUDITORS_INFO[i].AUD_RECID + "' class='record clickable-row'> " + "<td class='tdCount'>" +
                            
                                    (rowNo) + "</td><td>" +
                                    value.ADDED_AUDITORS_INFO[i].AUD_DESC + "</td> <td>" + value.ADDED_AUDITORS_INFO[i].P_BUDGET_YEAR + "</td> <td>" +

                                    " <a href='#' id='" + value.ADDED_AUDITORS_INFO[i].AUD_RECID + "' class='delbutton btn btn-outline-danger' onClick='DELETE_AUDITOR_CONFIRM_COMPLAIN(\"" + value.ADDED_AUDITORS_INFO[i].AUD_RECID +
                                    "\",\"" + value.ADDED_AUDITORS_INFO[i].P_BUDGET_YEAR +
                                    "\",\"" + "هل انت متأكد ؟" +
                                    "\",\"" + "سيتم حذف المراقب : " + value.ADDED_AUDITORS_INFO[i].AUD_DESC +
                                    ", هل تريد المتابعة ؟" + "\");return false;' data-toggle='tooltip' title='" + value.ADDED_AUDITORS_INFO[i].AUD_DESC + " '> حذف</a>" +

                                    " </td></tr>";


                                row = $(row).hide();
                                $('#gvP_AUDITORS').append($(row));
                                rowNo++;


                                $(row).fadeIn(1000);

                            }
                        }
                    }
   

                    $("#ddlP_AUDITORS_CURInfo").val('').trigger("chosen:updated");
                    ModelSuccessDanger('عملية ناجحة', value.StatusDesc, '1', null);

                }
                else {


                    ModelSuccessDanger('عفوا !!', value.StatusDesc, '0', null);
                }
            });
        }
       
    });
}

2- when click yes or no for confirm dialog

function DELETE_AUDITOR_CONFIRM_COMPLAIN(AUD_RECID, P_BUDGET_YEAR,
    title, message) {

    if (custom_confirm(title, message, (ans) => {
        if (ans) {
            DELETE_AUDITOR_COMPLAIN(AUD_RECID, P_BUDGET_YEAR);
            return true;
        } else {

            return false;
        }
    }) == true) {

        return true;
    }
    else {
        return false;
    }

}

3- WHEN change id for delete I need to be based on AUD_RECID and P_BUDGET_YEAR

function DELETE_AUDITOR_COMPLAIN(AUD_RECID, P_BUDGET_YEAR) {


    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "../BusinessLayer/WebMethods.asmx/DELETE_AUDITOR_COMPLAIN",
        data: "{'AUD_RECID':'" + AUD_RECID +
            "','P_BUDGET_YEAR':'" + P_BUDGET_YEAR +
            "'}",
        dataType: "json",
       
        success: function (Result) {
            CloseLoading();

            $.each(Result.d, function (key, value) {

                if (value.Status == "1") {
                    if (AUD_RECID == "") {
                        $("#gvP_AUDITORS").empty();
                    }
                    else {

      

                        var btnDeleteID = AUD_RECID;
                        var record_id = $('#' + btnDeleteID).attr("id");


                     
                        var tr_id = $('#' + btnDeleteID).parents(".record");


    
                        tr_id.css("background-color", "#F2DEDE");

                     
                        tr_id.fadeOut(500, function () {

                            //Remove GridView row
                            tr_id.remove();
                            totalRows = $("#gvP_AUDITORS tr").length;
                            if (totalRows < 2) {
                                $("#gvP_AUDITORS").empty();
                            }
                            var i = 1;
                            $('#gvP_AUDITORS > tr > .tdCount').each(function () {
                                $(this).text(i);
                                i++;
                            });
                        });
                    }

                    //ModelSuccessDanger('عملية ناجحة', value.StatusDesc, '1', null);

                }
                else {


                    ModelSuccessDanger('عفوا !!', value.StatusDesc, '0', null);
                }
            });
        }
    });
}

55555

Answer 1

Hi @Ahmed Salah,

First, you should set the id for the P_BUDGET_YEAR td when creating the row in ADD_AUDITORWithComplain(). This way you can find the P_BUDGET_YEAR data.

Then get the P_BUDGET_YEAR value in the grid view in the DELETE_AUDITOR_COMPLAIN() method for comparison.

ADD_AUDITORWithComplain()

change:

to:

<td id='" + value.ADDED_AUDITORS_INFO[i].P_BUDGET_YEAR + "'>" + value.ADDED_AUDITORS_INFO[i].P_BUDGET_YEAR + "</td>

DELETE_AUDITOR_COMPLAIN(AUD_RECID, P_BUDGET_YEAR)

change:

to:

 if (value.Status == "1") {
     if (AUD_RECID == "") {
         $("#gvP_AUDITORS").empty();
     }
     else {
         var record_id = 'tr' + AUD_RECID;
         var tdYEAR = $('#' + P_BUDGET_YEAR).html();
         if (tdYEAR == P_BUDGET_YEAR) {
             var btnDeleteID = $('#' + tdYEAR).parents().attr("id");
             if (record_id == btnDeleteID) {
                 var tr_id = $('#' + tdYEAR).parents(".record");
                 tr_id.css("background-color", "#F2DEDE");
                 tr_id.fadeOut(500, function () {
                     //Remove GridView row
                     tr_id.remove();
                     totalRows = $("#gvP_AUDITORS tr").length;
                     if (totalRows < 2) {
                         $("#gvP_AUDITORS").empty();
                     }
                     var i = 1;
                     $('#gvP_AUDITORS > tr > .tdCount').each(function () {
                         $(this).text(i);
                         i++;
                     });
                 });
             }
         }
     }
     //ModelSuccessDanger('عملية ناجحة', value.StatusDesc, '1', null);
 }

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.