We Keep Coding

Javascript execution of a function from button click or within a function

I've been trying to do something that I believe is really simple but, unfortunately for me, I'm unable to find the proper way of doing it (I have a stronger PHP background than jQuery/JS).
The overall goal is to add a line either clicking the "Add more" button OR when the user click on any of the autocomplete field.
The table code is:
<div class="container">
<table border='1' style='border-collapse: collapse;' id="myTable">
<thead>
<tr>
<th>Product No</th>
<th>Qty</th>
<th>Description</th>
<th>Price</th>
<th>DEL</th>
</tr>
</thead>
<tbody>
<tr class='tr_input'>
<td><input type='text' class='produitno' id='produitno_1' placeholder='Enter productno' size="12"></td>
<td><input type='text' class='qty' id='qty_1' placeholder='Enter qty' size="5"></td>
<td><input type='text' class='description' id='description_1' size="50" readonly="readonly" ></td>
<td><input type='text' class='prix' id='prix_1' size="12" ></td>
<td><button onclick = "deleteRow(this)">REMOVE</button></td>
</tr>
</tbody>
</table>
<br>
<input type='button' value='Add more' id='addmore'>
</div>
The script portion is:
<script>
//Count as a global variable, not local
var count=1;
$(document).ready(function(){
$(document).on('keydown', '.produitno', function() {
var id = this.id;
var splitid = id.split('_');
var index = splitid[1];
// Initialize jQuery UI autocomplete
$( '#'+id ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "db/getDetails.php",
type: 'post',
dataType: "json",
data: {
search: request.term,request:1
},
success: function( data ) {
response( data );
}
});
},
select: function (event, ui) {
$(this).val(ui.item.label); // display the selected text
var ID = ui.item.value; // selected value
// AJAX
$.ajax({
url: 'db/getDetails.php',
type: 'post',
data: {ID:ID,request:2},
dataType: "json",
success:function(response){
var len = response.length;
if(len > 0){
var produitno = response[0]['produitno'];
var description = response[0]['description'];
var prix = response[0]['prix'];
// Set value to textboxes
document.getElementById('description_'+index).value = description;
document.getElementById('prix_'+index).value = prix;
// ADD LINE
}
}
});
return false;
}
});
});
// Add more
$('#addmore').click(function(){
// Get last id
var produitno_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
var split_id = produitno_id.split('_');
// New index
var index = Number(split_id[1]) + 1;
// Create row with input elements
var html = "<tr class='tr_input'><td><input type='text' size='12' class='produitno' id='produitno_"+index+"' placeholder='Enter produitno'></td><td><input type='text' size='5' class='qty' id='qty_"+index+"' placeholder='Enter qty'></td><td><input type='text' class='description' size='50' readonly='readonly' id='description_"+index+"' ></td><td><input type='text' size='12' class='prix' id='prix_"+index+"' ></td><td><button onclick='deleteRow(this)'>REMOVE</button></td></tr>";
// Append data
$('tbody').append(html);
// Ajoute 1 à la variable count
count++;
});
});
function deleteRow(btn) {
if (count > 1){
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
count--;
};
};
</script>
I was originally thinking creating a separate function called "Add Row" and this function would be called by default by the $('#addmore') button OR be executed right after we set the text box values. Is this the proper way of doing it or there is a better way?

With a restful night of sleep I finally found the solution. I simply created a separate function that is either called by the button or is executed when autocomplete is clicked.
...
// Set value to textboxes
document.getElementById('description_'+index).value = description;
document.getElementById('prix_'+index).value = prix;
addRow();
}
}
});
return false;
}
});
});
// Add more
$('#addmore').click(addRow);
// FUNCTION
function addRow(){
// Get last id
var produitno_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
var split_id = produitno_id.split('_');
// New index
var index = Number(split_id[1]) + 1;
// Create row with input elements
var html = "<tr class='tr_input'><td><input type='text' size='12' class='produitno' id='produitno_"+index+"' placeholder='Enter produitno'></td><td><input type='text' size='5' class='qty' id='qty_"+index+"' placeholder='Enter qty'></td><td><input type='text' class='description' size='50' readonly='readonly' id='description_"+index+"' ></td><td><input type='text' size='12' class='prix' id='prix_"+index+"' ></td><td><button onclick='deleteRow(this)'>REMOVE</button></td></tr>";
// Append data
$('tbody').append(html);
// Ajoute 1 à la variable count
count++;
}
});

