Cannot read property 'hideKeyboardAccessoryBar' of undefined in Ripple Emulator about ionic-plugin-keyboard HOT 11 CLOSED

It looks like Ripple has some plugins predefined and emulates their functionality (device, camera, file, etc.), but doesn't support custom plugins since it's not a real device. This error is a little scary because it's so verbose, but all it is saying is that the keyboard plugin is not on the list of plugins bundled in with Ripple, which is fine since it is running in a browser so there is no keyboard anyway.

It does allow you to manually fake a callback by entering in json data into the textarea that pops up, but in this case that's not necessary because there is no callback for any of the keyboard plugin functions :)

from ionic-plugin-keyboard.

Thanks for the explanation. It's really annoying popup and I had to comment out a block with the plugin on development.

from ionic-plugin-keyboard.

Yeah it's pretty annoying, if you're switching between ripple and devices you could add something like

var annoyingDialog = parent.document.getElementById('exec-dialog');
if ( annoyingDialog ) annoyingDialog.outerHTML = "";

so you don't have to comment out custom plugin code every time you switch environments.

from ionic-plugin-keyboard.

Your solution is pretty clever and more helpful. It allows to get rid of other annoying Ripple dialogs. Thanks for sharing.

from ionic-plugin-keyboard.

@tlancina Thank you so much,

from ionic-plugin-keyboard.

I know it's an old post but here's my solution to hide ripple's popup entirely:

var dialogBody = parent.document.getElementById("exec-dialog");
var overlay = parent.document.querySelector(".ui-widget-overlay");
var ngDialog = angular.element(dialogBody.parentElement);
var ngOverlay = angular.element(overlay);
var hideRules = { "height": "0px", "width": "0px", "display": "none" };
ngDialog.css(hideRules); // hide annoying popup
ngOverlay.css(hideRules); // hide annoying popup's backdrop

PS: I ommited the if checks for the sake of demostration.

from ionic-plugin-keyboard.

Hi,
where exactly does this code go? I've tried the start of
$ionicPlatform.ready(function() {
in app.js but still the popup.. :(
and where were the if checks omitted?
thanks in advance

from ionic-plugin-keyboard.

Hi @nsw2206.To address you questions:

• where were the if checks ommited ?
  • after getting the reference to ripple's dialog's DOM nodes I didn't check to see if they were actually not undefined (and they will be undefined in a real device or device emulator) such as adding if (!dialogBody) return; to the code above.
  • what I actualy end up using is a function to check if the code is running in a ripple simulated environment so I don't actually have to manually check if each dialog node I'm referencing actually exists
• where exactly does this code go?
  • I put it in the callback of $ionicPlatform.ready just like yourself. I did one thing different though: executed the code inside a $timeout with 0ms of interval ('trick' to schedule the function's execution in the event bus)
• In the end I have something like this:

// I define this as a global function since I use it in other places
function isRunningInRipple(){
   // in an actual device(or emulator) all url's in the webview are 'file:// ... ' (since I don't load any external urls)
   return document.URL.indexOf('http://') >= 0 || document.URL.indexOf('https://') >= 0;
}

var app =  angular.module('myApp', [ ' ...dependencies...' ]);
app.run(['$ionicPlatform', '$timeout', '...other services...', function($ionicPlatform, $timeout, ...other services...){

  function disableRipplePopup() {
    var dialogBody = parent.document.getElementById("exec-dialog");
    var overlay = parent.document.querySelector(".ui-widget-overlay");
    var ngDialog = angular.element(dialogBody.parentElement);
    var ngOverlay = angular.element(overlay);
    var hideRules = { "height": "0px", "width": "0px", "display": "none" };
    ngDialog.css(hideRules); // hide annoying popup
    ngOverlay.css(hideRules); // hide annoying popup's backdrop
  }

  $ionicPlatform.ready(function(){
    // ... some app bootstrap code    

    if(isRunningInRipple()) $timeout(disableRipplePopup);

   // ...  more app bootstrap code
  });

}]);

EDIT: adressed @nsw2206 comments:

• changed isRippleEmulator to isRunningInRipple
• added $timeout service dependency in app.run

from ionic-plugin-keyboard.

thanks rodrigo. a thousand noobs will appreciate this :)
I know I do... 👍

from ionic-plugin-keyboard.

two changes - add $timeout to the app.run line to avoid $timeout undefined and isRunningInRipple, not isRippleEmulator

app.run(function($ionicPlatform,$timeout) {
and
if(isRunningInRipple()) $timeout(disableRipplePopup);

from ionic-plugin-keyboard.

I would remove display attribute, because it affects on your browser. Side effect is that you cannot for instance refresh page by pressing F5 in your browser or Ctrl+F5...

Before
var hideRules = { "height": "0px", "width": "0px", "display": "none" };

New
var hideRules = { "height": "0px", "width": "0px" };

from ionic-plugin-keyboard.