Solved

MVC 4

Posted on 2014-09-24
6
115 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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now