jQuery Javascript adds an extra row to the table in MVC

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. I also attached pics.
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>
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();
});

Get value from a table cell and display in partial view table cell in MVC

I have a main form displaying data. Then I have a "Comments" link on each row and on the click of it a partial view with a table opens up. The partial view is to view/add comments and other data. In this partial view, after the table, there are textboxes I can fill with data. After adding data I click on "Add" and when I am done I would click on "Save" and whatever I typed in the textboxes is entered in the database. This all works and gives you an idea of what I am working with(see attached pics as well).
What I am looking for now is a way to fill the Ticket Number textbox(on the partial view) with the number from the Number field(on main form). Also, this number should not be edited on the partial. How can I achieve that?
I have been unable to find a solution. Please help. Thank you.
THIS IS THE CODE IN THE 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();
return PartialView("ViewComments", AllComments);
}
//INSERT COMMENT
public JsonResult InsertComments(List<Comment> commentsArray)
{
using (DBModel db = new DBModel())
{
//Truncate Table to delete all comments. Previous comments are copied in javascript and re-populated
db.Database.ExecuteSqlCommand("TRUNCATE TABLE [Comments]");
//Check for NULL
if (commentsArray == null)
{
commentsArray = new List<Comment>();
}
foreach (Comment comment in commentsArray)
{
db.Comments.Add(comment);
}
int insertedRecords = db.SaveChanges();
return Json(insertedRecords);
}
}
THIS IS HOW THE PARTIAL VIEW 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();
});
</script>
}
THIS IS THE 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=""/></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 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 tBody = $("#tblComments > TBODY")[0];
//Add Row
var row = tBody.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
txtTicketNumber.val("");
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>

This was solved by using the following line of code:
<td><input type="text" id="txtTicketNumber" value=#ViewData["NumberFromViewAll"] readonly /></td>

jQuery Datatable, editing selected rows data with html text boxes

