Reputation: 2145
I have the piece of html below. The table is used for JQgrid.
<section id="section_students">
<table id="grid_students"></table>
<a class="btn" href="#">Click</a>
</section>
And I'm intending to use JQuery to find out the value of the table if a button under the same section is clicked.
$("section a.btn").click(function(){
var curGrid = $(this).parent().find('table').get(0);
alert($(curGrid).attr("id"));
});
This alert will return 'undefined' and I can't understand why.
What am I missing?
EDIT: Looks like JQGrid changes the ID of the table, which is weird. I'll be researching this, meanwhile, if anyone knows how to prevent this behavior, please let me know.
Upvotes: 0
Views: 97
Reputation: 221997
jqGrid converts the original <table>
(<table id="grid_students"></table>
in your example) in complex structure of tabeles and dives. The most simple modification of your original code could be
$("section a.btn").click(function(){
var curGrid = $(this).parent().find('table.ui-jqgrid-btable').get(0);
alert($(curGrid).attr("id"));
});
(I use the fact that jqGrid set ui-jqgrid-btable
class on the original <table>
).
Upvotes: 1
Reputation: 3414
Please put your code in $(document).ready(function(){ ...... });
$(document).ready(function(){
$("section a.btn").click(function(){
var curGrid = $(this).parent().find('table').get(0);
alert($(curGrid).attr("id"));
});
});
Upvotes: 0
Reputation: 31
It works well, did you put the javascript code into jquery ready().
$(function(){
$("section a.btn").click(function(){
var curGrid = $(this).parent().find('table').get(0);
alert($(curGrid).attr("id"));
});
});
Upvotes: 0
Reputation: 447
Try this
$("#section_students").find("a.btn").click(function(){
var curGrid = $(this).parent().find('table').get(0);
alert($(curGrid).attr("id"));
});
Upvotes: 0