Showing Model window on button click does not work

[crooseatParticipant]

$("#XUSER01 #btnFilterTask").click(function() {
            var xx = $("#XUSER01");
            $("#XUSER01 #FilterTaskWindow").jqxWindow('show');
        });

i have above script. when on button click model window does not shown. following error message is given
Error: Invalid jQuery Selector – #XUSER01 #FilterTaskWindow! Please, check whether the used ID or CSS Class name is correct.

[crooseatParticipant]

Why this does not show the model window?

<div id='XUSER01'>
</div>
<script>
 //home tab bar
    var UserHomeBar = '<table width="100%" height="35px" id="Homebar" cellpadding="0px" cellspacing="0px" border="0px"><tr bgcolor="#004A73">';
    UserHomeBar = UserHomeBar + '<td>';
    UserHomeBar = UserHomeBar + '&nbsp;<input type="button" id="addnewtask" value="Add New Task" />';
    UserHomeBar = UserHomeBar + '&nbsp;<input type="button" id="filterUserTask" value="Filter" />';
    UserHomeBar = UserHomeBar + '</td></tr></table>';
    //home tab grid
    UserHomeBar = UserHomeBar + '<div id="userTaskGrid" width="100%" ></div>';
    //home tab filter window
    UserHomeBar = UserHomeBar + '<div id="filterUserTaskWindow">';
    UserHomeBar = UserHomeBar + '<div>';
    UserHomeBar = UserHomeBar + '<table>';
    UserHomeBar = UserHomeBar + '<tr>';
    UserHomeBar = UserHomeBar + '<td><label id="lblfilterUserTaskDateFrom">From Date</label></td>' +
                              '<td> <div id="calfilterUserTaskFromDate"></div></td></tr>';
    UserHomeBar = UserHomeBar + '<tr><td><label id="lblfilterUserTaskDateTo">To Date</label></td>' +
                              '<td> <div id="calfilterUserTaskToDate"></div></td></tr>';
    UserHomeBar = UserHomeBar + '<tr><td>&nbsp;</td><td align="left"><input style="margin-right: 5px;" type="button" id="btnFilterUserTask" value="Filter" /></td>';
    UserHomeBar = UserHomeBar + '</tr>';
    UserHomeBar = UserHomeBar + '</table>';
    UserHomeBar = UserHomeBar + '</div>';
    UserHomeBar = UserHomeBar + '</div>';
    UserHomeBar = UserHomeBar + '</div>';

    $("#XUSER01").append(UserHomeBar);

    $("#filterUserTaskWindow").jqxWindow({
    width: 300,
    height: 150,
    autoOpen:false
});
$("#XUSER01 #filterUserTask").click(function() {
            var xx=$("#XUSER01").find('*')
            var flag=0;
            for(i=0;i<xx.length;i++){
                 if(xx[i].id=='filterUserTaskWindow')
                     flag=1
            }
            if(flag==1)
                alert('found');
            else
                alert('not found');
            $("#XUSER01 #filterUserTaskWindow").jqxWindow('show');
        });
</script>

[DimitarParticipant]

Hello crooseat,

This error is thrown when your jQuery selection is empty and you try to initialize a widget or call a method on it. I notice there are two different ids for a window mentioned in your snippets – FilterTaskWindow and filterUserTaskWindow. Maybe one of them is incorrect?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts