Psy Chotic Psy Chotic - 1 month ago 6
Javascript Question

obJect Object showing instead of button

I have a table that I am building via js, and it this table the rows ar being populated from a jquery modal dialog upon closing, the data displays on each row, but what I want also is a button to display in each row for further processing is need be.

When I add the button to the column it shows [object Object] instead of the button. I have looked at a similar question here and getting nothing in the column. I am quite knew to JS and could use some assistance The code is below. I can't seem to figure out what I am doing wrong.

$(function () {
var dialog, form,

skuNumber = $("#skuNumber");
productName = $("#productName");
description = $("#description");
quantity = $("#quantity");
border = $("#border");
inkColor = $("#inkColor");
allFields = $([]).add(skuNumber).add(productName).add(description).add(quantity).add(border).add(inkColor);
tips = $(".validateTips");

function addItem() {
var remove = $('<input type="button" id="remove" value="remove" style="width:80px" class="btn btn-danger" />');
var td = $("<td></td>");
td.append(remove);
var valid = true;

allFields.removeClass("ui-state-error");

if (valid) {
$("#myTest tbody").append("<tr>" +
"<td>" + skuNumber.val() + "</td>" +
"<td>" + productName.val() + "</td>" +
"<td>" + description.val() + "</td>" +
"<td>" + quantity.val() + "</td>" +
"<td>" + border.val() + "</td>" +
"<td>" + inkColor.val() + "</td>" +
"td" +
"</tr>");
dialog.dialog("close");

}
return valid;
}

dialog = $("#dialog-form").dialog({

autoOpen: false,
height: 550,
width: 650,
modal: true,
buttons: {
"Add A Line Item": addItem,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
form[0].reset();
allFields.removeClass("ui-state-error");
}
});

form = dialog.find("form").on("submit", function (event) {
event.preventDefault();
addItem();
});

$("#add").button().on("click", function () {
dialog.dialog("open");
});


I am appending the td to this table below, I have the td's commented out in code

<table id="myTest" class="table table-responsive">
<thead>
<tr>
<td>Sku Number</td>
<td>Product Name</td>
<td>Description</td>
<td>Quantity</td>
<td>Border</td>
<td>Ink Color</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
@*<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><input type="button" id="remove" value="remove" style="width:80px" class="btn btn-danger" /></td>*@
</tr>
</tbody>
</table>

Answer

Just append the td var to the table:

   $('#myTest> tbody tr:last').append(td);

Exmaple here: https://jsfiddle.net/00q44gyf/

Comments