Reputation: 177
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
Upvotes: 1
Views: 6809
Reputation: 48437
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) {
...
}
});
});
Upvotes: 2
Reputation: 127
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
});
Upvotes: 3
Reputation: 133453
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>
Upvotes: 1