CODEWITHSUNDEEP
cordova
deepblue
deepblue

Reputation: 8596

phonegap deviceready event - ripple emulator

hello all
Im having some problems with the initial phonegap 'deviceready' event-handler not being triggered properly, in the ripple chrome extension phonegap emulator. 

<script src="xui-2.0.0.js" type="text/javascript" charset="utf-8"></script> 
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<!--
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
-->
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script>
<!-- <script type="text/javascript" charset="utf-8" src="main.js"></script> -->
<script>
    function onLoad() {
        //console.log(document);
        /*document.addEventListener('deviceready',function() {
                console.log('PHONEGAP_READY');
            },false);*/
        console.log('ON_LOAD');
        x$(document).on('deviceready', function() {
                console.log('PHONEGAP_READY');
            }, false);
    }

</script>

so the issue is that the console.log('PHONEGAP_READY') is never run. I used XUI here just to try the way the official ripple phonegap demos work (ones posted on their page). neither that, nor the document.addEventListener(), work... whats strange is that the chrome console output reads "PhoneGap :: fired deviceready event!" so Im assuming the event really is firing, but the event handler itself is not being called...
any clues are appreciated

thanks

Upvotes: 5

Views: 8908

Answers (6)

Post Impatica
Post Impatica

Reputation: 16393

Based on the above suggestions here is a full index.js for a Visual Studio 2015 RC cordova app (editing the provided template):

(function () {
    "use strict";
    function bootstrapAngular() {
    console.log("Bootstrapping AngularJS");
    // This assumes your app is named "app" and is on the body tag: <body ng-app="app">
    // Change the selector from "body" to whatever you need
    var domElement = document.querySelector('body');
    // Change the application name from "app" if needed
    angular.bootstrap(domElement, ['app']);
    }
    if (document.URL.indexOf('http://') === -1
        && document.URL.indexOf('https://') === -1) {
        console.log("URL: Running in Cordova/PhoneGap");
        //document.addEventListener("deviceready", bootstrapAngular, false);
        document.addEventListener('deviceready', onDeviceReady.bind(this), false);
    } else {
        console.log("URL: Running in browser");
        bootstrapAngular();
    }
    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );
        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        bootstrapAngular();
    };
    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };
    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };
} )();

Also, they don't really point it out above but you shouldn't put anything in your body tag to make this work. The fuctions do that for you. Finally, don't forget to apply ng-controller somewhere, you still have to specify that.

Upvotes: 0

user3559657
user3559657

Reputation: 141

Include Cordova Script in your html file as follows.

    <script  src="cordova-2.7.0.js"></script>

Upvotes: 2

Reza Assar
Reza Assar

Reputation: 209

FYI changing cordova-x.x.x in the query string to the version installed in your app also causes device ready to fire in the updated version of ripple http://www.raymondcamden.com/index.cfm/2013/11/5/Ripple-is-Reborn.

http://localhost:4400/?enableripple=cordova-3.0.0 (Default, not firing)

http://localhost:4400/?enableripple=cordova-3.2.0 (Changed to my version, firing)

Upvotes: 0

Irina Anastasiu
Irina Anastasiu

Reputation: 668

I've spent hours trying to fix this as well. What will help is manually setting the Cordova Platform version to 2.0 in the Ripple UI (Left pane > Platforms > Version: change from 1.0 to 2.0). It's quite silly, I was calling Ripple with this URL 

http://localhost?enableripple=cordova-2.7.0-Nexus4

but I still had to change the settings manually to finally get it to run. That's because Ripple doesn't know any version higher than 2.0.0, which makes it simply set the platform version to 1.0.0 in the UI... and then it just uses that.

More details also on my blog.

Upvotes: 9

user2152735
user2152735

Reputation: 51

try http://localhost:8080/index.html?enableripple=cordova-2.0.0, this works for me to fire deviceready event

Upvotes: 5

Gord
Gord

Reputation: 1825

There is a quirk in how ripple emulates the runtime for phonegap: docs here

ripple will inject the phonegap runtime before the document loads and if you include the phonegap.js file in your app it will override the ripple emulated environment and that may cause issues.

Try removing the phonegap source from your page and reloading to see if that helps.

Upvotes: 15

Related Questions