We help IT Professionals succeed at work.
Get Started

jQuery Javascript adds an extra row to the table in MVC

jwebster77
jwebster77 asked
on
160 Views
Last Modified: 2019-12-18
Hi,
I have a main view which has a "Comments" link on each row that when clicked it opens up a partial view. The partial view displays a table and textboxes, and an "Add" button that when clicked it adds the data entered in the textboxes to the table.

The first time I click on comments, I add data to the textboxes and hit the Add button and everything works.

The problem is:  when I open the partial view from another record(by clicking on Comments) and add data to the textboxes, after I click on add it adds an extra blank row.  It is as if the add button is clicked twice.  Could you please help me solve this issue?  The code I am using is below.
Thank you very much.

**PARTIAL VIEW:**
        @model IEnumerable<HelpDeskSupport.Models.Comment>

        <html>
        <body>
    <table class="table table-striped table-bordered" cellpadding="0" cellspacing="0" border="0" width="1500" id="tblComments">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.TicketNumber)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Comment1)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.AssignedTo)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.CreatedBy)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Date)
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.TicketNumber)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Comment1)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.AssignedTo)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.CreatedBy)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Date)
                    </td>
                </tr>
            }
            
        </tbody>
        <tfoot>
            <tr>
                <td><input type="text" id="txtTicketNumber" value=@ViewData["NumberFromViewAll"] readonly /></td>
                <td><input type="text" id="txtComment" /></td>
                <td><input type="text" id="txtAssignedTo" /></td>
                <td><input type="text" id="txtCreatedBy" /></td>
                <td><input type="text" id="txtDate" /></td>
                <td><input type="button" id="btnAddComment" value="Add" /></td>
            </tr>
        </tfoot>
    </table>
    <br />
    <input type="button" id="btnSave" value="Save All" />

    @*<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>*@
    <script src="~/Scripts/json2.js"></script>
    <script type="text/javascript">
        $("body").on("click", "#btnAddComment", function () {
            //Reference the TextBoxes
            var txtTicketNumber = $("#txtTicketNumber");
            var txtComment = $("#txtComment");
            var txtAssignedTo = $("#txtAssignedTo");
            var txtCreatedBy = $("#txtCreatedBy");
            var txtDate = $("#txtDate");

            //Get the reference of the Table's TBODY element
            var tableBody = $("#tblComments > TBODY")[0];
            //Add Row
            var row = tableBody.insertRow(-1);

            //Add TicketNumber cell          
            var cell = $(row.insertCell(-1));
            cell.html(txtTicketNumber.val());

            //Add Comment cell
            cell = $(row.insertCell(-1));
            cell.html(txtComment.val());

            //Add AssignedTo cell
            cell = $(row.insertCell(-1));
            cell.html(txtAssignedTo.val());

            //Add CreatedBy cell
            cell = $(row.insertCell(-1));
            cell.html(txtCreatedBy.val());

            //Add Date cell
            cell = $(row.insertCell(-1));
            cell.html(txtDate.val());           

            //Clear the TextBoxes
            txtComment.val("");
            txtAssignedTo.val("");
            txtCreatedBy.val("");
            txtDate.val("");
        });

        $("body").on("click", "#btnSave", function () {
            //Loop through the Table rows and build a JSON array
            var commentsArray = new Array();
            $("#tblComments TBODY TR").each(function () {
                var row = $(this);
                var commentLine = {};
                commentLine.TicketNumber = row.find("TD").eq(0).html();
                commentLine.Comment1 = row.find("TD").eq(1).html();
                commentLine.AssignedTo = row.find("TD").eq(2).html();
                commentLine.CreatedBy = row.find("TD").eq(3).html();
                commentLine.Date = row.find("TD").eq(4).html();
                commentsArray.push(commentLine);
            });

            //Send the JSON array to Controller using AJAX
            $.ajax({
                type: "POST",
                url: "/Tickets/InsertComments",
                data: JSON.stringify(commentsArray),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function () {
                    alert("Comment(s) inserted.");
                }
            });
        });
    </script>
</body>
</html>

Open in new window



**CONTROLLER:**
         //VIEW ALL COMMENTS AND DISPLAY IN PARTIAL
        [HttpPost]
        public ActionResult ViewComments(int ticketNum)
        {
            List<Comment> AllComments = new List<Comment>();
            using (DBModel db = new DBModel())
                AllComments = db.Comments.Where(x => x.TicketNumber == ticketNum).ToList();

            //get iNumber from ViewAll to display in the ticket number textbox of the comments partial view
            ViewData["NumberFromViewAll"] = ticketNum;

            return PartialView("ViewComments", AllComments);
        }

        public JsonResult InsertComments(List<Comment> commentsArray)
        {
            using (DBModel db = new DBModel())
            {
                if (commentsArray != null)
                {
                    var lastColumnComments = commentsArray.Last();
                    var ticketNumberToDelete = lastColumnComments.TicketNumber;
                    var sqlQuery = "Delete [Comments] where TicketNumber = " + ticketNumberToDelete;
                    //Delete all comments from comments table. Previous comments are copied in javascript and re-populated
                    db.Database.ExecuteSqlCommand(sqlQuery);
                }

                //Check for NULL
                //if (commentsArray == null)
                //{
                //    commentsArray = new List<Comment>();
                //}

                foreach (Comment c in commentsArray)
                {
                    db.Comments.Add(c);
                }               
                int insertedRecords = db.SaveChanges();
                return Json(insertedRecords);
            }
        }

Open in new window



**IN CASE YOU WANT TO SEE HOW THE VIEWCOMMENTS IS DISPLAYED FROM THE MAIN VIEW:**
      @section modalComments
    {
    <script type="text/javascript">
        function showComments() {
            $("#dialog").dialog({
                autoOpen: false,
                modal: true,
                title: "View Details"
            });
            $("#ticketTable .details").click(function () {
                var ticketNum = $(this).closest("tr").find("td").eq(0).html();
                $.ajax({
                    type: "POST",
                    url: "/Tickets/ViewComments",
                    data: '{ticketNum: "' + ticketNum + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "html",
                    success: function (response) {
                        $('#dialog').html(response);
                        $('#dialog').dialog('open');
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        };

        $(function () {
            showComments();
        });   

Open in new window

Comment
Watch Question
Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2020
Commented:
This problem has been solved!
Unlock 1 Answer and 11 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE