2

I am new to the front end development but have quite a bit of back end dev experience. I've tried a few different approaches to the javascript below and that is just some of the things I tried.

I have the following code that shows the products. This is in n for each loop from my product list.

At the bottom of the page i have the add button.

I need to get the data-Id of each product to get the productId, price to get the price and the value of the qty input field so that I can send it through to my cart.

I can't get those values and have tried a few different things.

<div class="col-md-2">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">@Html.DisplayFor(modelItem => product.Code)</h3>
                </div>
                <div class="panel-body">
                    <div class="text-center" id="user_image">
                        <img src="../../images/chickenBreast.jpg" class="img-thumbnail" />
                    </div>
                    <br />
                    <div class="panel-body form-group-separated">
                        <div class="form-group">
                            <label class="control-label">Short Description:</label>
                            <p>@Html.DisplayFor(modelItem => product.Description)</p>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Long Description:</label>
                            <p>@Html.DisplayFor(modelItem => product.LongDescription)</p>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <form class="form-inline" role="form">
                            <div class="form-group">
                                <input id="qty" data-id="@product.Id" price="@product.Price" type="text" class="Product-control" placeholder="Qty" />
                            </div>
                            <button id="AddButton" class="btn btn-primary pull-right">Add to cart</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

Here is my javascript, I have tried a few different things but nothing seems to give me the required data

    <script type="text/javascript" src="../../Scripts/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $("#AddButton").click(function (form) {
        var productToUpdate = $("input").parent().find("data-id");
        var countToUpdate = $('input[id="qty"]', form).val();
        var productPrice = $(this).parent().find('price').val();

        if (productToUpdate != '') {
            // Perform the ajax post
            $.post("~/Cart/GetCartItems", { "productId": productToUpdate, "qty": countToUpdate, "price": productPrice },
            function (data) {
                //Check for not process the callback data when server error occurs
                //if (data.ItemCount != -1) {
                //    $('#cart-total').text(data.CartTotal);
                //}
            });
        }
    });
</script>
JonathanM
  • 61
  • 10
  • 1
    `.find()` takes a selector. Your usage is completely wrong. Read the docs. – SLaks Apr 29 '15 at 14:03
  • Read the [Query docs](https://api.jquery.com/data/). There is a built-in function to get the `data-` attributes. – Howard Renollet Apr 29 '15 at 14:13
  • Here is a fairly popular link on how to attach events to dynamically created content, although you're not attaching events a lot of the logic is very usable and I think applicable here: [Attach Events to Dynamic HTML Elements](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) – Daniel Siebert Apr 29 '15 at 14:38

2 Answers2

0

The selector data-id will never match. That is suggesting that data-id is an element type as (example) <data-id ...></data-id> try using find('input[data-id]') instead.

https://api.jquery.com/category/selectors/attribute-selectors/

https://api.jquery.com/has-attribute-selector/

Description: Selects elements that have the specified attribute, with any value.

Example from documentation:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeHas demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>

<script>
// Using .one() so the handler is executed at most once
// per element per event type
$( "div[id]" ).one( "click", function() {
  var idString = $( this ).text() + " = " + $( this ).attr( "id" );
  $( this ).text( idString );
});
</script>

</body>
</html>


// Using .one() so the handler is executed at most once
// per element per event type
$("div[id]").one("click", function() {
  var idString = $(this).text() + " = " + $(this).attr("id");
  $(this).text(idString);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>attributeHas demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>

  <div>no id</div>
  <div id="hey">with id</div>
  <div id="there">has an id</div>
  <div>nope</div>

  <script>
  </script>

</body>

</html>
Nico
  • 12,493
  • 5
  • 42
  • 62
0

I figured out the hierarchies

here is my solution

HTML

<div class="panel-footer">
                        <form class="form-inline" role="form">
                            <div class="form-group">
                                <input id="qty" type="text" class="Product-control" placeholder="Qty" />
                            </div>
                            <button id="AddButton" data-id="@product.Id" price="@product.Price" class="btn btn-primary pull-right">Add to cart</button>
                        </form>
                    </div>

The javascript

    <script type="text/javascript" src="../../Scripts/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $("#AddButton").click(function () {
        var productId = $(this).attr('data-id');
        var productPrice = $(this).attr('price');
        var qty = $(this).prev().children(".Product-control").val();

        if (productId != '') {
            // Perform the ajax post
            $.post("~/Cart/GetCartItems", { "productId": productId, "qty": qty, "price": productPrice },
            function (data) {
                //Check for not process the callback data when server error occurs
                //if (data.ItemCount != -1) {
                //    $('#cart-total').text(data.CartTotal);
                //}
            });
        }
    });
</script>
JonathanM
  • 61
  • 10