Solved

MVC 4

Posted on 2014-09-24
6
120 Views
Last Modified: 2014-09-29
Hi guys ,

I wrote some application MVC4 and I have some difficult time to find how to calculate through jquery.

What I would like to do is to calculate between two column and give the result in the third column.
by just inserting the quantity. I have attached the example in app.jpg.

the Jquery code I wrote for this:
 function Calsum() {
            var qnt = $('#QuantityOnOrder').val();
            var pric = $('#Price').val();
            if ((qnt * pric) <= 0)
                $('#extended').val(pric);
            else
                $('#extended').val(qnt * pric);
        }

Open in new window


and then I wrote this in the:
$
$(document).ready(function () {
('#QuantityOnOrder').change(function () {
                Calsum();
            });

Open in new window


Thanks,
0
Comment
Question by:Moti Mashiah
  • 3
  • 3
6 Comments
 
LVL 23

Accepted Solution

by:
Ioannis Paraskevopoulos earned 500 total points
ID: 40343445
Hi,

It would be useful to also give use the html output. Another thing is that you have not added the app.jpg. A bit of more info on what is your problem, like, is there any error that you get? Why do you think what you have written does not work?

Giannis
0
 
LVL 1

Author Comment

by:Moti Mashiah
ID: 40343956
sorry , I forgot to upload the file:) here you go.


thanks ,
app.jpg
0
 
LVL 23

Expert Comment

by:Ioannis Paraskevopoulos
ID: 40343998
Could you include the HTML output of that?

Is the value in currency format?
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 1

Author Comment

by:Moti Mashiah
ID: 40348919
HI sorry for the delay i was on vacation.

here is my HTML output code:
this is the HTML view and the second code is the partial view:

@{
    ViewBag.Title = "NewQuotes";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@model ALThompsonCRM.Models.Info.CustomerQuote


<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">
        Quote
    </div>
    <div class="panel-body">
        <div id="table-content" class="table-responsive">
            @using (Html.BeginForm())
            {
                @Html.AntiForgeryToken()
                @Html.ValidationSummary()
                <table class="table table-bordered">
                    <tr>
                        <td>
                            <h3>Customer Information:</h3>
                            <table class="table table-bordered">
                                <tr>
                                    <th valign="top">Customer ID: </th>
                                    <td>
                                        @Html.TextBoxFor(m => m.CustomerID, new { @class = "inp-form" })
                                    </td>
                                    <th valign="top">Customer Name: </th>
                                    <td>
                                        @Html.TextBoxFor(m => m.LastName, new { @class = "inp-form" })
                                    </td>
                                    <th valign="top">Phone: </th>
                                    <td>
                                        @Html.TextBoxFor(m => m.PhoneNumber, new { @class = "inp-form" })
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <h3>Shipping Information:</h3>
                            <table class="table table-bordered">
                                <tr>
                                    <th valign="top">Carrier: </th>
                                    <td>
                                        @Html.TextBoxFor(m => m.carrier, new { @class = "inp-form" })
                                    </td>
                                    <th valign="top">Shipping ServiceID: </th>
                                    <td>
                                        @Html.TextBoxFor(m => m.ShippingServiceID, new { @class = "inp-form" })
                                    </td>
                                    <th valign="top">Shipping Charge: </th>
                                    <td>
                                        @Html.TextBoxFor(m => m.ShippingChargeOnOrder, new { @class = "inp-form" })
                                    </td>
                                </tr>
                                <tr>
                                    <th valign="top">Tracking Number:</th>
                                    <td>
                                        @Html.TextBoxFor(m => m.ShippingTrackingNumber, new { @class = "inp-form" })
                                    </td>

                                    <th valign="top">Notes: </th>
                                    <td colspan="3">
                                        @Html.TextAreaFor(m => m.ShippingNotes, new { @class = "form-textarea" })
                                    </td>
                                </tr>

                            </table>
                        </td>
                    </tr>

                    <tr>

                        <td>
                            <h3>Extra Informaton:</h3>
                            <div id="calen">
                                <table class="table table-bordered">
                                    <tr>
                                        <th valign="top">Comment: </th>
                                        <td>
                                            @Html.TextAreaFor(m => m.Comment, new { @class = "form-textarea" })
                                        </td>
                                        <th valign="top">Expiration Date: </th>

                                        <td>
                                            @Html.TextBoxFor(m => m.ExpirationOrDueDate, new { @class = "form-control datepicker", @style = "width: 100px;", placeholder = "MM/DD/YYYY" })
                                        </td>
                                        <th valign="top">Reference: </th>
                                        <td>
                                            @Html.TextBoxFor(m => m.ReferenceNumber, new { @class = "inp-form" })
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td>
                            <h3>Item List:</h3>
                            @Html.DropDownList("iList", ALThompsonCRM.Helper.ListHelper.GetItems(), new { @class = "styledselect_form_1" })
                            <input type="button" value="Get Item" onclick="PurchaseItem();" />

                            <br />
                            <div id="pur_items">
                                @Html.Partial("_ListOfItems", Model.items)
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <h4>Grand Total: @Model.grandTotal</h4>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            <input type="submit" value="Submit" class="form-submit" /><input type="submit" value="Reset" class="form-reset" />
                        </td>
                    </tr>
                </table>




            }

            <div class="btn-group pull-right">
                <a class="btn btn-primary btn-sm" title="Back" href="/Project/QuotesIndex/5018">Back</a>
            </div>

        </div>

    </div>

</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        $(document).ready(function () {
            $('.datepicker').datepicker();

            $("#SearchString").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/Ajax/GetItems",
                        data: "{ 'prefixText': '" + request.term + "' }",
                        dataType: "json",
                        type: "GET",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.ItemLookupCode,
                                    value: item.ID
                                }
                            }));
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 2,
                select: function (even, ui) {
                    alert(ui.item.id);
                    //window.location.href = '/Home/details/' + ui.item.id;
                }
            });

            $('#QuantityOnOrder').change(function () {
                Calsum();
            });



        });

        function PurchaseItem() {
            var code = $('#iList').val();
            $.ajax({
                type: "POST",
                url: "/Ajax/AddItemToList",
                dataType: "html",
                data: { id: code },
                success: function (data) {
                    $("#pur_items").html(data);
                    //$("#product-table tbody").append(data);
                }
            });
        }

        function Calsum() {
            var qnt = $('#QuantityOnOrder').val();
            var pric = $('#Price').val();
            if ((qnt * pric) <= 0)
                $('#extended').val(pric);
            else
                $('#extended').val(qnt * pric);
        }

        function DelItem(id) {
            var res = confirm('You want to delete this item??');
            if (res) {
                $.ajax({
                    type: "POST",
                    url: "/Ajax/DeleteItem",
                    dataType: "html",
                    data: { id: id },
                    success: function (data) {
                        $("#pur_items").html(data);
                        $("#pur_items").focus();
                        alert("Item deleted sucessfully.");
                    }, error: function (xhr, err) {
                        alert("Error occured, Please try again.");
                    }
                });
            }
        }

    </script>
}

