Re-creating keyboard with mobile extension fails

[mpf82]

I want to enable/disabe virtual keyboard for some input fields via code in a mobile environment.

I've stumbled upon this issue: #337 and tried to adapt my code according to the (no longer working) example found here: http://jsfiddle.net/Mottie/n2yh4ym9/2/

My code currently works 1 time (enable -> disable), but once I try to enable the keyboard for the second time and click into the input field, I get the following error:

_Uncaught TypeError: undefined is not a function_

in jquery.keyboard.extension-mobile.js:97

code:

base.$keyboard.css('visibility', 'hidden');

Everything works fine if I do not add the mobile extension (excep from the keyboard looking weird, which is not acceptable).

You can reproduce the error with the following lines of code:
(I'm not familiar with creating a jsfiddle example, sorry)

HTML:

        <input id="input_test7_cb" type="checkbox" class="ui-btn" />
        <input id="input_test7" value="my input 7 ..." data-clear-btn="true" />

Javascript:

jQuery( document ).on( "pagecreate", function( event ) {

    $("#input_test7_cb").on('change', function () {
        console.log("Checkbox changed");
        var kb;
        var $input = $("#input_test7");
        if (this.checked) {
            $input
                .keyboard({})
                .addMobile(); // this will break the code after the first destroy()
        } else {
            kb = $input.getkeyboard();
            if (kb) {
                kb.destroy();
            }
        }
    });
}); // DOM ready

Environment:

• Virtual keyboard: 1.23.2
• JQuery: 2.1.3
• JQuery Mobile: 1.4.5

[Mottie]

Hi @mpf82!

It looks like a javascript error is popping up when no keyboard options are set. I just fixed that issue. Please check to see if it resolves your issue with jQuery Mobile.

[mpf82]

Hi @Mottie

thanks for the fast reply.

Unfortunately, this did not solve the problem. I already accounted for the missing options by passing an empty object to the keyboard( ) method (see code above).

As I said, the code works if I do not call .addMobile() - but that's not an option for me in my project, because it makes the layout really ugly.

For some reason the code works once with the call to addMobile() - but after destroying the keyboard for the first time and then re-creating it, I get the afore mentioned error in the mobile extension.

On the bright side, the jsfiddle http://jsfiddle.net/Mottie/n2yh4ym9/2/ now works (again).

[mpf82]

Here's my take on creating a working fiddle to reproduce the problem, but it seems I can't even manage to load JQuery Mobile properly:

http://jsfiddle.net/4atuL77n/

[Mottie]

Ok, I'm pretty sure I squashed the bug this time!

Make sure to update the core & mobile extension scripts.

[mpf82]

Hi @Mottie

it's working now.

Thanks a lot!