We help IT Professionals succeed at work.
Get Started
jQuery Javascript adds an extra row to the table in MVC
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:**
**CONTROLLER:**
**IN CASE YOU WANT TO SEE HOW THE VIEWCOMMENTS IS DISPLAYED FROM THE MAIN VIEW:**
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();
});
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