Cordova Jquery Mobile Local Notification onclick change page

Question

I'm sorry for the long post, but I think this is the only way to explain whats happening... I'm looking for help after a lot of research with no answers... A big problem I think...

So this web app schedule a local notification based on a time picker that the users interact with.. I'm using cordova and jquery mobile multi-page system... It changes from page to page by div IDs, the navigation looks like this: index.html, index.html#page2, index.html#page3.. The local notification is a java plugin for cordova Katzer Local Plugin.

The plugin only works inside the onDeviceReady function and the jquery mobile does not, like this...

document.addEventListener('deviceready', onDeviceReady, false);

/* JQUERY MOBILE HERE */
$(document).on("pagecreate", "#home", function(event) {
    $("a#btnpage2").click(function (e) {
    e.stopImmediatePropagation();
    e.preventDefault();
        $( "#page2" ).pagecontainer( "change"); // change to #page2
    });
});
$(document).on("pagecreate", "#page2", function(event) {
    console.log("#page2 created");
});

function onDeviceReady(){
    /* NOTIFICATION PLUGIN HERE */
    //create notification
    var msg = "notification message";
    window.plugin.notification.local.add({
        id: 'notif',
        date: dateobject,
        message: msg,
        json: JSON.stringify({ test: msg }),
        title: 'Title',
        autoCancel: true,
        ongoing: false
    });
    //onclick event notification
    window.plugin.notification.local.onclick = function (notif, state, json) {
        var msg = JSON.parse(json).test;
    $( "#notificationPage" ).pagecontainer( "change", { text: msg} ); //pass data and change to #page2
    }
    //ontrigger notification
    window.plugin.notification.local.ontrigger = function (notif, state, json) {
        var msg = JSON.parse(json).test;
    }
}

When the notification is fired, and when I click it, it should change the page to #notificationPage. The problem is that the command inside onclick, does not work even when I click the notification with the app running, it throws this error:

Uncaugh Error: cannot call methods on pagecontainer prior to initialization; attempted to call method 'change'.

However the following command DOES change the page, found it on google: $.mobile.changePage( "#notificationPage" ). But only if the app is running and not interrupted. I think that if its in background or closed even if its not interrupted, it doesn't change the page... it opens the activity defined by the plugin. When I say in background or closed and not interrupted i mean that app was closed by the main button and not the back button that completely closes the app.. I guess this is the classes that handle the notification:

/* Receiver.class notification plugin */

Intent intent = new Intent(context, ReceiverActivity.class)
.putExtra(OPTIONS, options.getJSONObject().toString())
.setFlags(Intent.FLAG_ACTIVITY_NO_HISTORY);
int requestCode = new Random().nextInt();
PendingIntent contentIntent = PendingIntent.getActivity(context, requestCode, intent, PendingIntent.FLAG_CANCEL_CURRENT);
return notification.setContentIntent(contentIntent);

/* ReceiverActivity.class notification plugin */

Context context     = getApplicationContext();
String packageName  = context.getPackageName();
Intent launchIntent = context.getPackageManager().getLaunchIntentForPackage(packageName);
launchIntent.addFlags(Intent.FLAG_ACTIVITY_REORDER_TO_FRONT | Intent.FLAG_ACTIVITY_SINGLE_TOP);
launchIntent.putExtra("MSG", msgJson); // here I pass the json message to the new intent, thats gonna open when clicking the notification
context.startActivity(launchIntent);

So basically, I want to click the notification, and open a specific page, so I can get the json value on click and pass to that page and then display it to a div element... It seems I can't use the notification plugin commands outside the onDeviceReady, and neither jquery mobile commands inside the onDeviceReady.... Beside that I have to deal with the problem that is to do the same thing if the app is closed and interrupted...

At the java side, I could create another activity along with the main cordova app activity, and create a layout in xml, and add a textview... On the .java file of this new activity I think I could set the setContentView to this xml layout, and set the text of the textView to the json object value I want... this json value is the same as the message of the notification... I pretty sure, like 95% convinced this would work, not tested yet, but the thing is, its hard to maintenance.

What I tried is create this new activity, exactly like the main activity of cordova, but the loadUrl, I set to the page I want to go, not to LaunchUrl, which loads the address from config.xml of cordova, and passed the json value that I added as extra on the intent creation as a url param so on the jquery mobile side I could take the document.URL and the parameter... like this, first I edited the ReceiverActivity.class from notification plugin:

/* ReceiverActivity.class notification plugin */

Context context     = getApplicationContext();
//String packageName  = context.getPackageName();
Intent launchIntent = new Intent(context, NotificationActivity.class);
launchIntent.addFlags(Intent.FLAG_ACTIVITY_REORDER_TO_FRONT | Intent.FLAG_ACTIVITY_SINGLE_TOP | Intent.FLAG_ACTIVITY_NEW_TASK);
launchIntent.putExtra("MSG", msgJson);
context.startActivity(launchIntent);

/* NotificationActivity.class cordova app second activity */

@Override
public void onCreate(Bundle savedInstanceState){
    super.onCreate(savedInstanceState);
    String msg;
    Intent intent = getIntent();
    Bundle extras = intent.getExtras();
    msg = extras.getString("MSG");

    String utf_encoded = null;
    try {
        utf_encoded = URLEncoder.encode(msg,"UTF-8");
    } catch (UnsupportedEncodingException e) {}

    String url = "file:///android_asset/www/index.html#notificationPage?parameter="+utf_encoded;
    super.loadUrl(url);
}

And on the javascript side, I could retrive that parameter in the url:

document.addEventListener('deviceready', onDeviceReady, false);

$( document ).on( "pagebeforechange" , function ( event, data ) {
    if ( data.toPage[0].id == "notificationPage" ) {
        var url = document.URL;
        var urlParams = decodeURIComponent(url);
        var onlyParams = urlParams.split('=')[1];
        var newchar = " ";
        var paramValue = onlyParams.split('+').join(newchar);
        $('#notificationPage #showMessage').empty();
        $('#notificationPage #showMessage').append("<p>Message: " + paramValue + "</p>");
    }
});
function onDeviceReady(){
    /* ondeviceready */
}

This actually worked, but it has some bugs... Sometimes the page loads, sometimes the page doesn't load, the page sometimes turned to a black screen... It works specially if the app is closed and interrupted, but if its open, most of the times it goes to a black screen... and if I click the back button on the device, it "navigates back", but it actually goes to the page that should be activated and showing the message... its like the page is behind this black screen sometimes and it won't come out to front unless I use back button.. I'm out of options... tried almost everything with no concrete and stable solution.. Flags, javascript, java, redirect url at javascript, at java, nothing seems to work...

Well I'm not a developer. I'm a designer, putting all my efforts to finish this... but god, its hard.... Theoretically a easy solution would be leaving everything at defaults, and when the plugin "launch" the app or the intent, or whatever by clicking the notification, just run a javascript with the command from jquery mobile that change pages... That would be amazing! hahah I really need help..

Thanks to everyone that is reading this... To everyone that will try to help me... Thank you all

Answer 1

Use this method:

cordova.plugins.notification.local.on("click", function (notification) {
    alert(notification.text);
}, scope);

Here is the updated doc.

Cordova Jquery Mobile Local Notification onclick change page