Unable to fetch/bind correct Entity Id in JQuery, always takes first item Id from iteration

Question

I have a PartialView where I iterate over a Collection of Entities and display them in a Html Table.

One of the columns of this table has a with a font awesome class (fa fa-times-circle).

I am setting the "id" property of this to the "Id" of my object I am iterating. I am setting a HiddenFor helper to get the Id in jQuery but I always get the top item from the HTML table.

When I look at the HTML output all Id's seems fine however when I try to fetch this in jQuery like this:

<script type="text/javascript">
        $(function () {
        $("body").delegate(".fa", "click", function () {

            //Content to send
            var subscriptionId = $('#Subscription_SubscriptionId').val();

            $.get('@Url.Action("Action", "Controller")', { "subscriptionId": subscriptionId},
                function (result) { $('#SubscriptionBody').html(result); }
                );
         });
         });
</script>

I always have the top item of the table.

This is how I iterate in my partial view:

foreach (var subscription in Model.Subscriptions)
{
    // tried both HiddenFor & Hidden but same results ... (HiddenFor should be used in my opinion)
    // when iterating all Id's are "good" (Different as they should be)
    @Html.HiddenFor(Model => Model.Subscription.SubscriptionId, new { Value = subscription.SubscriptionId })
    // @Html.Hidden("SubscriptionId", new { Value = subscription.SubscriptionId })

    <tr>           
        <td>@subscription.SubscriptionId</td>            
        <td>... some other values ...</td>  
         @if (condition)
         {
            <td>                    
                <i class="fa fa-user-plus fa-2x" id="@subscription.SubscriptionId"></i>
            </td>
         }
         else
         {
            <td>                   
                <i class="fa fa-times-circle fa-2x" id="@subscription.SubscriptionId"></i>
            </td>
         }
    </tr>
}

What am I doing wrong? Obviously I want to retrieve the "subscription.SubscriptionId" of the one I clicked in the table but somehow it always takes the top one.

Thank you for any suggestions or answers!

You should use `class` instead of `id` in iterating over a collection. — Nguyễn Văn Phong, Feb 23 '20 at 09:37
Dom `Id` should be always a unique value. you have two way: 1)make Ids unique 2) Use class — Hamed Moghadasi, Feb 23 '20 at 09:39

Nguyễn Văn Phong · Accepted Answer · 2020-02-23T09:51:02.623

3

It seems to me that you might get like this

var subscriptionId = $(this).attr('id');

Explain:

$('#Subscription_SubscriptionId').val() means: You are getting value from Subscription_SubscriptionId element instead of value of fa fa-times-circle.
You can read this post of @Owais Alam's answer to know the difference between attr and data in jquery.

Or you can refactor your code like this way

HTML:

<i class="fa fa-times-circle fa-2x" data-id="@subscription.SubscriptionId">

Jquery

var subscriptionId = $(this).data('id');

edited Feb 23 '20 at 09:51

answered Feb 23 '20 at 09:40

Nguyễn Văn Phong

13,506
17
39
56

1

THIS WORKS! THANK YOU (I can accept answer in 6 minutes :)) Can you elaborate why my way didn't work? I am not much familiar with Jquery. What is the difference/pro/con of using data instead of att? – Dimitri Feb 23 '20 at 09:42
I get why data "over" attr, but why didn't my way worked? Because of the naming not being unique? – Dimitri Feb 23 '20 at 09:54
1

You should answer some questions yourself. 1: How many `Subscription_SubscriptionId` element you have? 2. What the `id` value you want to get when the icon `fa fa-times-circle` is clicked? Obviously, you want to get the `id` value of the icon that you are clicking, right? – Nguyễn Văn Phong Feb 23 '20 at 09:58
I only have 1 Subscription_SubscriptionId, what do you mean with 2 Subscription_SubscriptionId? The HiddenFor(...) & Hidden(...) are examples I tried, I never tried them both at the same time. – Dimitri Feb 23 '20 at 10:02
1

Because you just have one `id` for all elements. Read [this](https://css-tricks.com/the-difference-between-id-and-class/#article-header-id-0) post to know why you shouldn't use the same id for multiple elements in one page. As a result, you need to get the `id` value of the element clicked by using the above technique. – Nguyễn Văn Phong Feb 23 '20 at 10:09

Unable to fetch/bind correct Entity Id in JQuery, always takes first item Id from iteration

1 Answers1