I haven't come across this issue in any forum, so I decided to reach out here.
I'm encountering a problem with my FirefoxOS app on my FirefoxOS device (Geeksphone Developer Preview) when trying to retrieve remote content from the server.
I am making AJAX calls to a PHP file on the server from my JS files, and successfully displaying the content result in my HTML files. Everything seems to be working fine.
Below is the content of my javascript file
window.addEventListener('DOMContentLoaded', function() {
'use strict';
var translate = navigator.mozL10n.get;
navigator.mozL10n.once(start);
function start() {
var message = document.getElementById('message');
message.textContent = translate('message');
show_content();
}
document.getElementById("btn_1").addEventListener("click",function(){
console.log("hola mundo");
alert("hola mundo");
});
document.getElementById("btn_2").addEventListener("click",function(){
console.log("adios mundo");
alert("adios mundo");
});
function show_content(){
var xmlhttp = new XMLHttpRequest();
var url = server_path + "ejemplo.php";
xmlhttp.open("GET", url, true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txt_server").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send();
}
});
function aviso(){
console.log("clicked");
alert("clicked");
}
Here is the content of my HTML file
<html>
<head>
<meta charset="utf-8">
<title>Example app</title>
<meta name="description" content="A privileged app stub">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/app.css">
<script type="text/javascript" src="js/app.js" defer></script>
<link rel="prefetch" type="application/l10n" href="data/locales.ini" />
<script type="text/javascript" src="js/libs/l10n.js" defer></script>
</head>
<body>
<section>
<h1 data-l10n-id="app_title">My example app</h1>
<p data-l10n-id="app_description">With this example, I want to show a button loaded in HTML and then load content from server by XMLHttpRequest. Two buttons will have click function developed, with alert and console message.</p>
<p id="message"></p>
<button class="wide" data-l10n-id="btn_1" id="btn_1">Click me 1</button>
<button class="wide" data-l10n-id="btn_2" id="btn_2" hidden></button>
<p><span id="txt_server"></span></p>
</section>
</body>
</html>
This is the content of my PHP file
<?php
//to solve CORS advice
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With,Content-Type, Accept");
header("Content-Type: text/html;charset=utf-8");
echo "<button class=\"wide\" data-l10n-id=\"btn_2\" id=\"btn_2\">Click me 2</button><br/>";
echo "<a onclick=\"aviso();\" class=\"wide\">Click me 3</a>";
?>
The issues I am facing are:
- The dynamically created button from the PHP file has no clickable function, neither on the web nor in the FxOS app.
- The "a" element also created in the PHP file has a clickable function on the web [showing an alert and log], but it does not work within the FxOS device app.
You can test what I am explaining at this link. If you wish to view the code, there is a zip file available for download here.
Thank you for taking the time to read this. Feel free to ask if you need clarification on anything.