CODEWITHSUNDEEP
javascriptioscordova
B K
B K

Reputation: 1564

Button not clickable in "Hello World" Cordova application

I Created a new Cordova application and ran the cordova run ios command to get the default cordova blink screen.

When I add a button it is not clickable. I have written the action in pure vanila JS. I initially tried wring the button action in a separate file and importing that as a script file but that too didn't work.

<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>Hello World</title>
    <script type="text/javascript" language="JavaScript">            
        //Create a new To-Do
        function createNewToDo()
        {
            alert('hi');
        }
    </script>
</head>
<body>
    <div class="app">
        <h1>Apache Cordova</h1>   

  /******** Both buttons not clickable     
            <button class="button" id="getDate">Get Date</button>
            <button type="button" class="addToDo" onclick="createNewToDo()">/>TO DO</button>            
  *********/
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

Upvotes: 1

Views: 879

Answers (2)

Younes Zaidi
Younes Zaidi

Reputation: 1190

Use Like this :

<html>
<head>
    <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">
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Hello World</title>
    <script type="text/javascript" language="JavaScript">            
        //Create a new To-Do
        function createNewToDo()
        {
            alert('hi');
        }
    </script>
</head>
<body>
    <div class="app">
        <h1>Apache Cordova</h1>   

       <!--- Both buttons not clickable   --->
            <button class="button" id="getDate">Get Date</button>
            <button type="button" class="addToDo" onclick="createNewToDo()">TO DO</button>            

    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

Upvotes: 0

jcesarmobile
jcesarmobile

Reputation: 53301

It's because of the Content-Security-Policy meta tag, it doesn't allow onclick.

Just edit it to allow onclick by adding 'unsafe-inline' to default-src section or to script-src. Example:

<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

BTW, if you enable remote debugging for your device and open desktop Safari to inspect the app, you will get an error message like this:

Refused to execute a script for an inline event handler because 'unsafe-inline' appears in neither the script-src directive nor the default-src directive of the Content Security Policy.

Upvotes: 2

Related Questions