locked
Add a Delete Button Dynamically to an HTML Partial View Table RRS feed

  • Question

  • User-1244692504 posted

    Please, I don't know what I am doing wrongly, the delete button is not working on my Partial View HTML table. It works with JavaScript when the user checked the checkboxes for multiple rows deletion. But when I applied the JQuery, it's not responding.


    YiuiSun has helped me out with the Contact Form. I wanted to apply the same logic to the Partial View which is a bit complex than the Contact Form, but not working. I am new to JQuery, please.

    My Model.

        public class ClientPolicyViewModel
        {
            public Underwriting_PolicyFile Underwriting_PolicyFile { get; set; }
            public ClientPolicyScheduleViewModel ClientPolicyScheduleViewModel { get; set; }
    }

    Underwriting_PolicyFile Model

                public string PolicyRefCode { get; set; }
                public string PolicyCode { get; set; }
                public string ClientCode { get; set; }

    ClientPolicyScheduleViewModel Model

    public class ClientPolicyScheduleViewModel
        {
            public IList<Underwriting_Policy_Schedule> Underwriting_Policy_Schedule { get; set; }
            public string Message { get; set; }
            public bool IsError {get; set;}
            public decimal TotalCalculatedPremium { get; set; }
            public decimal AdditionalPremiumAmount { get; set; }
            public decimal RenewalPremiumAmount { get; set; }
            public decimal? SumInsured { get; set; }
    
        }

    Underwriting_Policy_Schedule Model

     public class Underwriting_Policy_Schedule
        {
            [IdentityPrimaryKey()]
            public int RecordID { get; set; }
            public string PolicyRefCode { get; set; }
            public string PolicyCode { get; set; }
    }

    My Parent View

    @using Brokerage.Utility;
    @using Brokerage.Web.Common;
    @model Brokerage.Model.ClientPolicyViewModel
    
    @{
        ViewBag.Title = "Create/Edit Client Policy";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    @section MainContent {
    
        @{    
          string postToAction = ViewBag.PostTo as string;
        }
        @using (Html.BeginForm(postToAction, "Underwriting", FormMethod.Post, new { id = "clientPolicyForm", enctype="multipart/form-data"}))
        {
        @Html.AntiForgeryToken()
        <div class="container-fluid" style="background:#e8c8d8; border-radius:8px">
    
            <div class="row">
                <div class="col-md-12 col-sm-8 col-xs-12 col-xs-offset-0">
    
        <hr style="background:#e8c8d8;border-color:#e8c8d8; color:#e8c8d8;" />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @{
            string scheduleState = ViewBag.ScheduleDetailState as string;
            @Html.Hidden("ScheduleDetailState", scheduleState)
        }
    
        @{if (!string.IsNullOrEmpty(Model.Underwriting_PolicyFile.PolicyRefCode))
        {
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="form-group">
                        @Html.LabelFor(model => model.Underwriting_PolicyFile.PolicyRefCode, "Policy_Ref No", htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Underwriting_PolicyFile.PolicyRefCode, new { id = "Underwriting_PolicyFile.PolicyRefCode", htmlAttributes = new { @class = "form-control input-sm", @readonly = true } })
                            @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.PolicyRefCode, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
                  <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="form-group">
                        @Html.LabelFor(model => model.Underwriting_PolicyFile.PolicyCode, "Policy Type",htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.Hidden("Underwriting_PolicyFile.PolicyCode", Model.Underwriting_PolicyFile.PolicyCode)
                            @Html.DropDownList("Underwriting_PolicyFile.PolicyCode", new SelectList(Html.PolicyCodeDropDownList(), "PolicyCode", "FullDescription", Model.Underwriting_PolicyFile.PolicyCode), new { id = "Underwriting_PolicyFile.PolicyCode", @class = "form-control input-sm", @disabled = "disabled" })
                            @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.PolicyCode, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="form-group">
                        @Html.LabelFor(model => model.Underwriting_PolicyFile.PolicyNumber, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Underwriting_PolicyFile.PolicyNumber, new { id = "Underwriting_PolicyFile.PolicyNumber", htmlAttributes = new { @class = "form-control input-sm" } })
                            @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.PolicyNumber, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </>

    <div>
    <button type="button" class="btn btn-primary" onclick="ShowPolicyScheduleDialog(this, 'PolicyCode');">Policy Schedule</button>

    </div>

    }



    JavaScripts/JQuery

    Scripts{
    
    function ShowPolicyScheduleDialog(btn, policyCodeTagID) {
            var result = getScheduleID(policyCodeTagID, true);
            if (result == true) {
                $('#scheduleDialog').modal('show');
            }
        }
    }
    
    function addRow(tableID) {
            var table = document.getElementById(tableID);
            //var rowZeroId = table.rows[0].id;
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            row.id = "X" + rowCount;
            var colCount = table.rows[1].cells.length;
    
            for (var i = 0; i < colCount; i++) {
    
                var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[1].cells[i].innerHTML.replace(/X1/g, row.id);
                switch (newcell.childNodes[0].type) {
                    case "text":
                        newcell.childNodes[0].value = "";
                        break;
                    case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                    case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
                    case "hidden":
                        newcell.childNodes[0].value = "";
                        break;
                }
            }
        }
    
    
    function deleteRow(tableID) {
            try {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
                for (var i = 1; i < rowCount; i++) {
                    var c = document.getElementById("Underwriting_PolicyFile.DocumentAttachment[X" + i + "].isDeletedCheckBox");
                    if (c.checked) {
                        if (rowCount <= 2) {
                            BootstrapDialog.alert("Cannot delete all the rows.");
                            break;
                        }
                        else {
                            c.closest("tr").remove();
                            //rowCount--;
                        }
                    }
                }
            } catch (e) {
                BootstrapDialog.alert(e);
            }
        }
    
    
        function deleteScheduleRow(tableID) {
            try {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
                for (var i = 1; i < rowCount; i++) {
                    var c = document.getElementById("ClientPolicyScheduleViewModel.Underwriting_Policy_Schedule[X" + i + "].isDeletedSheduleRow");
                    if (c.checked) {
                        if (rowCount <= 0) {
                            BootstrapDialog.alert("Cannot delete all the rows.");
                            break;
                        }
                        else {
                            c.closest("tr").remove(i);
                        }
                    }
                }
            } catch (e) {
                BootstrapDialog.alert(e);
            }
        }
    
    
       function removeRow(tableID) {
            var tbl = document.getElementById(tableID);
            var lastRow = tbl.rows.length;
            if (lastRow > 2) tbl.deleteRow(lastRow - 1);
        }
    
    
      //JQuery for the Control Buttons on the Policy Schedule
        $("#addNewRow").click(function () {
            var clonedRow = $("#requestScheduleItem tbody tr:first").clone();
            clonedRow.find('input').val('');
            clonedRow.find("input[type=checkbox]").attr("checked", false);
            $('#requestScheduleItem tbody').append(clonedRow);
        });
    
    
        $("#deleteRow").click(function () {
            var table = $("#requestScheduleItem");
            //this cod:at least one must exist.
            var count = table.find("tbody tr").length;
            var selectcount = 0;
            table.find("tbody tr").each(function () {
                if ($(this).find("input[type=checkbox]").is(":checked")) {
                    selectcount++;
                }
            });
    
            if (selectcount == count) {
                BootstrapDialog.alert("Cannot delete all rows");
            } else {
                table.find("tbody tr").each(function () {
                    if ($(this).find("input[type=checkbox]").is(":checked")) {
                        $(this).remove();
                    }
                });
            }
        });
    
    
        $("#requestScheduleItem tbody").on("click", ".delbtn", function () {
            if ($("#requestScheduleItem tbody").find("tr").length <= 1) {
                BootstrapDialog.alert("Cannot delete all rows");
            } else {
                $(this).closest("tr").remove();
            }
        });
    
    
    Scripts

    My Modal View

    My Modal View

    @*Policy Schedule*@ <div class="row"> <div class="col-md-12 col-sm-8 col-xs-12 col-xs-offset-0"> <div id="scheduleDialog" tabindex="-1" role="dialog" aria-labelledby="scheduleDialogLabel" aria-hidden="true" class="modal fade"> <div class="modal-dialog modal-lg" style="height:50vh; max-height:50vh; width:180vh; max-width:180vh; overflow-y: initial !important" > <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="scheduleDialogLabel">Policy Schedule Setup</h4> </div> <div class="modal-body" style="height: 600px; overflow-y: auto; "> <div id="scheduleLoadingDiv"></div> <div id="scheduleDetailsDiv"> @{Html.RenderPartial(PolicyTypeViewList.GetPolicyTypeViewName(Model.Underwriting_PolicyFile.PolicyCode), Model.ClientPolicyScheduleViewModel);} </div> </div> <div class="modal-footer" style="background:#e8c8d8; border-radius:8px"> <button type="button" class="btn btn-primary" onclick="HandlePolicyCalculation(this);"><big style="font-size:17px;"><strong>∑</strong></big><small style="font-size:11px;"> Calculate Premium</small></button> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div>



    PolicyTypeViewList

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Brokerage.Utility;
    
    namespace Brokerage.Web.Common
    {
        public static class PolicyTypeViewList
        {
            private static IDictionary<string, string> viewNameList;
    
            static PolicyTypeViewList()
            {
                viewNameList = new Dictionary<string, string>();
                viewNameList["0001"] ="AllRiskScheduleView";
                viewNameList["0002"] ="AviationScheduleView";
                viewNameList["0085"] ="GPAScheduleView";
            }
    
            public static string GetPolicyTypeViewName(string policyTypeCode)
            {
                if (string.IsNullOrEmpty(policyTypeCode))
                {
                    return "AllRiskScheduleView";
                }
               string viewName = viewNameList[policyTypeCode];
               return viewName;
            }
        }
    }

    PartialView [Dynamic] // Could be either of the Listed PolicyTypeView above

    @using Brokerage.Utility;
    @model Brokerage.Model.ClientPolicyScheduleViewModel
    
    @{if (!string.IsNullOrEmpty(Model.Message))
    {
        var messageType = Model.IsError ? "danger" : "success";
        <div class="row">
            <div class="col-md-12 col-sm-6 col-xs-12">
                <div class="alert alert-@messageType alert-dismissable">
                    <p style="font-size:12px">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">x</button>
                        @Model.Message
                    </p>
                </div>
            </div>
        </div>
    }
    }
    @Html.Hidden("ClientPolicyScheduleViewModel.Underwriting_Policy_Schedule_Header.RecordID", Model.Underwriting_Policy_Schedule_Header.RecordID, new { id = "ClientPolicyScheduleViewModel.Underwriting_Policy_Schedule_Header.RecordID" })
    @Html.Hidden("TotalCalculatedPremium", Model.TotalCalculatedPremium, new { id = "TotalCalculatedPremium" })
    @Html.Hidden("AdditionalPremiumAmount", Model.AdditionalPremiumAmount, new { id = "AdditionalPremiumAmount" })
    @Html.Hidden("RenewalPremiumAmount", Model.RenewalPremiumAmount, new { id = "RenewalPremiumAmount" })
    @Html.Hidden("SumInsured", Model.SumInsured, new { id = "SumInsured" })
    
    <hr />
    <input id="addNewRow" type="button" class="btn btn-primary" value="Add New Item" /> // Not working
    <input id="deleteRow" type="button" class="btn btn-primary" value="Remove" /> // Not working
    <input type="submit" class="btn btn-primary" value="Add New Rows" onclick="addRow('requestScheduleItem'); return false;" /> --working <input type="submit" class="btn btn-primary" value="Remove Last Item" onclick="removeRow('requestScheduleItem'); return false;" /> ----working <input type="submit" class="btn btn-primary" value="Delete" onclick="deleteScheduleRow('requestScheduleItem'); return false;" /> -- working <hr /> <h6><strong style="font-style:italic;">List of Items</strong></h6> <div class="table-responsive"> <table id="requestScheduleItem" class="table table-bordered table-striped table-hover" cellspacing="0"> <thead style=" background-color:#89006e !important; color:#fff;font-weight:bold;"> <tr> <td> <div style="background-color:#89006e !important; color:#fff; text-align:center" class="btn btn-primary btn-sm"> <strong></strong><span class="glyphicon glyphicon-remove center-block"></span> </div> </td>
    <td>Delete</td> <td>Item №</td> <td>Description</td> <td>Effective Date</td> <td>Item Status</td> <td>No of Employee</td> <td>Employee Category</td> </tr> </thead> @{ var prefx = "ClientPolicyScheduleViewModel.Underwriting_Policy_Schedule"; var prefx2 = prefx + ".index"; for (var i = 1; i <= Model.Underwriting_Policy_Schedule.Count(); i++) { var itemIndex = string.Format("X{0}", i); var n6 = string.Format("{1}[X{0}].PolicyRefCode", i, prefx); var n7 = string.Format("{1}[X{0}].isDeletedSheduleRow", i, prefx); var n8 = string.Format("{1}[X{0}].ItemNo", i, prefx); var n9 = string.Format("{1}[X{0}].Description", i, prefx); var n10 = string.Format("{1}[X{0}].InclusionDate", i, prefx); var n11 = string.Format("{1}[X{0}].TransactionCode", i, prefx); var n12 = string.Format("{1}[X{0}].No_of_Employee", i, prefx); var n13 = string.Format("{1}[X{0}].EmployeeCategory", i, prefx); <tr> <td> <input type="hidden" name="@prefx2" value="@itemIndex"/> @Html.Hidden(n6, Model.Underwriting_Policy_Schedule[i - 1].PolicyRefCode, new { id = n6 }) <button type="button" style="background-color:#89006e !important; color:#fff; text-align:center" class="btn-primary btn-xs delbtn"><span class="glyphicon glyphicon-remove"></span></button> </td>
    <td>
    Html.CheckBox(n7, Model.Underwriting_Policy_Schedule[i - 1].isDeletedSheduleRow, new { id = n7, @class = "form-control input-sm", @style = "width: 50px;" }) @Html.ValidationMessage(n7, "", new { @class = "text-danger" }) </td> <td> @Html.TextBox(n8, Model.Underwriting_Policy_Schedule[i - 1].ItemNo, new { id = n8, @class = "form-control input-sm", @style = "width: 50px;" }) @Html.ValidationMessage(n8, "", new { @class = "text-danger" }) </td> <td> @Html.TextBox(n9, Model.Underwriting_Policy_Schedule[i - 1].Description, new { id = n9, @class = "form-control input-sm", @style = "width: 350px;" }) @Html.ValidationMessage(n9, "", new { @class = "text-danger" }) </td> <td> @Html.TextBox(n10, Model.Underwriting_Policy_Schedule[i - 1].InclusionDate, new { id = n10, @class = "form-control input-sm InclusionDatePicker", @style = "width: 100px;" }) @Html.ValidationMessage(n10, "", new { @class = "text-danger" }) </td> <td> @Html.DropDownList(n11, new SelectList(Html.TransactionCodeDropDownList(), "ID", "Value", Model.Underwriting_Policy_Schedule[i - 1].TransactionCode), new { value = Model.Underwriting_Policy_Schedule[i - 1].TransactionCode, id = n11, @class = "form-control input-sm", @style = "width: 120px;" }) @Html.ValidationMessage(n11, "", new { @class = "text-danger" }) </td> <td> @Html.TextBox(n12, Model.Underwriting_Policy_Schedule[i - 1].No_of_Employee, new { id = n12, @class = "form-control input-sm", @style = "width: 150px;" }) @Html.ValidationMessage(n12, "", new { @class = "text-danger" }) </td> <td> @Html.TextBox(n13, Model.Underwriting_Policy_Schedule[i - 1].EmployeeCategory, new { id = n13, @class = "form-control input-sm", @style = "width: 200px;" }) @Html.ValidationMessage(n13, "", new { @class = "text-danger" }) </td> </tr> } } </table> <div class="col-md-6 col-sm-6 col-xs-12"> </div> <hr /> </div>


    The Scripts were placed under the Parent View where the Partial View was called. My problem is how to link the JQuery

    <input id="addNewRow" type="button" class="btn btn-primary" value="Add New Item" /> // Not working

    <input id="deleteRow" type="button" class="btn btn-primary" value="Remove" /> // Not working

     to the table id="requestScheduleItem" under the Partial View

    However, please note that these buttons below are working with the Partial View

    <input type="submit" class="btn btn-primary" value="Add New Rows" onclick="addRow('requestScheduleItem'); return false;" /> <input type="submit" class="btn btn-primary" value="Remove Last Item" onclick="removeRow('requestScheduleItem'); return false;" /> <input type="submit" class="btn btn-primary" value="Delete" onclick="deleteScheduleRow('requestScheduleItem'); return false;" /> 

    But not satisfactorily

    Any help to resolve this problem will be greatly appreciated.

    Kind regards,

    Lawrence

    Wednesday, October 14, 2020 10:49 PM

Answers

  • User1312693872 posted

    Hi,Lawrence_Ajayi

    Lawrence_Ajayi

    The Scripts were placed under the Parent View where the Partial View was called. My problem is how to link the JQuery to the table id="requestScheduleItem" under the Partial View

    You can use F12 to set breakpoints in the browser, which can better help you check js errors.

    According to the code you provided:

    var clonedRow = $("#requestScheduleItem tbody tr:first").clone();

    The requestScheduleItem table do not have the <tbody>, so it can't find the row.So you should add <tbody> to this table,

    and below is my simplified demo, you can check it:

    The table in Partial:

    <table id="requestScheduleItem" class="table table-bordered table-striped table-hover" cellspacing="0">
            <thead style=" background-color:#89006e !important; color:#fff;font-weight:bold;">
                <tr>
                    <td>
                        <div style="background-color:#89006e !important; color:#fff; text-align:center" class="btn btn-primary btn-sm">
                            <strong></strong><span class="glyphicon glyphicon-remove center-block"></span>
                        </div>
                    </td>
                    <td>Delete</td>
                    <td>Item №</td>
                    <td>Description</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        @Html.CheckBox("zz",new {@class = "form-control input-sm", @style = "width: 50px;" })                   
                    </td>
                    <td>
                        newone
                    </td>    
                </tr>
            </tbody>
        </table>

    Result:

    You can check  Descendant Selector  to help you better understanding the jQuery selector.

    Best Regards,

    Jerry Cai

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 15, 2020 5:10 AM

All replies

  • User1312693872 posted

    Hi,Lawrence_Ajayi

    Lawrence_Ajayi

    The Scripts were placed under the Parent View where the Partial View was called. My problem is how to link the JQuery to the table id="requestScheduleItem" under the Partial View

    You can use F12 to set breakpoints in the browser, which can better help you check js errors.

    According to the code you provided:

    var clonedRow = $("#requestScheduleItem tbody tr:first").clone();

    The requestScheduleItem table do not have the <tbody>, so it can't find the row.So you should add <tbody> to this table,

    and below is my simplified demo, you can check it:

    The table in Partial:

    <table id="requestScheduleItem" class="table table-bordered table-striped table-hover" cellspacing="0">
            <thead style=" background-color:#89006e !important; color:#fff;font-weight:bold;">
                <tr>
                    <td>
                        <div style="background-color:#89006e !important; color:#fff; text-align:center" class="btn btn-primary btn-sm">
                            <strong></strong><span class="glyphicon glyphicon-remove center-block"></span>
                        </div>
                    </td>
                    <td>Delete</td>
                    <td>Item №</td>
                    <td>Description</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        @Html.CheckBox("zz",new {@class = "form-control input-sm", @style = "width: 50px;" })                   
                    </td>
                    <td>
                        newone
                    </td>    
                </tr>
            </tbody>
        </table>

    Result:

    You can check  Descendant Selector  to help you better understanding the jQuery selector.

    Best Regards,

    Jerry Cai

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 15, 2020 5:10 AM
  • User-1244692504 posted

    Thank you Jerry for your assistance. I have included the <tbody> as advised. However, the link is not working. I then set the breakpoints in the Chrome and all the JQuery functions worked.

    There is still something wrong with this code. The Jquery function is for delbtn and addNewRow were not accessing the Table  id requestScheduleItem in the Partial View:

    Please kindly assist to go through the Modal view and the Partial View to confirm they are in order. 

    Modal View

     <div class="row">
                <div class="col-md-12 col-sm-8 col-xs-12 col-xs-offset-0">
                    <div id="scheduleDialog" tabindex="-1" role="dialog" aria-labelledby="scheduleDialogLabel" aria-hidden="true" class="modal fade">
                        <div class="modal-dialog modal-lg" style="height:50vh; max-height:50vh; width:180vh; max-width:180vh; overflow-y: initial !important" >
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    
                                  <h4 class="modal-title" id="scheduleDialogLabel">Policy Schedule Setup</h4>
                                </div>
                                <div class="modal-body" style="height: 600px; overflow-y: auto; ">
                                    <div id="scheduleLoadingDiv"></div>
                                    <div id="scheduleDetailsDiv">
                                        @{Html.RenderPartial(PolicyTypeViewList.GetPolicyTypeViewName(Model.Underwriting_PolicyFile.PolicyCode), Model.ClientPolicyScheduleViewModel);}
                                    </div>
                                </div>
                                <div class="modal-footer" style="background:#e8c8d8; border-radius:8px">
                                    <button type="button" class="btn btn-primary" onclick="HandlePolicyCalculation(this);"><big style="font-size:17px;"><strong>∑</strong></big><small style="font-size:11px;"> Calculate Premium</small></button>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

    Partial View

        <input id="addNewRow" type="button" class="btn btn-primary" value="Add New Item" />
        <input type="submit" class="btn btn-primary" value="Add New Item" onclick="addRow('requestScheduleItem'); return false;" />  
        <input type="submit" class="btn btn-primary" value="Remove Last Item" onclick="removeRow('requestScheduleItem'); return false;" />  
        <input type="submit" class="btn btn-primary" value="Delete" onclick="deleteScheduleRow('requestScheduleItem'); return false;" />
        <hr />
        <h6><strong style="font-style:italic;">List of Items</strong></h6>
        <div class="table-responsive">
            <table id="requestScheduleItem" class="table table-bordered table-striped table-hover" cellspacing="0">
                <thead style=" background-color:#89006e !important; color:#fff;font-weight:bold;">
                    <tr>
                        <td>
                            <div style="background-color:#89006e !important; color:#fff; text-align:center" class="btn btn-primary btn-sm">
                                <strong></strong><span class="glyphicon glyphicon-remove center-block"></span>
                            </div>
                        </td>
                        <td>
                            <div style="background-color:#89006e !important; color:#fff; text-align:center" class="btn btn-primary btn-sm">
                                <strong></strong><span class="glyphicon glyphicon-remove center-block"></span>
                            </div>
                        </td>
                        <td>Item №</td>
                        <td>Description</td>
                        <td>Effective Date</td>
                        <td>Item Status</td>
                        <td>No of Employee</td>
                    </tr>
                </thead>
                    @{
                        var prefx = "ClientPolicyScheduleViewModel.Underwriting_Policy_Schedule";
                        var prefx2 = prefx + ".index";
    
                        for (var i = 1; i <= Model.Underwriting_Policy_Schedule.Count(); i++)
                        {
                            var itemIndex = string.Format("X{0}", i);
                            var n6 = string.Format("{1}[X{0}].PolicyRefCode", i, prefx);
                            var n7 = string.Format("{1}[X{0}].isDeletedSheduleRow", i, prefx);
                            var n8 = string.Format("{1}[X{0}].ItemNo", i, prefx);
                            var n9 = string.Format("{1}[X{0}].Description", i, prefx);
                            var n10 = string.Format("{1}[X{0}].InclusionDate", i, prefx);
                            var n11 = string.Format("{1}[X{0}].TransactionCode", i, prefx);
                            var n12 = string.Format("{1}[X{0}].No_of_Employee", i, prefx);
                           <tbody>
                                <tr>
                                    <td>
                                        <input type="hidden" name="@prefx2" value="@itemIndex" />
                                        @Html.Hidden(n6, Model.Underwriting_Policy_Schedule[i - 1].PolicyRefCode, new { id = n6 })
                                        <button type="button" style="background-color:#89006e !important; color:#fff; text-align:center" class="btn-primary btn-xs delbtn"><span class="glyphicon glyphicon-remove"></span></button>
                                        </td>
                                    <td>
                                        @Html.CheckBox(n7, Model.Underwriting_Policy_Schedule[i - 1].isDeletedSheduleRow, new { id = n7, @class = "form-control input-xs", @style = "width: 25px;" })
                                        @Html.ValidationMessage(n7, "", new { @class = "text-danger" })
                                    </td>
                                    <td>
                                        @Html.TextBox(n8, Model.Underwriting_Policy_Schedule[i - 1].ItemNo, new { id = n8, @class = "form-control input-sm", @style = "width: 40px; text-align:center " })
                                        @Html.ValidationMessage(n8, "", new { @class = "text-danger" })
                                    </td>
                                    <td>
                                        @Html.TextBox(n9, Model.Underwriting_Policy_Schedule[i - 1].Description, new { id = n9, @class = "form-control input-sm", @style = "width: 350px;" })
                                        @Html.ValidationMessage(n9, "", new { @class = "text-danger" })
                                    </td>
                                    <td>
                                        @Html.TextBox(n10, Model.Underwriting_Policy_Schedule[i - 1].InclusionDate, new { id = n10, @class = "form-control input-sm InclusionDatePicker", @style = "width: 100px;" })
                                        @Html.ValidationMessage(n10, "", new { @class = "text-danger" })
                                    </td>
                                    <td>
                                        @Html.DropDownList(n11, new SelectList(Html.TransactionCodeDropDownList(), "ID", "Value", Model.Underwriting_Policy_Schedule[i - 1].TransactionCode), new { value = Model.Underwriting_Policy_Schedule[i - 1].TransactionCode, id = n11, @class = "form-control input-sm", @style = "width: 120px;" })
                                        @Html.ValidationMessage(n11, "", new { @class = "text-danger" })
                                    </td>
                                    <td>
                                        @Html.TextBox(n12, Model.Underwriting_Policy_Schedule[i - 1].No_of_Employee, new { id = n12, @class = "form-control input-sm", @style = "width: 150px;" })
                                        @Html.ValidationMessage(n12, "", new { @class = "text-danger" })
                                    </td>
                                    
                                </tr>
                        </tbody>
                        }
                    }
                            
            </table>
            <hr />
            <input type="submit" class="btn btn-primary" value="Add New Item" onclick="addRow('requestScheduleItem'); return false;" />  <input type="submit" class="btn btn-primary" value="Remove Last Item" onclick="removeRow('requestScheduleItem'); return false;" /> <input type="submit" class="btn btn-primary" value="Delete" onclick="deleteScheduleRow('requestScheduleItem'); return false;" />
        </div>

    Please note that the Javascripts/Jquery is under the Parent View where the partial view was called. There is a missing link somewhere.

    below is the code generated by the browser during the debugging

    a:"#addNewRow"
    b: undefined
    c: Array(3)
    0: "#addNewRow"
    1: undefined
    2: "addNewRow"
    groups: undefined
    index: 0
    input: "#addNewRow"
    length: 3

    Any further help will be appreciated.

    Thursday, October 15, 2020 5:56 PM
  • User-1244692504 posted

    I eventually discovered what was missing as I re-examined the scripts again, I moved them from the View class where the Partial View was called (EditClientPolicy) to under the Partial View itself (GPALIABView)and it works like magic. I tested it again without the <tbody> and it also works well.  Nevertheless, I will include the <tbody>. Could the location of the JQuery script affect its functionality?  Based on this experience- Yes. The other buttons that worked were Javascripts placed under the EditClientPolicy view where the partial View was called and they are working well.

    Once again, thank you, Jerry. 

    Friday, October 16, 2020 9:15 AM