3 Replies Latest reply on Jan 29, 2017 7:17 PM by kerrishotts

    implementing local notification in visual studio apache cordova

    franko87419730

      please am developing an app for my church. And i want to implement local notification to notify church members for meeting for some days in the week. am using

      visual studio apache cordova. am done intalling the cordova local notification plugin but am finding it difficult to implement it. please kindly help me i need it badly

        • 1. Re: implementing local notification in visual studio apache cordova
          kerrishotts Adobe Community Professional

          Insufficient information.

           

          Please share what you have tried, how it isn't working (including error messages, etc.), devices you've tested on (and OS versions)...

           

          See Asking Better Questions (PhoneGap Forum)

          • 2. Re: implementing local notification in visual studio apache cordova
            franko87419730 Level 1

            please this is my interface of the add notifification. i have my local notification plugin ready in my app but

            .......................................................................................... .......................................................................................... .......

             

            //// this is the addpage.html codes

             

             

            <title></title>

            </head>

            <body>

                <div data-role="page" data-position="fixed">

                    <header data-role="header" style="background-color:red">

                        <a href="#" data-icon="back" data-iconpos="notext" data-rel="back" title="Go back">Back</a>

                        <h1><BLINK><font color="#FFFFFF">Adding Reminder</font></BLINK></h1>

                    </header>

                    <div data-role="main" class="ui-content">

                        <p>

                            Enter title and message for the reminder:

                            <input type="text" id="title" placeholder="Title" />

                            <input type="text" id="message" placeholder="Message" />

                            Enter date and time to trigger reminder:

                            <input type="date" id="date" />

                            <input type="time" id="time" />

                            <a target="_blank" href="javascript:add_reminder()" id="p" data-role="button" style="text-decoration: none"><font face="Times New Roman" color="red">Add</font></a>

                        </p>

                    </div>

             

             

             

             

            AND I WROTE THE JAVASCRIP CODE IN THE INDEX.JS AS BELOW

             

            // For an introduction to the Blank template, see the following documentation:

            // http://go.microsoft.com/fwlink/?LinkID=397704

            // To debug code on page load in Ripple or on Android devices/emulators: launch your app, set breakpoints,

            // and then run "window.location.reload()" in the JavaScript Console.

             

             

             

            (function () {

                "use strict";

             

             

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

             

             

                function onDeviceReady() {

                    navigator.notification.alert("this is my first notification app", onOKClickFuntion, "information", "ok");

              

                    // 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.

                    var parentElement = document.getElementById('deviceready');

                    var listeningElement = parentElement.querySelector('.listening');

                    var receivedElement = parentElement.querySelector('.received');

                    listeningElement.setAttribute('style', 'display:none;');

                    receivedElement.setAttribute('style', 'display:block;');

                };

                function add_reminder() {

                    var date = document.getElementById("date").value;

                    var time = document.getElementById("time").value;

                    var title = document.getElementById("title").value;

                    var message = document.getElementById("message").value;

             

             

                    if (date == "" || time == "" || title == "" || message == "") {

                        navigator.notification.alert("Please enter all details");

                        return;

                    }

             

             

                    var schedule_time = new Date((date + " " + time).replace(/-/g, "/")).getTime();

                    schedule_time = new Date(schedule_time);

             

             

                    var id = info.data.length;

             

             

                    cordova.plugins.notification.local.hasPermission(function (granted) {

                        if (granted == true) {

                            schedule(id, title, message, schedule_time);

                        }

                        else {

                            cordova.plugins.notification.local.registerPermission(function (granted) {

                                if (granted == true) {

                                    schedule(id, title, message, schedule_time);

                                }

                                else {

                                    navigator.notification.alert("Reminder cannot be added because app doesn't have permission");

                                }

                            });

                        }

                    });

                }

                function schedule(id, title, message, schedule_time) {

                    cordova.plugins.notification.local.schedule({

                        id: id,

                        title: title,

                        message: message,

                        at: schedule_time

                    });

             

             

                    var array = [id, title, message, schedule_time];

                    info.data[info.data.length] = array;

                    localStorage.setItem("rp_data", JSON.stringify(info));

             

             

                    navigator.notification.alert("Reminder added successfully")

                }

             

                function onPause() {

                    // TODO: This application has been suspended. Save application state here.

                };

             

             

                function onResume() {

                    // TODO: This application has been reactivated. Restore application state here.

                };

                var info = null;

             

             

            document.addEventListener("deviceready", function(){

            if(!localStorage.getItem("rp_data"))

            {

              var rp_data = {data: []};

              localStorage.setItem("rp_data", JSON.stringify(rp_data));

            }

             

             

            info = JSON.parse(localStorage.getItem("rp_data"));

            }, false);

            })();

             

             

             

            PLEASE WHEN I CLICK ON THE ADD BUTTON THE JAVASCRIPT CODE IS UNABLE TO TRIGGER. PLEASE I NEED HELP WHAT AM I DOING WRONG. OR SOME ONE WITH A SAMPLE SIMPLE LOCAL NOTIFICATION APP WITH VISUAL STUDIO SHOULD PLS HELP ME

            • 3. Re: implementing local notification in visual studio apache cordova
              kerrishotts Adobe Community Professional

              Debugging with Chrome or Safari is your friend and would immediately point out your problem here. It's not a PhoneGap issue; it's an issue with your code and how JavaScript scope works.

               

              You have

               

                <a target="_blank" href="javascript:add_reminder()" id="p" data-role="button" style="text-decoration: none"><font face="Times New Roman" color="red">Add</font></a>

               

              but you've defined "add_reminder" in an IIFE (immediately Invoked Function Expression) in index.js. IIFEs do not expose their contents to any external scope (unless you leak or return their contents explicitly), so technically "add_reminder" is out of scope when the user comes along to click your button. (The HTML is in the global scope, not the IIFE's scope).

               

              Suggestions:

              • Read up on how JavaScript handles scope
              • Don't use "href" attributes to execute JavaScript when someone clicks something. Add an event handler from your JavaScript code instead, like so:

                document.getElementById("p").addEventListener("click", add_reminder, false);

                Assuming you do that in onDeviceReady, add_reminder will be in the visible scope, and when the user "clicks" the button, your function will be triggered. (However, this is far from ideal in the mobile world -- these "clicks" are synthesized, and are often very slow. Google for fast click libraries.)

              • Other thoughts and suggestions:
                • I don't know if you are including the index.js file or not, since you've not posted the entirety of your HTML file. If you aren't including index.js in a <script> tag, you do need to do so. (You also need to include "cordova.js").
                • Don't use <blink> or <font>; these tags are deprecated. If you must blink something, use CSS animation (but be mindful of your seizure-prone users who might be triggered by blinking!)
                • Use CSS to apply styling, not <font>.
                • <input>s should be contained within <label>s for accessibility reasons, and the entire thing should be within a <form>. Instead of using an <a> to trigger the submission of the form, use an <input type="submit"> and catch the submission with JavaScript. This way the form works if the user has a keyboard attached and presses ENTER instead of clicking the button.
                • Don't use ALL CAPS when using the forum; it reads like you're screaming. Probably not your intention, but even if it is, it's not apt to get a reply any faster.