I'm fairly new to coding. I have a jQuery datatable, and when I select a row, the tds of that row fill out html textboxes above the table. I'm trying to make it so whatever is entered into those textboxes (and upon pressing the save button), is then saved into the row.
Currently I have it so it saves 1 field/td. If I press on column 0, fill out the Name textbox and press save, it saves. But it works on any column. It should only be editing the correct td. Plus I want to edit the entire row, not just one td. I'm not sure how to accomplish this. Thanks for any help!
JSFiddle
Javascript:
var table = $('#example').DataTable();
(function () {
var table = document.querySelector('#example');
var name = document.querySelector('#nameinput');
var format = document.querySelector('#formatinput');
var address = document.querySelector('#addressinput');
var report = document.querySelector('#reportinput');
var alarm = document.querySelector('#alarminput');
table.addEventListener('click', onTableClick);
function onTableClick (e) {
var tr = e.target.parentElement;
var data = [];
for (var td of tr.children) {
data.push(td.innerHTML);
}
name.value = data[0];
address.value = data[1];
format.value = data[2];
report.value = data[3];
alarm.value = data[4];
console.log(alarm.value);
}
$("#saverow").click(function() {
var table1 = $('#data-table').DataTable();
var data = [];
data[0] = name.value;
data[4] = alarm.value;
console.log(name.value);
console.log(alarm.value);
table1.draw(true);
});
})();`
I've updated my code with what I've tried so far. Currently, what I type in the textboxes, correctly is displayed in the console (upon hitting the saverow button), now I cant figure out how to save that into the table.

i think it is mor responsive to edit data right in the table.
HTML:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Format</th>
<th>Report Time</th>
<th>Alarms</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>Tiger#gmail.com</td>
<td>email</td>
<td>1PM</td>
<td>Master</td>
<td class="td-button"></td>
</tr>
<tr>
<td>Bill Gates</td>
<td>111-111-1111</td>
<td>sms</td>
<td></td>
<td>Master</td>
<td class="td-button"></td>
</tr>
</tbody>
</table>
JS:
var table = $('#example').DataTable();
$("#example tbody tr").click(function(){
if (! $(this).find("button").length)
{
$(this).find("td").each(function(){
if (!$(this).hasClass("td-button"))
{
var text = $(this).text();
$(this).html ('<input type="text" value="' + text + '">')
} else
$(this).html ('<button class="button-save">Save</button>')
})
}
})
$(document).on("click", ".button-save",function(){
var tr = $(this).parent().parent();
tr.find("td").each(function(){
if (!$(this).hasClass("td-button"))
{
var text = $(this).find("input").val();
$(this).text(text)
} else
$(this).html('');
})
})
https://jsfiddle.net/91wvw619/

How to append new rows to a table more than once?

I have a table within a form that I want to append new rows as the user enters input in the last row of the table.
$('table.form-table').on('input', function() {
var tableID = '#' + $(this).closest('table').attr('id');
if(jQuery(this).closest('tr').is(':last-child')) {
var currTR = $(this).closest('tr');
var currTRhtml = '<tr>' + currTR.html() + '</tr>';
var nextRow = jQuery(currTRhtml);
var checkBox = jQuery('<td class="border-right checks"><input type="checkbox" name="del_000" value="000"></td>');
jQuery(tableID).append(nextRow);
checkBox.appendTo(currTR);
}
});
And the html code if needed (simplified/trimmed):
<table class="form-table" id="XXX" border="1" cellspacing="0" cellpadding="3">
<thead>
<tr class="main"><th nowrap colspan="3" align="left"
class="border-left border-top border-right">
<h3>XXX</h3></th>
</tr>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<input type="hidden" name="isnew" value="">
<td >
<input type="text"
name="new_text"
value="">
</td>
</tr>
</tbody>
</table>
The problem is that this works only once and does not continue appending new rows. It's as if the last-child filtering does not get reset...
Any thoughts?

The problem is that you need to use the event's target, rather than "this". Right now "this" refers to the current table, but you need to refer to the current input box and then use closest() to find its parent tr (and :first-child to make sure it's the last one). So your code needs to look more like this:
$('table.form-table').on('input', function(e) {
var tableID = '#' + $(this).closest('table').attr('id');
if ($(e.target).closest('tr').is(':last-child')) {
var currTR = $(e.target).closest('tr');
var currTRhtml = '<tr>' + currTR.html() + '</tr>';
var nextRow = $(currTRhtml);
var checkBox = $('<td class="border-right checks"><input type="checkbox" name="del_000" value="000"></td>');
$(tableID).append(nextRow);
checkBox.appendTo(currTR);
}
});
Notice I'm passing the event as "e" and then referencing the current input box with $(e.target).
Here's a working JS fiddle.

I suspect the problem is that you need to delegate the input event as the appended rows do not exist on $(document).ready(). Try doing something like this to delegate the handler:
$(document).ready(function () {
$('table.form-table tbody').on('input', 'tr', function () {
var self = $(this),
tableID = '#' + self.closest('table').attr('id'),
currTR = self.closest('tr'),
currTRhtml = '<tr>' + currTR.html() + '</tr>',
nextRow = $(currTRhtml),
checkBox = $('<td class="border-right checks"><input type="checkbox" name="del_000" value="000"></td>');
if (currTR.is(':last-child')) {
$(tableID).append(nextRow);
checkBox.appendTo(currTR);
}
});
});
Fiddle: http://jsfiddle.net/KW7ET/