Load jtable in jquery UI dialogue - jquery-ui-dialog

Question

I want to use jtable in jquery UI dialogue widget. I'm loading the content of dialogue widget dynamically as follows
$( "#dialog4" ).dialog({
autoOpen: false,
height:$(window).height() - 50,
width:$(window).width() - 50,
show: {
effect: "blind",
duration: 400,
},
hide: {
effect: "explode",
duration: 400
},
open: function (){
$(this).load("managegroupmembers.jsp");
}
});
my jtable code is present in managegroupmembers.jsp. It is as follows:
<script>
$(function() {
$('groupmembers')
.jtable(
{
title : 'Members in Group',
jqueryuiTheme : true,
selecting : true, //Enable selecting
multiselect : true, //Allow multiple selecting
selectingCheckboxes : true,
paging : true,
pageSize : 20,
pageSizes : [ 20, 50, 75, 100, 200, 500 ],
defaultSorting : 'fullName ASC',
sorting : true,
actions : {
listAction : 'group'
},
fields : {
groupID : {
key : true,
list : false
},
memberID : {
key : true,
list : false
},
fullName : {
create : false,
edit : false,
title : 'Name',
width : '15%'
},
memberRole : {
title : 'Role in Group',
width : '7%',
display : function(data) {
var roleName = "";
if (data.record.memberRole != null) {
roleName = data.record.memberRole.roleName;
}
return roleName;
}
},
memberSince : {
list : true,
title : 'Member Since',
inputClass : 'text ui-widget-content ui-corner-all inputClass'
}
}
});
$('#groupmembers').jtable('load');
});
</script>
<div id="groupmembers" class="ui-widget"></div>
I tried to debug the code using chrome's developer tools and I'm seeing following error:
"cannot call methods on jtable prior to initialization; attempted to call method 'load'"
Can anybody help me here? Thanks in advance.

Answer 1

You are not initializing the jTable because you forgot the # in front of the groupmembers ID in the init code....
$('groupmembers')
should be:
$('#groupmembers')