troubleshooting Question

jQuery Javascript adds an extra row to the table in MVC

Avatar of jwebster77
jwebster77 asked on
.NET MVCHTMLJavaScriptjQuery
11 Comments1 Solution162 ViewsLast Modified:
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>


**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);
            }
        }


**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();
        });   
ASKER CERTIFIED SOLUTION
leakim971
Multitechnician
Join our community to see this answer!
Unlock 1 Answer and 11 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 11 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros