innerHTML / safari problem

@zebdaagMar 06.2007

Hi,

I have a script that takes the innerHTML from one DIV and puts into another..
This works great on firefoxbut not so great in IE en safari.
Some way or another it doesn’t take the real code but it changes it a little for example safari changes al single quotes ‘ tot dubble quote ” so an javascript error appears……what to do about this?

to post a comment

JavaScript

8 Comments(s) _↴

@nadavvinMar 06.2007 — #innerHTML is not w3c standard.

If you put in html which is vaild xml you can use cloneNode() to copy the root node to the desire place.

For example:

function doSomething(var domXML)

{

var d=document.getElementById("someDiv");

d.appendChild(domXML.documentElement.cloneNode());

}

if it just a text you should use document.createTextNode(text);

@nadavvinMar 06.2007 — #Sorry I didn't read good your post:

"I have a script that takes the innerHTML from one DIV and puts into another.."

[CODE]
 
 function copyContent(var divSource,var divDest)
 {
 for (var i=0;i<divSource.childNodes.length;i++)
 {
 divDest.appendChild(divSource.childNodes[i].cloneNode();
 }
 }
 
 [/CODE]

It append the content and not replace it.

if you want to replace, you should use removeChild() to all the childs to clear it:

http://w3schools.com/dom/met_element_removechild.asp

@zebdaagauthorMar 07.2007 — #ow..i think i didn't asked my question in the right way...maybe a little to fast so i will spend more time on it this time.

I'm working with ajax and each time i call the php page connected to this. The php page will send back <div></div>. What i did was this.

[code=php]
 var oldHTML = document.getElementById("content").innerHTML;
 //this part above is messing up my code..
 document.getElementById("content").innerHTML = oldHTML+newPHPinput;
 [/code]

this way i managed to add the div's to the "content" <div> without deleting them....i think there must be another way i can do this. cause this aint working....

so that must do it i think..sorry about my first wrong question...

@nadavvinMar 07.2007 — #Why does my previous message not good?

innerHTML is not standard and also replace the content and you don't want that.

change the php response to send xml for example:

[CODE]
 <?xml?>
 <div>Hello World</div>
 [/CODE]

Now you need to make it dom xml.

The easy way is to use responseXML instead of responseText.

The second way is still use responseText but to make it xml dom use method like:

[CODE]
 function getDOMXML(var text)
 // code for IE
 if (window.ActiveXObject)
 {
 var doc=new ActiveXObject("Microsoft.XMLDOM");
 doc.async="false";
 doc.loadXML(text);
 }
 // code for Mozilla, Firefox, Opera, etc.
 else
 {
 var parser=new DOMParser();
 var doc=parser.parseFromString(text,"text/xml");
 }
 return doc
 }
 [/CODE]

When you just :

[CODE]
 var doc= getDOMXML(newPHPinput);
 var div=document.getElementById("content");
 
 div.appenChild(doc.documentElement.cloneNode());
 
 [/CODE]

@nadavvinMar 07.2007 — #you need to use "cloneNode(true)" instead of cloneNode() so all the content really copy.

http://w3schools.com/dom/met_node_clonenode.asp

"include_all Required. If the Boolean parameter is set to true, the cloned node clones all the child nodes of the original node"

@zebdaagauthorMar 07.2007 — #i don't get it..

this is my full javascript code...but it doesn't work??

[code=php]function getDOMXML(var text)
 // code for IE
 if (window.ActiveXObject)
 {
 var doc=new ActiveXObject("Microsoft.XMLDOM");
 doc.async="false";
 doc.loadXML(text);
 }
 // code for Mozilla, Firefox, Opera, etc.
 else
 {
 var parser=new DOMParser();
 var doc=parser.parseFromString(text,"text/xml");
 }
 return doc
 }
 //AJAX
 var XMLHttpRequestObject = false; 
 
 if (window.XMLHttpRequest) {
 XMLHttpRequestObject = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
 XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
 }
 //
 var layerNameTotal = new Array();
 layerNameTotal[0] = "";
 function getData(dataSource){
 if(XMLHttpRequestObject) {
 var obj = document.getElementById("content");
 XMLHttpRequestObject.open("GET", dataSource);
 XMLHttpRequestObject.onreadystatechange = function(){ 
 if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
 //split php output
 var newLayer = (XMLHttpRequestObject.responseText).split('-->>layerNames--');
 var layerName = newLayer[1].split('--//--');
 //
 var doc = getDOMXML(newLayer[0]);
 obj.appenChild(doc.documentElement.cloneNode(true));
 //
 for(i=0;i<=(layerName.length-1);i++){
 c = layerNameTotal.length; 
 layerNameTotal[c] = layerName[i];
 }
 // 
 for(j=1;j<=(layerNameTotal.length);j++){
 var group
 var coordinates = ToolMan.coordinates()
 var drag = ToolMan.drag()
 var boxDrag = document.getElementById(layerNameTotal[j])
 drag.createSimpleGroup(boxDrag)
 }
 } 
 } 
 XMLHttpRequestObject.send(null); 
 }
 }[/code]

it used to be like this(but this only works on firefox):

[code=php]
 //AJAX
 var XMLHttpRequestObject = false; 
 
 if (window.XMLHttpRequest) {
 XMLHttpRequestObject = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
 XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
 }
 //
 var layerNameTotal = new Array();
 layerNameTotal[0] = "";
 function getData(dataSource){
 if(XMLHttpRequestObject) {
 var obj = document.getElementById("content");
 XMLHttpRequestObject.open("GET", dataSource);
 XMLHttpRequestObject.onreadystatechange = function(){ 
 if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
 //split php output
 var newLayer = (XMLHttpRequestObject.responseText).split('-->>layerNames--');
 var layerName = newLayer[1].split('--//--');
 //
 oldHTML = obj.innerHTML;
 obj.innerHTML = oldHTML+newLayer[0];
 //
 for(i=0;i<=(layerName.length-1);i++){
 c = layerNameTotal.length; 
 layerNameTotal[c] = layerName[i];
 }
 // 
 for(j=1;j<=(layerNameTotal.length);j++){
 var group
 var coordinates = ToolMan.coordinates()
 var drag = ToolMan.drag()
 var boxDrag = document.getElementById(layerNameTotal[j])
 drag.createSimpleGroup(boxDrag)
 }
 } 
 } 
 XMLHttpRequestObject.send(null); 
 }
 }
 [/code]

@nadavvinMar 07.2007 — #Can you bring example of the php result code?

What the AJAX get.

@zebdaagauthorMar 07.2007 — #it receives this:

[code=php]
 <div id="Layer1481" name="Layer1481" style="position: absolute; width: 300px; top: 75px; left: 102px; z-index: 3; cursor: move; opacity: 1;">
 <table border="0" cellpadding="2" cellspacing="0" height="100%" width="100%">
 <tbody><tr>
 <td class="sluit" align="right" bgcolor="#ffffff" height="1"><img src="Artishock%20Design_bestanden/spacer.gif" height="1" width="1"><span onclick='document.getElementById("Layer1481").style.visibility = "hidden"' onmouseover='this.style.cursor="pointer"'>x&nbsp;</span></td>
 </tr>
 <tr>
 <td bgcolor="#cccccc" height="100%" valign="top"><span class="headTXT">Text</span><br><br><span class="TXT">text<br><br><img style="width: 193px; height: 214px;" src="Artishock%20Design_bestanden/1172874913lion.png"><img src="Artishock%20Design_bestanden/1172875044lion_rctb-6424.jpg"><br>Layer14 / 81</span></td>
 </tr>
 <tr>
 <td bgcolor="#cccccc" height="1"><img src="Artishock%20Design_bestanden/spacer.gif" height="1" width="1"></td>
 </tr>
 </tbody></table>
 </div>
 [/code]

Also in #JavaScript _↴

Frame Detection..site search Individual selector within a multiple selector

Success!

Help @zebdaag spread the word by sharing this article on Twitter...

Tweet This

innerHTML / safari problem

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

innerHTML / safari problem

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