Load jtable in jquery UI dialogue

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')