locked
Ajax Jquery post List JavaScript Objects RRS feed

  • Question

  • 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>
    }

    Saturday, July 14, 2018 9:13 AM

Answers

  • User-1171043462 posted

     '<td>' + formCustomer.invoicedSupplier = 'invoicedSupplier'+ > <option value=''>Select Type</option> + '</td>' +

    You have used a = instead of + in the above line.

    <td>' + formCustomer.invoicedSupplier + 'invoicedSupplier'+ > <option value=''>Select Type</option> + '</td>' +

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, July 14, 2018 11:40 AM
  • User-330142929 posted

    Hi Marya,

    According to your codes, I found that you have “=” in the splicing string. I think this is where the problem lies.

                    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>';

    Generally speaking, the reason caused this problem is due to  an error  in the assignment method, such as  the if statement using “=”, assigning a value to the jquery val() method.

    Feel free to let me know if you have any questions

    Best Regards

    Abraham

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 16, 2018 9:08 AM

All replies

  • User-1171043462 posted

     '<td>' + formCustomer.invoicedSupplier = 'invoicedSupplier'+ > <option value=''>Select Type</option> + '</td>' +

    You have used a = instead of + in the above line.

    <td>' + formCustomer.invoicedSupplier + 'invoicedSupplier'+ > <option value=''>Select Type</option> + '</td>' +

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, July 14, 2018 11:40 AM
  • User-330142929 posted

    Hi Marya,

    According to your codes, I found that you have “=” in the splicing string. I think this is where the problem lies.

                    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>';

    Generally speaking, the reason caused this problem is due to  an error  in the assignment method, such as  the if statement using “=”, assigning a value to the jquery val() method.

    Feel free to let me know if you have any questions

    Best Regards

    Abraham

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 16, 2018 9:08 AM