Unable to invoke native functions from the javascript, in Phonegap

Question

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.

Answer 1

[1] Make sure you have imported "cordova.js" in index.html (your entry html page)

[2] You can add your custom plugin by either in cordova.plist OR in config.xml

=> For cordova.plist

Key - Value

HelloPlugin - HelloPlugin

[OR]

=> For config.xml , add below feature tag

<feature name="HelloPlugin">
      <param name="ios-package" value="HelloPlugin" />
      <param name="onload" value="true" />
</feature>

[3] Then make changes for your below function in HelloPlugin.m and HelloPlugin.h

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

To,

- (void) nativeFunction:(CDVInvokedUrlCommand*)command {

CDVPluginResult* pluginResult = nil;
NSString* echo = [command.arguments objectAtIndex:0];

if (echo != nil && [echo length] > 0) {
    //pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
    pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:@"Sandip"];
} else {
    pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
}


if ( [echo isEqualToString:@"success"] )
{
    NSLog(@"Native log : success");
} else {
    NSLog(@"Native log : failed");
}

[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];

}

Answer 2

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 :).