User1465791785 posted
i am following this tutorial,
http://javasampleapproach.com/frontend/jquery/ajax-jquery-post-list-javascript-objects-springboot-server-bootstrap
to add items to a list and send them to controller in bulk,
now i am getting this error'Uncaught ReferenceError: Invalid left-hand side in assignment'
selected list is populated, the table is not filled when clicked to 'Add Custoomer' button.here is what i have done so far
<div class="container">
@*<h3 style="color:blue">POST-GET AJAX NESTED OBJECT</h3>*@
<div class="row">
<div class="col-md-6">
<div class="form-group">
@Html.DropDownList("InvoiceId", null, htmlAttributes: new { @class = "form-control", @required = "required" }, optionLabel: "Please select a Invoice")
@Html.ValidationMessageFor(model => model.InvoiceId, "", new { @class = "text-danger" })
</div>
</div>
</div>
<form id="customerForm">
<div class="form-group">
<label for="name">Name:</label>
<select class="form-control" id="invoicedSupplier">
<option selected="selected">Select</option>
</select>
</div>
<div class="form-group">
<label for="requestedDate">Requested Date:</label>
<input type="datetime" class="form-control" id="requestedDate" placeholder="Enter Requested Date" />
</div>
<button style="margin-bottom:10px" type="submit" class="btn btn-default">Add Customer</button>
</form>
<!-- Table of Adding Customer -->
<table id="customerTable" class="table table-bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Supplier</th>
<th>RequestedDate</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- DIV Submit customer -->
<!-- SUBMIT Customer Button to Server -->
<button id="postCustomersBtn" style="margin-bottom:10px" type="submit" class="btn btn-default">Post Customers</button>
<!-- Message result from server -->
<div id="postResultDiv" style="margin:10px 0px 10px 0px;">
</div>
<!-- Get All Customers from back-end -->
<button id="getAllCustomersBtnId" type="button" class="btn btn-primary" style="margin:10px 0px 10px 0px;">Get All Customers</button>
<div id="resultGetAllCustomerDiv">
<ul class="list-group"></ul>
</div>
</div>
</div>
@section Scripts {
<script>
$(document).ready(function () {
var listCustomers = [];
/**
* Using JQuery for hiding some elements in view when bootstrap app
*/
// Hide customer table when starting
// we just show it if having any adding-customer
$('#customerTable').hide();
$('#postCustomersBtn').hide();
// Customer-Form submit
$("#customerForm").submit(function (event) {
// Prevent the form from submitting via the browser.
event.preventDefault();
// get data from submit form
var formCustomer = {
invoicedSupplier: $("#invoicedSupplier").val(),
requestedDate: $("#requestedDate").val()
}
// store customer
listCustomers.push(formCustomer);
// re-render customer table by append new customer to table
var customerRow = '<tr>' +
'<td>' + listCustomers.length + '</td>' +
'<td>' + formCustomer.invoicedSupplier = 'invoicedSupplier'+ > <option value=''>Select Type</option> + '</td>' +
'<td>' + formCustomer.requestedDate + '</td>' +
'<td class="text-center">' +
'<input type="hidden" value=' + (listCustomers.length - 1) + '>' +
'<a>' +
'<span class="glyphicon glyphicon-remove"></span>' +
'</a>' +
'</td>' +
'</tr>';
$('#customerTable tbody').append(customerRow);
// just how customer table and POST button
$('#customerTable').show();
$('#postCustomersBtn').show();
// Reset FormData after Posting
resetData();
});
// Do DELETE a Customer via JQUERY AJAX
$(document).on("click", "a", function () {
var customerId = $(this).parent().find('input').val();
$(this).closest("tr").remove()
});
// Submit List of Customer to Back-End server
$('#postCustomersBtn').click(function () {
ajaxPost();
});
function ajaxPost() {
// DO POST
$.ajax({
type: "POST",
contentType: "application/json",
accept: 'text/plain',
url: window.location + "api/customer/save",
data: JSON.stringify(listCustomers),
dataType: 'text',
success: function (result) {
// clear customer body
$('#customerTable tbody').empty();
$('#customerTable').hide();
// re-set customer table list
listCustomers = [];
// fill successfully message on view
$("#postResultDiv").html("<p style='background-color:#7FA7B0; color:white; padding:20px 20px 20px 20px'>" +
result +
"</p>");
},
error: function (e) {
alert("Error!")
console.log("ERROR: ", e);
}
});
}
function resetData() {
$("#SupplierName").val("");
$("#requestedDate").val("");
}
})
</script>
<script>
$(document).ready(function () {
$.ajax({
url: "getSupplierList",
datatype: "JSON",
type: "Get",
success: function (data) {
debugger;
for (var i = 0; i
< data.length; i++) {
var opt = new Option(data[i].supplierName);
$("#invoicedSupplier").append(opt);
}
}
});
});
</script>
}
