Reputation: 341
I am displaying a list of users in a table. Then, I have a button to allow a user to view more details about a specific user. However, I am having a hard time getting the ID for the user that is clicked on. I am not sure why it's not working. What am I doing wrong? I tried several options, and none of them work.
Partial code of how data the links are generated in my view.
if (Model != null) {
if (Model.Count() > 0) {
foreach (var item in Model) {
<tr>
<td><div class="centerText">@item.UserID</div></td>
<td><div class="centerText">@item.FirstName</div></td>
<td><div class="centerText">@item.LastName</div></td>
<td><div class="centerText"><a href="#" class="btn btn-default Detail" id="@item.UserID">Details</a></div></td>
</tr>
}
}
}
My jQuery function
$(function () {
$('.Detail').on('click', function (event) {
var dt = $(this).attr('id');
console.log('dt');
});
});
I also tried it this way:
if (Model != null) {
if (Model.Count() > 0) {
foreach (var item in Model) {
<tr>
<td><div class="centerText">@item.UserID</div></td>
<td><div class="centerText">@item.FirstName</div></td>
<td><div class="centerText">@item.LastName</div></td>
<td><div class="centerText"><a href="#" class="btn btn-default Detail" onclick="test(@item.UserID)" data-id="@item.UserID">Details</a></div></td>
</tr>
}
}
}
Here is the Javascript function that I created. It kept giving
function test(e){
console.log(e);
};
I get this error:
0x800a1391 - JavaScript runtime error: 'test' is undefined
updated on 11/21/15 @7:53 AM EST
I removed the for loop and created a single cell with 1 click button. The click event is not registered. I tried it with 'on', 'live', and 'delegate' with no success.
<div class="table table-responsive" style="width:100%;height:100%;">
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th><div class="centerText">Date Created</div></th>
<th colspan="2"></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6"><div class="centerText"><a href="#" class="btn btn-default Detail">Detail</a></div></td>
</tr>
</tbody>
</table>
</div>
@section Scripts {
<script type="text/javascript">
$('.table tbody tr td div').delegate('.Detail','click', function ()
{
console.log('you click me');
});
</script>
}
Upvotes: 0
Views: 796
Reputation: 341
I found what was causing the problem. I had a modal popup within the form. I was looking to add a textarea, so I added this code '
<textarea name="reasonForArchiveText" id="reasonForArchiveText" />
That's the code that was preventing me from getting the click event. As I was playing around with the code, I commented out the modal popup, and things started to work. Then, I commented section of the modal until I finally found the culprit. The minute that I commented it out, the code works.
Upvotes: 0
Reputation: 5890
Here is how I reproduced your problem with JavaScript runtime error: 'test' is undefined.
I guess that you've defined the function test
probably in your jQuery DOM ready function $(function(){...}
.
If so, the function test
is undefined because by the time the DOM is loading, AND the event handlers on DOM elements are being registered (in your case the onclick
in the link), the function test
is not yet known to the document, and therefore undefined.
Try to move your test
function's declaration outside of jQuery's DOM ready function. That is,
$(function(){
//code that has to run once the DOM is ready
});
function test(e){
console.log(e);
}
Upvotes: 0
Reputation: 5135
You are trying to get the attribute id
which doesn't exist. Use below to get data-id
$(function () {
$('.Detail').on('click', function (event) {
var dt = $(this).data('id');
console.log(dt);
});
you can also use
var dt = $(this).attr("data-id");
Second one (remove var):
function test(e){
console.log(e);
};
Upvotes: 1
Reputation: 1901
Partial code of how data the links are generated in my view. change id instead of data-id.
if (Model != null) {
if (Model.Count() > 0) {
foreach (var item in Model) {
<tr>
<td><div class="centerText">@item.UserID</div></td>
<td><div class="centerText">@item.FirstName</div></td>
<td><div class="centerText">@item.LastName</div></td>
<td><div class="centerText"><a href="#" class="btn btn-default Detail" id="@item.UserID">Details</a></div></td>
</tr>
}
}
}
My jQuery function
$(function () {
$('.Detail').on('click', function (event) {
var dt = $(this).attr('id');
console.log('dt');
});
});
I also tried it this way:
if (Model != null) {
if (Model.Count() > 0) {
foreach (var item in Model) {
<tr>
<td><div class="centerText">@item.UserID</div></td>
<td><div class="centerText">@item.FirstName</div></td>
<td><div class="centerText">@item.LastName</div></td>
<td><div class="centerText"><a href="#" class="btn btn-default Detail" onclick="test(@item.EncounterID)" data-id="@item.UserID">Details</a></div></td>
</tr>
}
}
}
Here is the Javascript function that I created. It kept giving. (Remove var before function).
function test(e){
console.log(e);
};
Upvotes: 0