Software Archive
Read-only legacy content
17061 Discussions

Cordova keyboard plugin undefined

Tawab_G_
Beginner
1,054 Views

I'm trying to create a cross-platform chat messaging application with node.js/socket.io, but I keep encountering numerous problems with some of the cordova plugins. (for example the keyboard plugin)

I'm trying to get the KeyboardShrinksView / HideKeyboardFormAccessoryBar option to work(https://github.com/cjpearson/cordova-plugin-keyboard) on iOS 9 with cordova CLI 5.4.1

I keep getting the error: Keyboard is undefined.

I made sure to add the plugin inside the plugin management.

EDIT: Same goes for the ionic plugin https://github.com/driftyco/ionic-plugin-keyboard

Any suggestions would be welcome

Error message onDeviceReady(): Object {a_startTime______"119.125"b_fnDocumentReady"121.475"c_cordova_ready__falsed_xdk_ready______falsee_fnDeviceReady__"7377.365"}

Error: undefined is not an object (evaluating 'cordova.plugins.Keyboard')

 

0 Kudos
11 Replies
PaulF_IntelCorp
Employee
1,054 Views

Do not use the additions.xml file to add plugins. All plugins should be included using the plugin manager. See this FAQ > https://software.intel.com/en-us/xdk/faqs/cordova#using-plugin-manager

0 Kudos
Tawab_G_
Beginner
1,054 Views

Paul F. (Intel) wrote:

Do not use the additions.xml file to add plugins. All plugins should be included using the plugin manager. See this FAQ > https://software.intel.com/en-us/xdk/faqs/cordova#using-plugin-manager

Yes the plugin(s) are already in my plugin manager. I've tried to edit my .xml BECAUSE it wasn't working.. I obv. deleted my edits and tried deleting/installing the plugin again. but nothing works..

0 Kudos
PaulF_IntelCorp
Employee
1,054 Views

Tawab -- looking more closely at the error message you printed:

Error message onDeviceReady(): Object {
a_startTime______: "119.125", 
b_fnDocumentReady: "121.475", 
c_cordova_ready__: false, 
d_xdk_ready______: false, 
e_fnDeviceReady__: "7377.365"
…}

indicates that you never got a "deviceready" event from the Cordova system. Are you including cordova.js in your index.html file? Your plugins will not get initialized without that.

0 Kudos
Tawab_G_
Beginner
1,054 Views

Paul F. (Intel) wrote:

indicates that you never got a "deviceready" event from the Cordova system. Are you including cordova.js in your index.html file? Your plugins will not get initialized without that.

 

Well, that's the whole problem here! Yes i have included cordova.js in my index.html (and other .html files)

I've also tried this solution from another topic ( https://software.intel.com/en-us/forums/intel-xdk/topic/600286 )

but to no avail.. 

EDIT: Okay..so I've started a new document with a camera plugin (camera plugin works, so device ready event def. fires off..)

HOWEVER, when trying to add another plugin (cordova-keyboard) I keep getting this error:  error: Keyboard is undefined.

I've attached the project, I've been sitting on this problem for days..

0 Kudos
PaulF_IntelCorp
Employee
1,054 Views

Tawab --

  • you should limit your app to a single html file, going beyond that is difficult to manage in a Cordova app (see )
  • I would be concerned about using two keyboard plugins that are essentially doing the same thing, I think you may run into conflicts
  • do not do this > <script src="../plugins/cordova-plugin-keyboard/www/keyboard.js"></script> < that's what the cordova.js file does for you, it is constructed at build time to initialize all plugins

You can do even deeper debugging by debugging a built app on your Android device. Set "debuggable" to "true" in the intelxdk.config.additions.xml file and connect your device via USB, see this page for additional info > https://software.intel.com/en-us/xdk/docs/intel-xdk-debug-and-test-overview#RemoteChromeDevTools <

It appears that you have modified that cordova-plugin-keyboard plugin. In the git repo it claims the API is defined in the window.Keyboard object, which is consistent with the plugin.xml file. But in the version installed in your project the API is located in cordova.plugins.Keyboard, which will definitely compete with the Ionics keyboard, which is not good.

