Dynamic content in Firefox OS App
Question
I have created a Firefox OS app. When I click on the title, it loads some web content, modifies it and shows it by using div.innerHtml . This works.
The dynamic content includes some different paragraphs <p>XXX</p> . Every paragraph has its own id "text0", "text1" and so on.
When the user clicks on a paragraph, a JavaScript function should be called.
I have googled various websites and tried different ways to add the onclick-Eventhandler to the dynamic content, but none of these seems to work.
Could you have a look at my code?
I have marked the place, where I want to add the event handler with "====>>>>" in the content.js extract.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link rel="stylesheet" type="text/css" href="style/icons.css"/>
<link rel="stylesheet" type="text/css" href="style/principal.css"/>
<link rel="stylesheet" type="text/css" href="style/header.css"/>
<link rel="stylesheet" type="text/css" href="style/toolbar.css"/>
<link rel="stylesheet" type="text/css" href="style/sidebar.css"/>
<link rel="stylesheet" type="text/css" href="style/menuaction.css"/>
<link rel="stylesheet" type="text/css" href="style/menulist.css"/>
<link rel="stylesheet" type="text/css" href="style/pagebody.css"/>
<title>FxOS Stub</title>
</head>
<body>
XXX
<div id="page0" class="pagebody" aria-owns="tb0" aria-expanded="true">
<!-- Junkyard, only for the sake of the example - NOT for real use -->
<div id="mainpage" style="margin:0.5rem 1rem 0.5rem 1rem">
<h2>FxOsStub revisited.</h2>
<p>This is the first page body (aka page 0, usually your splash screen.)
<br/>Activate the others by pressing the toolbar's items.</p>
</div>
<!-- End of Junkyard - - - - - - - - - - - - - - - - - - - - - - - -->
</div>
XXX
<footer><button>Cancel</button></footer>
</section>
<script type="text/javascript" src="js/temporary.js"></script>
<script type="text/javascript" src="js/dispatcher.js"></script>
<script type="text/javascript" src="js/install.js"></script>
<script type="text/javascript" src="js/toolbar.js"></script>
<script type="text/javascript" src="js/sidebar.js"></script>
<script type="text/javascript" src="js/menuaction.js"></script>
<script type="text/javascript" src="js/menulist.js"></script>
<script type="text/javascript" src="js/pagebody.js"></script>
<script type="text/javascript" src="js/content.js"></script>
</body>
</html>
content.js:
var id_link;//
window.addEventListener(
"load",
function() {
document.getElementById('headline').onclick=LoadContent;
//document.getElementById('mainpage').onclick=CallPage;
id_link = new Object();
}
);
function CallPage() {
var display = document.getElementById('mainpage');
display.innerHTML = "";
}
function LoadContent() {
// Cross domain XHR
var display = document.getElementById('mainpage');
var xhr = new XMLHttpRequest({mozSystem: true});
xhr.mozSystem = true;
xhr.onreadystatechange = function () {
if (xhr.status === 200 && xhr.readyState === 4)
{
//crossDomainXHRDisplay.innerHTML = "<h4>Result from Cross-domain XHR</h4>" + xhr.response;
//crossDomainXHRDisplay.style.display = "block";
var iEnd = 0;
var text = xhr.response;
var output = "";
// Clear all Returns
text = text.replace(/\n/g, "");
text = text.replace(/\r/g, "");
//text = text.replace(/<img.*\/>/g, "image");
// Set HTML header
output = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n";
output = output + "\"http://www.w3.org/TR/html4/loose.dtd\">";
output = output + "<html>\n";
output = output + "<head>\n";
output = output + "<title>Spiegel online</title>";
output = output + "</head>\n";
output = output + "<body>\n";
var cnt_it = 0;
var text_upper = text;
// Search for headlines
while(iEnd == 0)
{
var match = text.match(/\<h2\sclass\=\"article\-title\">(.+?)<\/h2>(.*)/);
if(match != null)
{
if (match.length > 0)
{
var titel=match[1];
var link_src = titel.match(/<a href=\"(.+?)\"\stitle=\"(.+?)".+?>/);
id_link[cnt_it]=link_src[1];
titel = titel.replace(/<a href=\"(.+?)\"\stitle=\"(.+?)".+?>/,"<h2>$2</h2>");
output = output + "<p id=\"text"+cnt_it+"\">" + titel;//match[1];
cnt_it++;
text = match[2];
// Search for article intro
var match_intro = text.match(/(.+?)\<h2\sclass\=\"article\-title\">/);
if(match_intro != null)
{
if (match_intro.length > 0)
{
var search_intro = match_intro[1];
var intro = search_intro.match(/<p\sclass\=\"article\-intro clearfix\">(.+?)<\/p.*/);
if(intro != null)
{
if (intro.length > 0)
{
output = output + intro[1];
}
}
}
}
output = output + "</p>\n";
iEnd = 1;
}
}
else
{
iEnd = 1;
}
}
iEnd = 0;
var text_test = xhr.response;
text_test = text_test.match(/.+?<div\sclass=\"auto-width\snav-channel-sub\">(.*)/);
var text_lower = xhr.response;//text_test[0];
text_lower = text_lower.replace(/\n/g, "");
text_lower = text_lower.replace(/\r/g, "");
text_lower = text_lower.replace(/<img.+?>/g, "");
while(iEnd == 0)
{
var text_lower = text_lower.match(/<ul\sclass\=\"article\-list\">(.+?)<\/ul>(.*)/);
if(text_lower != null)
{
if (text_lower.length > 0)
{
var title = text_lower[1];
var link_src = title.match(/<a href=\"(.+?)\" .*<\/a>/);
if (link_src != null)
{
id_link[cnt_it]=link_src[1];
title = title.replace(/<a href=\"(.+?)\" title=\"(.+?)\".*>.*<\/a>/, "$2");//" - "+id_link[cnt_it]);
//output = output + "<p id=\"text"+cnt_it+"\"><ul class=\"article-list\">" + text_lower[1] + "</ul></p>\n";
output = output + "<p onClick=\"CallPage()\" id=\"text"+cnt_it+"\">" + title + "</p>\n";
cnt_it++;
}
text_lower = text_lower[2];
iEnd = 1;
}
else
{
iEnd = 1;
}
}
else
{
iEnd = 1;
}
}
output = output + "</body>\n";
output = output.replace(/\n/g, "");
output = output.replace(/\r/g, "");
====>>> How to add a WORKING event handler to the different paragraphs, which have the id text0, text1 and so on...
display.insertAdjacentHTML('afterbegin', output);
//display.innerHTML = output;
display.style.display = "block";
//var ObjectUse=display.getElementById("text0");
//ObjectUse.addEventListener("click", function (event) { alert('Hallo'); CallPage(); }, false);
//ObjectUse.onclick="alert('Hallo')";//document.CallPage;**
//var cnt_again = 0;
//for(cnt_again=0; cnt_again<cnt_it; cnt_again++)
//{
// document.getElementById('text'+cnt_again).onclick=CallPage;
// }
//jQuery('.clickable').bind('click', CallPage);
}
};
xhr.onerror = function () {
display.innerHTML = "<h4>Result from Cross-domain XHR</h4><p>Cross-domain XHR failed</p>";
display.style.display = "block";
};
xhr.open("GET", "http://www.spiegel.de", true);
xhr.send();
}
1 answers
solution1
1 2014-09-17 06:09:38
Since that you are saying your paragraphs are dynamically generated, then you can add an event listener to the body, and check event.target , that is the element where the event had origin.
Here's the code:
document.body.addEventListener('click', function(e) {
// e.target.id now is the id of the clicked element
// if you want you can obtain the number in the id and use it like this:
var page = e.target.id.substr(4);
// do something
}, false);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to load remote content in server for my Firefox OS app - In Web and FxOS device
Firefox OS: Callback before app terminates
How to properly close a Firefox OS app?
StarDict support for JavaScript and a Firefox OS App
Launch Firefox OS app when notification is tapped
Unable to use Contacts API in Firefox OS app
Firefox OS App (timer) Background Execution
Firefox OS Inter App Communication with postMessage
Flurry analytics on Firefox OS privileged app
Rendering issue while scrolling in a Firefox OS app
Related Tags