Click here to Skip to main content
15,041,393 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
I have two tables, Sale and SDetail, which is 1 to many relationship. I am trying to add values to both tables in single view using Ajax JQuery.

even though view is generated perfectly, button click is not triggering when i click add button.
I foung this ajax code from other website as I am new to this.
so Please somebody help me out with this to solve this asap.

here are my controller class create action method,

 private SchoolContext db = new SchoolContext();

public ActionResult Create()
        {
            ViewBag.CustomerID = new SelectList(db.Customers, "ID", "FullName");
            ViewBag.UserID = new SelectList(db.Users, "ID", "FName");
            return View();
        }

        // POST: /Sale/Create
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public JsonResult Create( Sale sale)
        {
            try {

                ViewBag.CustomerID = new SelectList(db.Customers, "ID", "FullName", sale.CustomerID);
                ViewBag.UserID = new SelectList(db.Users, "ID", "FName", sale.UserID);

            if (ModelState.IsValid)
            {
                // If sales main has SalesID then we can understand we have existing sales Information 
                    // So we need to Perform Update Operation 
                     
                    // Perform Update 
                    if (sale.ID > 0) 
                    {
                        var CurrentSDetail = db.SDetails.Where(p => p.SaleID == sale.ID);

                        foreach (SDetail ss in CurrentSDetail)
                            db.SDetails.Remove(ss);

                        foreach (SDetail ss in sale.SDetails)
                            db.SDetails.Add(ss);

                        db.Entry(sale).State = EntityState.Modified;
                    }
                    //Perform Save 
                    else
                    {
                        db.Sales.Add(sale);
                    } 

        
                db.SaveChanges();
                // If Sucess== 1 then Save/Update Successfull else there it has Exception 
                return Json(new { Success = 1, SalesID = sale.ID, ex = "" });

            }
            }
            catch (Exception ex)
            {
                // If Sucess== 0 then Unable to perform Save/Update Operation and send Exception to View as JSON 
                return Json(new { Success = 0, ex = ex.Message.ToString() });
            }

            return Json(new { Success = 0, ex = new Exception("Unable to save").Message.ToString() });
        } 


And my Create view file as follows,

@model ICSTIASHJ.Models.Sale

@*This is for jquery*@
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
@*This is for jquery UI, for Calender control*@
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>

@*This is for JSON*@
<script src="../../Scripts/json2.js" type="text/javascript"></script>

@*These are for DataTables*@
<script src="../../Scripts/DataTables-1.8.1/media/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="../../Scripts/DataTables-1.8.1/extras/TableTools/media/js/TableTools.js" type="text/javascript"></script>
<script src="../../Scripts/DataTables-1.8.1/extras/TableTools/media/js/ZeroClipboard.js" type="text/javascript"></script>