Open in new window


@model IEnumerable<ALThompsonCRM.Models.ViewModel.ItemList>
@*<table border="0" width="100%" cellpadding="0" cellspacing="0" id="product-table">*@
<table class="table table-bordered" id="product-table">
    <tr>
        <th>Description</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Extended</th>
        <th>SalesRep</th>
        <th>Options</th>
    </tr>
    @{int i = 1; }
    @foreach (var itm in Model)
    {
        string pric = "prc" + i.ToString();
        string extd = "ext" + i.ToString();
        <tr>
            <td>@itm.Description</td>
            <td style="text-align: center;">@Html.TextBoxFor(o => itm.QuantityOnOrder, new { @class = "form-control", @width = "25px" })</td>
            <td id="@pric" style="text-align: center;">@string.Format("{0:c}", itm.Price)</td>
            <td id="@extd" style="text-align: center;">@String.Format("{0:c}", itm.extended)</td>
            <td style="text-align: center;">@itm.SalesRepID</td>
            <td><a class="btn btn-sm btn-primary" onclick="return DelItem(@itm.ID);" title="Delete" href="#">Delete</a></td>
        </tr>
        i = i + 1;
    }
</table>

Open in new window

0
 
LVL 23

Expert Comment

by:Ioannis Paraskevopoulos
ID: 40349927
Ok, this is what i get from what you have:

1. You have an @Html.TextBoxFor that you think it should produce a text with an id. but what it will produce is something like:
<input type="text" class="form-control" width = "25px" />

Open in new window


There is no id there. If you want to add an id you should add it as:
@Html.TextBoxFor(o => itm.QuantityOnOrder, new { @class = "form-control", @width = "25px" , @id="QuantityOnOrder"})

Open in new window


That way you may have an id. But since this is in a loop, it will produce many elements with the same id, which is not "allowed" (it will produce them but it want be valid).

In order to solve this, i would recommend to not use an id but rather a class:
@Html.TextBoxFor(o => itm.QuantityOnOrder, new { @class = "form-control QuantityOnOrder", @width = "25px" , @id=i})

Open in new window


And change your way to call the function to:
$('.QuantityOnOrder').change(function (event) {
    Calsum(event.target.id);
});

Open in new window


and the function itself:
function Calsum(id) {
    var qnt = $('#'+id).val();
    var pric = $('#prc'+id).text();
    if ((qnt * pric) <= 0) 
        $('#ext'+id).text(pric);
    else 
        $('#ext'+id).text(qnt * pric);
}

Open in new window


You may check out a working example at JS Fiddle.

Giannis
0
 
LVL 1

Author Closing Comment

by:Moti Mashiah
ID: 40350195
Thank you for the great solution.
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question