I wish to attach my jQuery virtual keyboard towards the dialog window rather than using onscreen keyboard. With this I've got a dialog

<!-- For Showing Keyboard -->
<div id="dialog" title="Virtual Keyboard">
    <p>Keyboard Layout</p>
</div>

On clicking a control button the dialog will open

$(function() {
    // default behavior close
    $('#dialog').dialog({
            autoOpen: false
            });
    // open when click on keyboard button
        $('#create-user').click(function() {
            $('#dialog').dialog('open');
        });
});

Up to now things are working fine.

Now i'm attempting to attach the laptop keyboard towards the dialog as

$('#keyboardInput') .keyboard({
    layout: 'custom',
    customLayout: {
        'default': [
            '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
            '{tab} q w e r t y u i o p [ ] \\',
            'a s d f g h j k l ; \' {enter}',
            '{shift} z x c v b n m , . / {shift}',
            '{accept} {space} {cancel}'
        ],
        'shift': [
            '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
            '{tab} Q W E R T Y U I O P { } |',
            'A S D F G H J K L : " {enter}',
            '{shift} Z X C V B N M < > ? {shift}',
            '{accept} {space} {cancel}'
        ]
    },
    position : {
        of : 'dialog', // optional - null (attach to input/textarea) or a jQuery                     object (attach elsewhere)
        my : 'center top',
        at : 'center top'
    },
    maxLength : 180,
    useCombos : true, // key combination is allowed
    autoAccept : true
    }) .addTyping();

But it's not affixing the laptop keyboard towards the dialog. It's using the default onscreen only. What shall we be held doing wrong. Would you please verify.


Thanks. Sajja