@*These are for styling Control*@
<link href="../../Content/DataTables-1.8.1/extras/TableTools/media/css/TableTools.css" rel="stylesheet" type="text/css" />
<link href="../../Content/DataTables-1.8.1/extras/TableTools/media/css/TableTools_JUI.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript">



    $(document).ready(function () {

        //here i have used datatables.js (jQuery Data Table)
        $('.tbl').dataTable({
            "sDom": 'T<"clear">lfrtip',
            "oTableTools": {
                "aButtons": [],
                "sRowSelect": "single"
            },
            "bLengthChange": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": false
        });
        $('#SDate').datepicker();
        var oTable = $('.tbl').dataTable();
    });

    //  Adding new row to Table
    //  The following code shows how to read from text boxes and then add them to a DataTable.

    function Add() {
        // Adding item to table
        $('.tbl').dataTable().fnAddData([$('#ProductID').val(), $('#Size').val(), $('#Quantity').val(), $('#UnitPrice').val(), $('#Total').val()]);

        // Making Editable text empty
        $('#ProductID').val("")
        $('#Size').val("")
        $('#Quantity').val("")
        $('#UnitPrice').val("")
        $('#Total').val("")


    }


    //  Delete selected row from Table
    //  Following code shows how to remove a selected item from a DataTable.

    // This function is used fro
    // delete selected row from Detail Table|
    // set deleted item to Edit text Boxes
    function DeleteRow() {

        // Here I have used DataTables.TableTools plugin for getting selected row items
        var oTT = TableTools.fnGetInstance('tbl'); // Get Table instance
        var sRow = oTT.fnGetSelected(); // Get Selected Item From Table


        // Set deleted row item to editable text boxes
        $('#ProductID').val($.trim(sRow[0].cells[0].innerHTML.toString()));
        $('#Size').val(jQuery.trim(sRow[0].cells[1].innerHTML.toString()));
        $('#Quantity').val($.trim(sRow[0].cells[2].innerHTML.toString()));
        $('#UnitPrice').val($.trim(sRow[0].cells[2].innerHTML.toString()));
        $('#Total').val($.trim(sRow[0].cells[2].innerHTML.toString()));

        $('.tbl').dataTable().fnDeleteRow(sRow[0]);

    }

    //   Save/Posting Data to sales Controller

    //  Here we have two steps:
    //  Read view data and create JSON object
    //  Ajax post

    function Sales_save() {
        // Step 1: Read View Data and Create JSON Object

        // Creating SalesSub Json Object
        var SDetail = { "SaleID": "", "ProductID": "", "Size": "", "Quantity": "", "UnitPrice": "", "Total": "" };


        // Creating SalesMain Json Object
        var Sale = { "ID": "", "SaleInvoiceNo": "", "AccntInvoiceNo": "", "SDate": "", "SubTotal": "", "Discount": "", "NetAmount": "", "PaymentID": "", "CustomerID": "", "UserID": "", "SalesSubs": [] };

        // Set Sales Main Value
        Sale.ID = $("ID").val();
        Sale.SaleInvoiceNo = $("#SaleInvoiceNo").val();
        Sale.AccntInvoiceNo = $("#AccntInvoiceNo").val();
        Sale.SDate = $("#SDate").val();
        Sale.SubTotal = $("SubTotal").val();
        Sale.Discount = $("#Discount").val();
        Sale.NetAmount = $("#NetAmount").val();
        Sale.PaymentID = $("#PaymentID").val();
        Sale.CustomerID = $("#CustomerID").val();
        Sale.UserID = $("#UserID").val();


        // Getting Table Data from where we will fetch Sales Sub Record
        var oTable = $('.tbl').dataTable().fnGetData();



        for (var i = 0; i < oTable.length; i++) {

            // IF This view is for edit then it will read SalesId from Hidden field
            if ($('h2').text() == "Edit") {
                SDetail.SaleID = $('#ID').val();
            }
            else {
                SDetail.SaleID = 0;
            }

            // Set SalesSub individual Value
            SDetail.ProductID = oTable[i][0];
            SDetail.Size = oTable[i][1];
            SDetail.Quantity = oTable[i][2];
            SDetail.UnitPrice = oTable[i][3];
            SDetail.Total = oTable[i][4];

            // adding to SalesMain.SalesSub List Item
            Sale.SDetail.push(SDetail);
            SDetail = { "SaleID": "", "ProductID": "", "Size": "", "Quantity": "", "UnitPrice": "", "Total": "" };

        }
        // Step 1: Ends Here


        // Set 2: Ajax Post
        // Here i have used ajax post for saving/updating information
        $.ajax({
            url: '/Sale/Create',
            data: JSON.stringify(Sale),
            type: 'POST',
            contentType: 'application/json;',
            dataType: 'json',
            success: function (result) {

                if (result.Success == "1") {
                    window.location.href = "/Sale/index";
                }
                else {
                    alert(result.ex);
                }
            }
        });


    }


</script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>


@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>SalesMain</legend>
        @if (Model != null)
        {

            <input type="hidden" id="ID" name="SalesId" value="@Model.ID" />
        }


        <div class="form-horizontal">
            <h4>Sale</h4>
            <hr />
            @Html.ValidationSummary(true)

            <div class="form-group">
                @Html.LabelFor(model => model.SaleInvoiceNo, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.SaleInvoiceNo)
                    @Html.ValidationMessageFor(model => model.SaleInvoiceNo)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.AccntInvoiceNo, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.AccntInvoiceNo)
                    @Html.ValidationMessageFor(model => model.AccntInvoiceNo)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.SDate, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.SDate)
                    @Html.ValidationMessageFor(model => model.SDate)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.SubTotal, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.SubTotal)
                    @Html.ValidationMessageFor(model => model.SubTotal)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Discount, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Discount)
                    @Html.ValidationMessageFor(model => model.Discount)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.NetAmount, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.NetAmount)
                    @Html.ValidationMessageFor(model => model.NetAmount)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.CustomerID, "CustomerID", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("CustomerID", String.Empty)
                    @Html.ValidationMessageFor(model => model.CustomerID)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.UserID, "UserID", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("UserID", String.Empty)
                    @Html.ValidationMessageFor(model => model.UserID)
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    </fieldset>
    
     <br />

    <fieldset>
        <legend>Add Item</legend>

        <div class="row">
            <div class="form-group">
                <div class="col-md-2"> <label>Product Name :</label> </div>
                <div class="col-md-2"> @Html.TextBox("ProductID") </div>
            </div>

            <div class="form-group">
                <div class="col-md-2"> <label>Size :</label> </div>
                <div class="col-md-2"> @Html.TextBox("Size") </div>
            </div>

            <div class="form-group">
                <div class="col-md-2"> <label>Quantity :</label> </div>
                <div class="col-md-2"> @Html.TextBox("Quantity") </div>
            </div>
        </div>
        <div class="row">

            <div class="form-group">
                <div class="col-md-2"> <label>UnitPrice :</label> </div>
                <div class="col-md-2"> @Html.TextBox("UnitPrice") </div>
            </div>


            <div class="form-group">
                <div class="col-md-2"> <label>Total :</label> </div>
                <div class="col-md-2"> @Html.TextBox("Total") </div>
            </div>

            <div class="col-md-2 col-md-offset-2">
                <input type="button" value="Add" onclick="Add()" />
            </div>
        </div>
        <br />
        <br />

        <table class=" table table-striped" id="tbl">

            <thead>
                <tr>
                    <th> Product Name</th>
                    <th> size</th>
                    <th> Quantity</th>
                    <th> Unit Price</th>
                    <th> Total</th>
                </tr>

            </thead>

            <tbody>
                @if (Model != null)
                {
                    foreach (var item in Model.SDetails)
                    {
                        <tr>
                            <td> @Html.EditorFor(i => item.product)</td>
                            <td> @Html.DisplayTextFor(i => item.Size)</td>
                            <td> @Html.DisplayTextFor(i => item.Quantity)</td>
                            <td> @Html.DisplayTextFor(i => item.UnitPrice)</td>
                            <td> @Html.DisplayTextFor(i => item.Total)</td>
                        </tr>
                    }

                }


            </tbody>

        </table>

        <br />
        <div>
            <input type="button" value="Delete Selected Row" onclick="DeleteRow()" />
        </div>
    </fieldset>
    <br />
    <div>
        <input type="button" value="Sales Save" onclick="Sales_save()" />
    </div>

    
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
Posted

I think problem might be, that you expect AntiForgeryToken ([ValidateAntiForgeryToken]), but you are not sending one. Try to remove it for a while if your controller will be called.
   
Comments
Member 11883599 17-Aug-15 8:00am
   
Thanx for quick reply, but i tried removing @Html.AntiForgeryToken() from view and [ValidateAntiForgeryToken] from controller class. but problem stil exists. please try to help me again
xszaboj 17-Aug-15 8:07am
   
Ok, What exactly is not working? Add() function or Sales_save() ?
Member 11883599 17-Aug-15 8:37am
   
Right now i am worrying about Add() method, once i finish that has to take care of Sales_save().
xszaboj 17-Aug-15 8:42am
   
In that case do you know how to debug javascript code in a browser? Try to debug if your Add function is called. And if so what about that method inside? I cannot see source in your examples? If add function is not call just add on click event on add buton using jquery
Member 11883599 21-Aug-15 12:00pm
   
before i try to debug, i put a break on function, run the page and click ADD button in IE,then this message has appeared.
"Unhandled exception at line 97, column 9 in http://localhost:52992/Sale/Create

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dataTable'"

and in page source, this has got highlighted,
$('.tbl').dataTable().fnAddData([$('#ProductID').val(), $('#Size').val(), $('#Quantity').val(), $('#UnitPrice').val(), $('#Total').val()]);

is this enough u to troubleshoot ??
xszaboj 21-Aug-15 14:47pm
   
well that error basically tells you what is wrong. There is no method called dataTable(), so I guess that you forgot to add some library that will provide you this method or you are calling it wrong.
Member 11883599 22-Aug-15 3:35am
   
i reinstalled jquery version and tried. now im getting same error but highlighting DataTble method.
$('.tbl').dataTable({
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [],
"sRowSelect": "single"
},
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false
});
can you check for any syntax mistake or it can be else ?
xszaboj 23-Aug-15 8:06am
   
I guess you are using this library right? https://www.datatables.net/
check their documentation ;) that might help. i've never used it before so I am not able to help you sorry.
Member 11883599 24-Aug-15 8:44am
   
ohh really ?? i will try that also. thank you very much helping me so far, if you have any link that i can follow to achive same thing in different way, please mention it. thanks again
Could you please check your method should call under $(document).ready() function. Its seems its outside of that.

Hope it helps :)
   
Comments
Member 11883599 17-Aug-15 8:04am
   
thanx for quick reply. Im sorry can you explain/specify it little more. which method i shuld call under $(document).ready() function ??
it is outside of what ??
should all method be inside function inclusing ajax function ??
please b kind enough to reply
Sanket Saxena 17-Aug-15 8:37am
   
Could you please debug your javascript Sales_save() method and tell me where it stuck?
Member 11883599 21-Aug-15 12:01pm
   
before i try to debug, i put a break on function, run the page and click ADD button in IE,then this message has appeared.
"Unhandled exception at line 97, column 9 in http://localhost:52992/Sale/Create

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dataTable'"

and in page source, this has got highlighted,
$('.tbl').dataTable().fnAddData([$('#ProductID').val(), $('#Size').val(), $('#Quantity').val(), $('#UnitPrice').val(), $('#Total').val()]);

is this enough u to troubleshoot ??

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900