Why nortification doesn't appear in Cordova (on Android)?

92 views
Skip to first unread message

Victor F

unread,
Mar 28, 2018, 11:11:55 AM3/28/18
to phonegap
I have to buttons on a page and I want nortification appear on buttons click. But nothing happens. I only added document.getElementByClassName... and buttonController functions. But nortification not working on buttons click.
I know there is way to completely rewrite everything so it would work, but would be nice to know why it's not working that way -it's wierd because I only changed it a slightly.

Here is HTML:


<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Button Test</title>
    </head>
    <body>
    <button type="button" class="btn">Click Me!</button>
     <button type="button" class="btn">Click Me too!</button>
    </body>
</html

Here is JavaScript:
var app = {

    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    document.getElementByClassName("btn").addEventListener("click", buttonController());
    },

    onDeviceReady: function() {
        this.receivedEvent('deviceready');
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

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

        console.log('Received Event: ' + id);
    }

    alertDismissed: function () {
    }

    buttonController: function () {
    navigator.notification.alert(
        'Button Pressed!',  // message
        alertDismissed,         // callback
        'Title',            // title
        'Button Name'                  // buttonName
    );
    }
};

app.initialize();

dvd2112

unread,
Mar 28, 2018, 11:44:45 AM3/28/18
to phon...@googlegroups.com
In your html there is no reference to js, also maybe the Dom is not rendered when you call getElementByClassName

--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
---
You received this message because you are subscribed to the Google Groups "phonegap" group.
To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Victor F

unread,
Mar 28, 2018, 4:44:40 PM3/28/18
to phonegap
I tried to put
<script src="js/index.js"></script>
before <link rel="stylesheet" type="text/css" href="css/index.css">
but nothing changed.
What to do about DOM ?

dvd2112

unread,
Mar 28, 2018, 5:23:58 PM3/28/18
to phon...@googlegroups.com
You have to init your js function in the body onload event of your html

--

Victor F

unread,
Mar 28, 2018, 6:19:39 PM3/28/18
to phonegap
Like that ? 
<body onload="buttonController()">

Still not working. Should I remove <script src="js/index.js"></script> ?

dvd2112

unread,
Mar 29, 2018, 2:46:58 AM3/29/18
to phon...@googlegroups.com
app.initzialize(), buttoncontroller is not defined if you don't call app.initialize(). Y

--

Victor F

unread,
Mar 29, 2018, 11:41:05 AM3/29/18
to phonegap

I changed it like that, still nothing: 
<script src="js/index.js"></script>        
<link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Button Test</title>
    </head>
    <body onload="app.initialize()">

dvd2112

unread,
Mar 29, 2018, 2:49:02 PM3/29/18
to phon...@googlegroups.com
Maybe you have an error in your js, have you installed the dialog plugin? 

dvd2112

unread,
Mar 29, 2018, 2:54:47 PM3/29/18
to phon...@googlegroups.com
You have also to include the cordova.js in your html, i suggest you to dive a little more in how to create a cordova/phonegap project and also to study the basic of html5/css3/js and how to debug with chrome. 

Victor F

unread,
Mar 29, 2018, 4:06:27 PM3/29/18
to phonegap

Thanks a lot, but shouldn't it all be included already (I mean why they did it that way) for basic project ?

fghfdghdfgh 

dvd2112

unread,
Mar 29, 2018, 5:04:23 PM3/29/18
to phon...@googlegroups.com
No, you have to add the plugins you need

Il 29 mar 2018 22:06, "Victor F" <fsn7...@gmail.com> ha scritto:

Thanks a lot, but shouldn't it all be included already (I mean why they did it that way) for basic project ?

fghfdghdfgh 

--

Victor F

unread,
Mar 29, 2018, 10:42:56 PM3/29/18
to phonegap
I added cordova-plugin-dialogs, then cordova run browser

This is my HTML: 

<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<script src="js/index.js"></script>        
<script src="cordova.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Button Test</title>
    </head>
    <body onload="app.initialize()">

Victor F

unread,
Apr 1, 2018, 4:41:35 PM4/1/18
to phonegap
Nobody is replying. Does it mean that I'm asking stupid question OR that there really strange stuff happening and nobody knows what problem is and Cordova is tricky and/or not reliable? 
  whyyyyyyyyyyyyyyyyyyy

Steve Husting

unread,
Apr 2, 2018, 11:01:47 AM4/2/18
to phonegap
You've got a LOT of replies on your post. It's the weekend. Give time for people to come back to work, read your post of ingratitude, and see if they still want to reply.

jcesarmobile

unread,
Apr 2, 2018, 11:14:56 AM4/2/18
to phonegap
+1, you got plenty of answers helping you with everything you were doing wrong. If it still doesn't work, you are probably still doing something wrong.
Your question has low quality, instead of adding more answers like "fghfdghdfgh", try providing a sample project with your current code.

Also, there isn't a lot of people on this group nowadays, you should probably go to Adobe forums or Cordova slack

Victor F

unread,
Apr 2, 2018, 2:32:28 PM4/2/18
to phonegap
Thanks for information. 
Here is my project:


jcesarmobile

unread,
Apr 3, 2018, 10:46:58 AM4/3/18
to phonegap
I've answered on the question you created on the phonegap forums

Edgar Flores

unread,
Apr 6, 2018, 6:49:55 PM4/6/18
to phonegap

The DOM elements must to be loaded before you can use it

Try this:

<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        

<link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Button Test</title>
    </head>
    <body onload="app.initialize()">
<button type="button" class="btn">Click Me!</button> <!-- Here your DOM is loaded -->
 <button type="button" class="btn">Click Me too!</button>
<script src="cordova.js"></script> 
<script src="js/index.js"></script><!-- Here you CAN use it -->
    </body>
</html> 
Reply all
Reply to author
Forward
0 new messages