Search code examples
objective-cios5cordovaios4phonegap-plugins

Unable to invoke native functions from the javascript, in Phonegap


This is what I did:

1) Installed Cordova version 2.0.0

2) My XCode Version is 4.3.3

3) Created a phone gap project by ./create command.

4) in index.html:

<script   type="text/javascript">

    function nativePluginResultHandler (result) 
    { 
        alert("SUCCESS: \r\n"+result ); 
    } 

    function nativePluginErrorHandler (error) 
    { 
        alert("ERROR: \r\n"+error ); 
    } 

    function callNativePlugin( returnSuccess ) 
    { 
        alert("Invoking..");
        HelloPlugin.callNativeFunction( nativePluginResultHandler, nativePluginErrorHandler, returnSuccess ); 
    } 
</script>


<h1>Hey, it's Cordova!</h1>  
<button onclick="callNativePlugin('success');">Click to invoke the Native Plugin with an SUCCESS!</button>  
<button onclick="callNativePlugin('error');">Click to invoke the Native Plugin with an ERROR!</button> 

5) Inside HelloPlugin.js:

var HelloPlugin = { 
    callNativeFunction: function (success, fail, resultType) { 
        echo "Welcome";
        return Cordova.exec( success, fail, "com.mycompany.HelloPlugin", "nativeFunction", [resultType]); 
    } }; 

6) HelloPlugin.m:

#import "HelloPlugin.h"

@implementation HelloPlugin

- (void) nativeFunction:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options { 
    //get the callback id 
    NSString *callbackId = [arguments pop]; 
    NSLog(@"Hello, this is a native function called from PhoneGap/Cordova!"); 
    NSString *resultType = [arguments objectAtIndex:0]; 
    CDVPluginResult *result; 
    if ( [resultType isEqualToString:@"success"] ) 
    { 
        result = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString: @"Success :)"]; 
        [self writeJavascript:[result toSuccessCallbackString:callbackId]]; 
    } else { 
        result = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString: @"Error :("]; 
        [self writeJavascript:[result toErrorCallbackString:callbackId]]; 
    }
} 

@end

7) HelloPlugin.h:

#import "Cordova/CDVPlugin.h"
#import "Cordova/CDV.h"

@interface HelloPlugin : CDVPlugin


- (void) nativeFunction:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;


@end

8) In Cordova.plist, I added the the following key/value:

com.mycompany.HelloPlugin        HelloPlugin

The problem is that the native function from the HelloPlugin is not getting invoked at all.

What am I missing here?

Help would be really appreciated.


Solution

  • You may try the following:

    1 - In your file Cordova.plist, add the following key / value to the Plugin section:

    HelloPlugin                      HelloPlugin
    

    instead of:

    com.mycompany.HelloPlugin        HelloPlugin
    

    2 - Change the content of your javascript file HelloPlugin.js to the following:

    var HelloPlugin = { 
        callNativeFunction: function (success, fail, resultType) { 
            console.log ("Welcome");
            return Cordova.exec( success, fail, "HelloPlugin", "nativeFunction", [resultType]); 
        } };
    

    3 - Change your HTML file index.html to the following:

    <html>
        <header>
    
            <script type="text/javascript" src="./js/HelloPlugin.js"></script>
    
            <script   type="text/javascript">
    
                document.addEventListener("deviceready",onDeviceReady,false);
    
                function onDeviceReady()
                {
                    // do your thing!
                    alert("Cordova is working")
                }
    
                function nativePluginResultHandler (result) 
                { 
                    alert("SUCCESS: \r\n"+result ); 
                } 
    
                function nativePluginErrorHandler (error) 
                { 
                    alert("ERROR: \r\n"+error ); 
                } 
    
                function callNativePlugin( returnSuccess ) 
                { 
                    alert("Invoking..");
                    HelloPlugin.callNativeFunction( nativePluginResultHandler, nativePluginErrorHandler, returnSuccess ); 
                } 
            </script>
        </header>
    
        <body>
    
            <h1>Hey, it's Cordova!</h1>  
            <button onclick="callNativePlugin('success');">Click to invoke the Native Plugin with an SUCCESS!</button>  
            <button onclick="callNativePlugin('error');">Click to invoke the Native Plugin with an ERROR!</button> 
    
        </body>
    </html>
    

    Hope this helps. Let me know if this works.

    Also, I found this link and I thought you may find it interesting:

    http://www.adobe.com/devnet/html5/articles/extending-phonegap-with-native-plugins-for-ios.html

    There's a sample code that you can download from the link above, which could be useful :).