How to access sub elements of div created by foreach loop in MVC view using jquery

Question

0.00/5 (No votes)

See more:

Here is my view :

<div class="row">
@foreach (var item in Model.Product)
{
            <div class="col-lg-3 col-md-6" id="@item.ProductId" name="div">
                 
                <div class="panel panel-green" style=" border-radius: 25px; border: 1px solid #47d7ac;">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-12 ">
                                <h4 class="text-center" id="ProductName">@item.Name</h4>
                                <div class="img-responsive">
                                    <img src="@item.ImageUrl" class="img-responsive img-thumbnail" id="@item.ImageUrl" />
                                </div>
                               
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer" style="background-color:transparent">
                        <div class="row">
                            <p id="description" style="text-align:center">@item.Description</p>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <h4 class="pull-left">₹ <span id="Cost" class="Cost">@item.Cost</span></h4>
                            </div>
                            <div class="col-md-6">
                                <input type="submit" class="btn btn-primary regbtn center-block" id="buy" style="width:auto" value="Buy" />
                            </div>
                           </div>
                      <div class="clearfix"></div>
                        </div>
                   

                </div>
              
            </div>
}
</div>

on click of each buy i want to retrieve that div content and pass those to next page through ajax

What I have tried:

<script>
    $(document).ready(function () {
        var div = $('[name=div]').attr('id');
        
        $("#" + div).find($("#buy")).click(function () {
            var name = $("#" + div).find( $("#ProductName"+div)).text();
            var desc = $("#description" + div).text();
            var cost = $("#Cost"+div).text();
            var img = $("#img"+div).attr('src');
            alert(name);
            $.ajax({
                url: '@Url.Action("GetOrder", "Home")',
                data: { "Name": name,"Desc":desc,"Cost":cost,"ImgUrl":img},
                type: 'POST', // add
                success: function (data) {
                    window.location.href = data;
                    }
            });
           
        });
    });
</script>

Posted 1-Dec-17 0:03am

Member 11559488

Updated 1-Dec-17 6:32am

F-ES Sitecore

v2

Add a Solution

Comments

F-ES Sitecore 1-Dec-17 6:14am

You can't use ids, each id has to be unique on the page. Instead tag the relevant elements with a "data-" tag, so something like

<input type="submit" class="btn btn-primary regbtn center-block" data-type="buy" style="width:auto" value="Buy" />

then update your query to look for

.find("[data-type='buy']")

There may be other issues with your code, but this is certainly one of them.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard Deeming · Answer 1 · 2017-12-01T06:30:00

As mentioned in the comments, you'll need to fix your duplicate IDs, and use data- attributes.

View:

HTML

<div class="row">
    @foreach (var item in Model.Product)
    {
        <div class="col-lg-3 col-md-6">
            <div class="panel panel-green" style=" border-radius: 25px; border: 1px solid #47d7ac;">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-12 ">
                            <h4 class="text-center">@item.Name</h4>
                            <div class="img-responsive">
                                <img src="@Url.Content(item.ImageUrl)" class="img-responsive img-thumbnail" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer" style="background-color:transparent">
                    <div class="row">
                        <p class="text-center">@item.Description</p>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="pull-left">₹ <span class="Cost">@item.Cost</span></h4>
                        </div>
                        <div class="col-md-6">
                            <input type="submit" class="btn btn-primary regbtn center-block -js-buy-button" style="width:auto" value="Buy" data-name="@item.Name" data-description="@item.Description" data-cost="@item.Cost" data-image="@item.ImageUrl" />
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    }
</div>

Script:

JavaScript

$(document).ready(function () {
    $(document).on("click", ".-js-buy-button", function(event){
        event.preventDefault();
        
        var me = $(this);
        var name = me.data("name");
        var description = me.data("description");
        var cost = me.data("cost");
        var image = me.data("image");
        
        console.debug("Name", name, "Description", description, "Cost", cost, "Image", image);
        
        $.ajax({
            url: '@Url.Action("GetOrder", "Home")',
            data: { "Name": name, "Desc": description, "Cost": cost, "ImgUrl": image },
            success: function(data){
                window.location.href = data;
            }
        });
    });
});

HOWEVER, this seems like a bad idea. As it stands, the user can simply use their browser's developer tools to change the price of the product before clicking the "Buy" button, and it looks like your code will simply accept the new price without validating it.

You're also not passing the product ID, so I suspect your database structure is broken. Instead of copying the product details to the order line, you should be using a foreign key relationship between the order line and product tables.

You should pass just the product ID to the server code. Your code can then use that ID to retrieve any details it needs from the products table.