I removed the Ionics keyboard and changed your code to point to cordova.plugins.Keyboard (as such):

    function test(){
        console.log('test');
        cordova.plugins.Keyboard.hide();
        cordova.plugins.Keyboard.hideFormAccessoryBar(true);
//        cordova.plugins.Keyboard.close();
    }

but your app reboots when I push the enter key on my keyboard (after typing something into one of the form fields).

I removed you modified version and added back the Ionics keyboard. It appears to work better, but your app still reboots after the keyboard enter key is hit.

BTW -- there is a newer version of the Ionics keyboard. I've updated the featured list so you can see it there. I recommend using the Ionics version, it appears to work better, but you'll have to be the judge. In any event, I recommend you DO NOT use both at the same time. I did not try the later version.

0 Kudos
Tawab_G_
Beginner
1,054 Views

Thanks for the reply,

Reason for the change in the .xml file was because someone was having the same issue on the git, so I've tried his solution.
The script src was because i kept getting the error: Keyboard is undefined, so I tried testing it by linking directly to it (since cordova.js didn't work either)

So I've deleted both the plugins, and installed the latest ionic keyboard plugin (2.2) but I keep getting this error:

 

TypeError: undefined is not an object (evaluating 'cordova.plugins.Keyboard.hide') 

 

I can't believe nobody else has encountered this problem.

 

EDIT: What's even more weird is that this exact code works on android

window.addEventListener('native.keyboardshow', keyboardShowHandler);

function keyboardShowHandler(e){
    alert('Keyboard height is: ' + e.keyboardHeight);
}

but not on iOS.. 

 

0 Kudos
PaulF_IntelCorp
Employee
1,054 Views

Tawab -- that's because that method does not exist in the Ionics keyboard plugin. Please read the documentation for that plugin.

Here's an image showing the list of functions in the cordova.plugins.Keyboard object when the Ionics keyboard has been added to your sample app. This is a built version of your app running on a real Android device, attached over USB using remote CDT for debugging:

Screen Shot 2016-05-12 at 7.43.06 AM.png

It's called cordova.plugins.Keyboard.close() in that plugin's API.

Plugin APIs are not "standardized" -- they consist of whatever methods and properties the plugin author decided was appropriate or necessary to solve the issue at hand. See this additional test using the JavaScript debug console:

Screen Shot 2016-05-12 at 7.50.31 AM.png

The second one says "undefined" only because it doesn't return a value, but the function works. If the keyboard is being displayed, calling that function will cause it to be hidden.

0 Kudos
Tawab_G_
Beginner
1,054 Views

I'm still getting the same error 

	TypeError: undefined is not an object (evaluating 'cordova.plugins.Keyboard.close')

Have you tried debugging on an iOS device?

EDIT: Here's a screenshot of my console, interesting is that xdk_ready = false, a quick google search gave me some solutions, but none of them worked.

aa386f6dbd47dc4a7a41d499d3a01222.png

0 Kudos
PaulF_IntelCorp
Employee
1,054 Views

On an iOS device you must build the app and install it. App Preview does not include any third-party plugins. You may have to use weinre with your built app to debug this on iOS > https://software.intel.com/en-us/xdk/videos/how-to-debug-apps-remotely-using-the-intel-xdk

0 Kudos
PaulF_IntelCorp
Employee
1,054 Views

Tawab -- xdk_ready false is correct. We no longer support that old device ready mechanism, the code that is checking for that is designed to work with the presence of the older XDK plugins and container, which have been retired. I'll remove that code in a future version, but it is perfectly okay for that variable to be false, the code is watching for either the cordova ready or the xdk ready. These days you should only see the cordova ready (you might see both in the Emulate tab, but that will eventually be fixed).

Are you using the Debug tab or weinre or ??? to get your console image?

0 Kudos
Tawab_G_
Beginner
1,054 Views

Well, I used the debug tab, but I realised that 3rd party plugins (which this keyboard plugin is.. (here's the mistake)) are only visible when you actually build the app. So that's what I'm doing now.. will report back

edit: I'm happy to announce the keyboard plugin IS working. Thanks for the help. 

0 Kudos
Reply