I'm using a Google Apps Script Web App and HtmlService to serve the content and I'm trying to dynamically add input elements to a form with appendChild. It works in Chrome 24 and IE 10, but Firefox 19.0.2 doesn't update the elements listing for the form.
So, it displays correctly on the webpage, but in Firefox, any input elements added with appendChild to the form aren't part of the form.elements collection. It's worth noting this issue only appears when the HTML is sanitized with Caja, if I use the same code in jsfiddle it works fine.
The issue can be seen here, which is just the following code:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function print(form)
{
var str = "";
for(var v = 0; v < form.length; v++)
{
str += "<br>" + form[v].nodeName + "." + form[v].id + ": ";
if(form[v].elements != undefined)
for(var w = 0; w < form[v].elements.length; w++)
{
str += form[v].elements[w].name + ", ";
}
}
return str;
}
function submitForm()
{
document.getElementById("nameLookupHelp").innerHTML = (print(document.forms)) + "<br>Total Elements:" + document.forms[0].elements.length;
return;
}
function onLoad()
{
var name = document.getElementById("nameForm");
var t = document.createElement("input");
t.name = "TestInput";
//t.id = "TestInput";
name.appendChild(t);
}
</script>
</head>
<body onload="onLoad()">
<form name="nameForm" id="nameForm">
<input name="nameLookup" id="nameLookup">
<input type="button" id="bntNameForm" onclick="submitForm(this)" value="Lookup">
<div class="" id="nameLookupHelp">Please enter your name.</div>
</form>
</body>
</html>
From what I've found on the subject, Firefox doesn't like invalid HTML; however, from what I can tell, the HTML output is perfectly valid. More over, since it works on jsfiddle, I assume the issue has to be with the way Caja is interacting with my HTML and Firefox.
Also, one last thing, if I inspect the form element in Firefox and double click on the form tag in the markup panel, then click off (cancel editing), Firefox then detects all of the elements and everything works fine. What Firefox displays as the HTML doesn't change though.
Thank you in advanced for your help.
Congratulations, you found a bug; a form's .elements never updates after the first time it is accessed. I have fixed it in Caja r5321.
Related
I'm trying to get all quotes out of HTML body content.
Currently I'm in this state:
<!DOCTYPE html>
<html>
<body>
<p id="demo">
<pre> This is my text "with some quotes" and some "more" quotes. </p>
<button type="button" onclick="myFunction()">Get quotes</button>
<script>
function myFunction() {
var text = document.body.innerHTML;
var quotes =text.match(/"([^"]+)"/g);
for (var i = 0; i < quotes.length; i++) {
document.write(quotes[i] + "<br />" + "<br />");
}
}
</script>
</body>
</html>
but I get all the quotes that are in my code like this:
"demo"
"with some quotes"
"more"
"button"
"myFunction()"
"([^"
"/g); for (var i = 0; i < quotes.length; i++) { document.write(quotes[i] + "
" + "
When I really need only this:
"with some quotes"
"more"
Do you have any ideas how i could fix this?
I tryed to write the content directly to var text and everything worked, however I would like to get the content out of body automatically.
Your advices will be appreciated.
You can change
var text = document.body.innerHTML;
to
var text = document.body.innerText;
To retrieve from the content without including the HTML
Edit: You may want to use a combination of innerText and textContent properties to get a more cross-browser friendly solution if you can't use jQuery.
Examples: http://help.dottoro.com/ljhvexii.php
Update: This answer was submitted in 2014. innerText is supported now by virtually all browsers:
IE 6+
Edge all versions
Firefox 45+
Chrome 4+
Safari 3.2+
Opera 10+
More browser info at caniuse.com
Don't access the body element, access just the p element. You then won't get quoted items from the rest of the document:
document.getElementById('demo').innerHTML;
I'm using javascript to create a file explorer in my website.
I have a function wich read each file from my website and change them into a caracters chain with a chain.split() for each file.
Then, in the array created, I search words that I take from a form. And then, with an innerHTML, I rewrite my HTML page with the answers.
It works, but, when the page is rewrite, it automaticly refresh, and I lose all my search reults...
I tried to stop refresh with window.stop(), document.execCommand('stop'), and it's still refresh...
Here my form :
<form name="recherche" onsubmit="javascript:maFonction()">
<INPUT class="finder" type="text" name="maRecherche" placeholder="Enter your search"/>
<input class="press" type="submit" name="search" value="Search"/>
<p style="margin-left:5%">It may take five secondes...</p>
</form>
And here, the writing part of my JS function :
var mesResultats = "";
if (bin > 0)
{
a = 0;
mesResultats += 'your search <u><b>' + words + '</u></b> can be found here : <BR><BR>';
for (var i = 0; i < mesLiens.length; i++)
{
if (mesLiens[i] != mesLiens[i-1] )
{
var monLien = '<div style="margin-left:5%; margin-right:5%; text-align:justify;">' + mesTitres[a] + '' + '<BR></div>';
mesResultats += monLien + '<hr>';
}
a++;
}
}
else
{
var monLien = 'Homepage';
mesResultats += 'No answer corresponding to your search <u><b>' + words + '</u></b>... ' + monLien + '</div>';
}
elemnt = document.getElementById("result");
elemnt.innerHTML = mesResultats;
If anyone have an idea of how to keep my search results, thank you !
(PS : I can't show you with a link...)
Add return false into the onsubmit event, to don't refresh the page.
HTML :
<form name="recherche" onsubmit="return myFunction();">
Javascript :
function myFunction(){
return false;
}
In case someone has the same situation as me, the application was using <meta http-equiv="refresh" content="3"> and was refreshing the content every 3 seconds. The solution for me was to execute window.stop(); directly from the console.
I'm creating a checkbox drawing program using HTML and JavaScript. It basically (at this early stage) involves drawing an 100 x 100 square of checkboxes. The problem is, every time I try to load the page, it doesn't load. It simply displays the spinning half circle (I'm using chrome) forever. Can you tell me what I'm doing wrong? Here is my code:
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript">
function drawBoxes()
{
for(var i = 0;i<100;i++)
{
for(var j = 0;j<100;j++)
{
document.getElementById('drawarea').innerHTML += "<input type = 'checkbox'>";
}
document.getElementById('drawarea').innerHTML += "<br />";
}
}
</script>
<title>Checkbox drawer</title>
</head>
<body onload = "drawBoxes()">
<div id = "controlbar" style = "height:100px;float:top;background-color:#FF0000;"><p>hello</p></div>
<p id ="drawarea"></p>
</body>
</html>
UPDATE: After adding jcubic's catch of the <input> tag, the first <div> (in red) loads, but the checkboxes don't.
Instead of manipulating the DOM 100*100 times, just build a string and set the value once at the end of the loops:
var html = "";
for(var i = 0;i<100;i++)
{
for(var j = 0;j<5;j++)
{
html += "<input type = 'checkbox'>";
}
html += "<br />";
}
document.getElementById('drawarea').innerHTML = html;
Here's the JSFiddle to see that this load very quickly: http://jsfiddle.net/8hVBQ/
I am using a way to insert some javascript code in the page which works with all browsers but not with IE. Here is a sample:
http://boxfly.free.fr/tmp/innerjs.html
The line which does not work properly with IE is:
ele.text = document.getElementById('DIV_js').innerHTML ;
If I change this line to:
ele.text = 'alert("Hello")' ;
It works. But I need to be able to insert code which is on a lot of lines, not only one line for displaying an alert, that's why I am using a DIV to contain the Javascript code... ;)
Does anyone know how to make this script work with IE:
<body>
<div id="DIV_js" style="display:none;">
var i = 'here' ;
function hello() {
alert('toto says ' + i) ;
}
</div>
<script>
var ele = document.createElement("script") ;
ele.type = 'text/javascript' ;
ele.text = document.getElementById('DIV_js').innerHTML ;
document.body.insertBefore(ele, (document.getElementsByTagName("div"))[0]);
</script>
<span onClick="hello();">Click to display alert</span>
</body>
See if this works in IE: http://jsfiddle.net/nGxTf/
I changed it to an eval() call, rather than inserting it into a script element.
Try this:
// The rest of the code above omitted for brievity
var ele = document.createElement("script");
ele.type = 'text/javascript';
ele.innerHTML = document.getElementById('DIV_js').innerHTML;
// Don't use getElementsByTagName, you risk inserting the script in more than one div
document.getElementById('yourDiv').appendChild(ele);
innerHTML works form IE6 to IE9 but it has buggy.innerHTML on tbody elements is readOnly in IE
i'm pretty new to Javascript and basiclly everything related to web
coding. i have a simple problem using InnerHTML in FF, i hope you can
help me.
i'm using this code, that should generate a simple html input line,
and in IE it works fine (although when i load it i get the "should i
enable activeX msg on top), but in FF it doesn't work at all, i can
see it's on the page thorugh source, but it doesn't show anything...
<div id="mainDiv"></div>
<script type="text/javascript">
var siteBoxes = '<form action=HTMLPage.htm name="myform">';
for (var i = 0; i < arr1.length; i++) {
siteBoxes += '<INPUT TYPE="checkbox" id="box'+i+'"
VALUE="'+arr1[i]+'"/> '+arrNames[i]+'';
}
siteBoxes += '';
document.getElementById("mainDiv").innerHTML=siteBoxes;
i'm sure it's a simple solution, and i tried searching on the web, but
i'm running out of strength for that, i hope any of you kind people
can help me.
thanks in advance!!!
ok, the problem is with the array definition in the head.
i just noticed that in the error console in FF i get a msg that the arr1 is undefined, but it is, i even tried moving it to the body and it doesn't change, still undefined... and it works in IE.
could it be something with the array definition? is it different from IE and FF???
var arr1 = new Array(
"http://www.google.com",
"http://www.yahoo.com",
"http://www.cnet.com",
"http://www.google.ar/search?q="
);
again, it works great in IE, but not in FF
Somethings I noticed at first glance.
<div id="mainDiv"></div>
<script type="text/javascript">
var siteBoxes = '<form action="HTMLPage.htm" name="myform">';//put quotes around page
for (var i = 0; i < arr1.length; i++) {
siteBoxes += '<INPUT TYPE="checkbox" id="box'+i+'" VALUE="'+arr1[i]+'"\/>
'+arrNames[i]+'<br \/><br \/>';
}
siteBoxes += '<\/form>';
document.getElementById("mainDiv").innerHTML=siteBoxes;
arr1 is never declared at least from the code you present to us.
Works in Opera, IE and FF for me.
Try unescaping the output;
document.getElementById("mainDiv").innerHTML = unescape(siteBoxes);
There is something wrong with the ending quotation mark in your script tag. If I delete it and type a new one, the code works.
There must be a problem with the rest of your code because when I change it. It works fine.
<html>
<head>
</head>
<body>
<div id="mainDiv"></div>
<script type="text/javascript">
var arr1 = new Array();
var arrNames = new Array();
arr1[0] = "test";
arrNames[0] = "nameTest";
var siteBoxes = '<form action=HTMLPage.htm name="myform">';
for (var i = 0; i < arr1.length; i++) {
siteBoxes += '<INPUT TYPE="checkbox" id="box'+i+'" VALUE="'+arr1[i]+'"/> '+arrNames[i]+'<br /><br />';
}
siteBoxes += '</form>';
document.getElementById("mainDiv").innerHTML = siteBoxes;
</script>
</body>
</html>
Here's perhaps a cleaner way of implementing this (see comments in code as well):
//You can use the simple way of creating an array, and instead of having two
//arrays that represent the names and urls, just make a single array of JSON
var sitesArray = [
{siteName: "Google",siteUrl:"http://www.google.com"},
{siteName: "Yahoo",siteUrl:"http://www.yahoo.com"},
{siteName: "CNET",siteUrl:"http://www.cnet.com"},
{siteName: "Google Search",siteUrl:"http://www.google.ar/search?q="}
];
//Create an ouput array where you'll compile your html
var outputArray = [];
//Now loop through sitesArray and push the strings onto the ouputArray
for (var i=0,len=arr1.length;i < len;++i) {
outputArray.push("<input type=\"checkbox\" id=\"box",i,"\" ",
"value="\",sitesArray[i].siteUrl,"\" /> ",
sitesArray[i].siteName,"<br /><br />");
}
document.getElementById("mainDiv").innerHTML = outputArray.join("");
The primary reason for suggesting this is that string concatenation can be very slow, especially if you have lots of long strings. It's not as big an issue in Firefox, but it's definitely an issue in IE. So pushing strings onto an array, then joining them at the end will give you better performance.