Here Razor Code :

@foreach(var item in Model)
{
<button type="button" class="ShowImages" data-toggle="modal" id="@item.ProductID" data-target="#myModal"  [email protected] onclick="fun_ShowImages()" >@Website.ShowImages</button>
}

function fun_ShowImages() {
        var id = $(this).attr("id");
        var htmlContents = " ";
        $.ajax({
            url: "/Products/ShowImage/" + id,
            type: "POST",
            contentType: 'application/json',
            success: function (response) {
               ...
                }
                htmlContents += '</table>';
                $('#ProductImages').html(htmlContents);
            },
            error: function (response) {
               ...
            }
        });
};

strong text Here Error :

i need to know id attribute var id = $(this).attr("id"); // This give me undefine

Here Razor Code :

@foreach(var item in Model)
{
<button type="button" class="ShowImages" data-toggle="modal" id="@item.ProductID" data-target="#myModal"  [email protected] onclick="fun_ShowImages()" >@Website.ShowImages</button>
}

function fun_ShowImages() {
        var id = $(this).attr("id");
        var htmlContents = " ";
        $.ajax({
            url: "/Products/ShowImage/" + id,
            type: "POST",
            contentType: 'application/json',
            success: function (response) {
               ...
                }
                htmlContents += '</table>';
                $('#ProductImages').html(htmlContents);
            },
            error: function (response) {
               ...
            }
        });
};

strong text Here Error :

i need to know id attribute var id = $(this).attr("id"); // This give me undefine

• javascript
• jquery
• asp-mvc
• razor

Share Improve this question Follow edited Nov 2, 2017 at 10:49 user3559349 asked Nov 2, 2017 at 10:34 Mahmod Abu JehadMahmod Abu Jehad 17733 silver badges1616 bronze badges 6

• What is $(this) ? – anon Commented Nov 2, 2017 at 10:35
• fun_ShowImages(e) { var id = $(e.currentTarget).attr("id"); – Álvaro Touzón Commented Nov 2, 2017 at 10:36
• i'm using this : $(".ShowImages").click({.......}); but give me first row only – Mahmod Abu Jehad Commented Nov 2, 2017 at 10:36
• Pass this context i.e. onclick="fun_ShowImages.call(this)", rest of you code will work – Satpal Commented Nov 2, 2017 at 10:37
• 1 @Satpal thx u too ^_^ – Mahmod Abu Jehad Commented Nov 2, 2017 at 10:52

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

First, you should add quotation marks for data-id value:

<button type="button" class="ShowImages" data-toggle="modal" id="@item.ProductID" data-target="#myModal"  data-id="@item.ProductID" onclick="fun_ShowImages()" >@Website.ShowImages</button>

then you can use jQuery event handler click

E.g.:

$(document).ready(function () {
    $(".ShowImages").click(function () {
        var id = $(this).attr("id"); //or you can use data-id value
        //your logic...
    });
});

Or you can use jQuery.on()

$(document).on("click", ".ShowImages", function () {
    var id = $(this).attr("id"); //or you can use data-id value
    //your logic
});

In your example, this is a reference to window object.

You can pass directly the id value as parameter.

@foreach(var item in Model)
{
   <button type="button" class="ShowImages" data-toggle="modal"
   id="@item.ProductID" data-target="#myModal"  
   [email protected] onclick="fun_ShowImages(@item.ProductId)" >@Website.ShowImages</button>
                                            ^^^^^^^^^^^^^^^^^^^^^^
}

function fun_ShowImages(id) {
        $.ajax({
            url: "/Products/ShowImage/" + id,
            type: "POST",
            contentType: 'application/json',
            success: function (response) {
               ...
                }
                htmlContents += '</table>';
                $('#ProductImages').html(htmlContents);
            },
            error: function (response) {
               ...
            }
        });
};

Another method is to attach a click event handler and use $(this) selector.

Also, in this situation you have to use .on method for event delegation, especially for elements which were added dynamically.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$(document).on("click", ".ShowImages", function () {
    var id = $(this).attr("id"); //or you can use data-id value
    var htmlContents = " ";
    $.ajax({
        url: "/Products/ShowImage/" + id,
        type: "POST",
        contentType: 'application/json',
        success: function (response) {
           ...
            }
            htmlContents += '</table>';
            $('#ProductImages').html(htmlContents);
        },
        error: function (response) {
           ...
        }
    });
});

As per your code this doesn't refers to element which invoke the event handler, it refers to window object. Thus you are getting the error.

You can use .call() to set the context

<button type="button"  onclick="fun_ShowImages.call(this)" >@Website.ShowImages</button>

function fun_ShowImages() {
  console.log(this.id);
}

<button type="button" id="1" onclick="fun_ShowImages.call(this)">ShowImages</button>