Develop Reference

IE9 sees XML nodes at different indexes than other browsers

Here is a snippet from my attempt at cross-browser functionality:
xmlhttp.open("GET", "/wp-content/testimonials.xml", true);
if (xmlhttp.addEventListener) {
xmlhttp.addEventListener("load", retrieveTestimonial, false);
}
else if (xmlhttp.attachEvent) {
xmlhttp.attachEvent("onload", retrieveTestimonial);
}
xmlhttp.send();
function retrieveTestimonial () {
xmlDoc = xmlhttp.responseXML;
//Get DOM elements ready to be replaced by relevant testimonial info
var testimonial = document.getElementById("foot-testimonial");
var xmlTags = xmlDoc.getElementsByTagName("PROGRAM");
... more
The reason I included this particular block of code is because my script renders just fine in Chrome, Firefox, IE11, Safari, and even the stock Android browser. However, in IE9 I'm getting undefined for some variables that are set in the retrieveTestimonial function. If I try to log any of those variables (xmlTags, etc.) out to the console in IE9 I get 'is undefined'. So, from what I can tell, the function is not being called which suggests to me that the XHR load event is not firing.
EDIT: The function is firing, as I am able to log the variable xmlDoc to the console (object). For some reason, IE9 does not like some of my XML assignments because they are returning undefined. Here is the rest of the function:
for(var i = 0; i < xmlTags.length; i++) {
//If the program name from the URL matches the <WEBTITLE> value
if (progName == xmlTags[i].childNodes[1].childNodes[0].nodeValue) {
// Get each relevant piece of info from the XML file
var progTitle = xmlTags[i].childNodes[3].childNodes[0].nodeValue;
var studentName = xmlTags[i].childNodes[5].childNodes[0].nodeValue;
var textBody = xmlTags[i].childNodes[7].childNodes[0].nodeValue;
break;
}
IE9 does not seem to like seeing nodes at the same index as other browsers, though I haven't a clue as to why.
Is there a known workaround for this or am I just missing something simple? I'd hate to rewrite the script in jQuery, for instance, considering it's working like a charm everywhere else.

IE 10 + jQuery - Not able to use "append" function

I am running an HTML 5 application using the KendoUI framework. Once of the screens deal with XML data that needs to be parsed and processed.
This screen needs to be shown as a popup and that data is shown in a grid inside this popup. To do this, I am calling a function on clicking the "show-popup" button inside which I have the following piece of code :
var tTranslationXML = XMLFromString(_SelectedCategoryValueRecord.DisplayTextTranslation);
.
.
.
// other stuff but nothing that changes "tTranslationXML"
.
.
if (_SelectedCategoryValueRecord.DisplayTextTranslation) // and there are values in the translation field
{
var $language = $(tTranslationXML).find('Language');
var $oldTranslation = $($language).find("en-US");
if ($oldTranslation.length == 0)
$oldTranslation = $($language).find(GetCorrectedCase("en-US"));
if ($oldTranslation.length == 0) {
var $newTranslation = $.createElementNS("en-US").text(_UpdatedDisplayText);
$language.append($newTranslation);
}
}
And if you are wondering what "XMLFromString" is, its nothing but a simple helper to parse the XML data from a string variable
function XMLFromString(pXMLString)
{
if (!pXMLString)
pXMLString = "<Language></Language>";
if (window.ActiveXObject) {
var oXML = new ActiveXObject("Microsoft.XMLDOM");
oXML.loadXML(pXMLString);
return oXML;
} else {
return (new DOMParser()).parseFromString(pXMLString, "text/xml");
}
}
My issue is that this works fine on Chrome and Firefox but I get an error in IE10 when this particular line executes -
"$language.append($newTranslation);"
I am basically trying to append a new translation value to the contents of my variable here.
The error is as follows :
SCRIPT13: Type mismatch
jquery-1.8.3.min.js, line 2 character 71981
Any ideas on how to solve this?

Sorry for the delayed response.
I figured out that the issue was to avoid using the method "createElementNS" and instead use the "createElement" method when creating the parent node. Subsequent appendages to this node do not throw up any issues. However there will issues when you append to a node that was originally created using "createElementNS".
This seems specific to IE10 because the NS method worked fine on chrome, FF and Safari.
Thank you all for the tips and ideas.

How do I get HTML Markup for createRange() in Firefox

I am currently using code similar to this:
try {
// IE ONLY
var theElement = "myElementName";
window.frames[theElement].focus();
var selection = window.frames[theElement].document.selection.createRange();
alert ( selection.htmlText );
} catch(e) {
var selection = window.frames[theElement].document.getSelection();
alert ( selection );
}
As you can see, I am accessing a node from an iframe (no fun already). I am definitely in new territory here, so am sure there are more issues to arise, but right now, I am trying to get Firefox to give me the same result as IE.
In IE, I can access the HTML code of the selection by using the (apparently IE-only) htmlText property of the object returned by createRange(). What I am looking for is the Firefox equivalent to that (or a function that I can use to give me the same result).
Anyone know how to do this?

This works in Firefox 2 and later (untested in earlier versions):
var selection = window.frames[theElement].getSelection();
var range = selection.getRangeAt(0);
var div = document.createElement("div");
div.appendChild(range.cloneContents());
alert(div.innerHTML);

Javascript doesn't work in IE8

I am trying to create this html elements dynamically on the onload of my page,however;when I run it the code wont work on IE8 but okay in firefox,safari,and others.
function getmovie() {
var container = document.getElementById("container");
if (!container)
return;
var object = document.createElement("object");
object.setAttribute("width", "512");
object.setAttribute("height", "296");
var param1 = document.createElement("param");
param1.setAttribute("name", "movie");
param1.setAttribute("value", "url");
var param2 = document.createElement("param");
param2.setAttribute("name", "allowFullScreen");
param2.setAttribute("value", "true");
var embed = document.createElement("embed");
embed.setAttribute("src", "my url");
embed.setAttribute("type", "application/x-shockwave-flash");
embed.setAttribute("allowFullScreen", "true");
embed.setAttribute("width", "512");
embed.setAttribute("height", "296");
object.appendChild(param1);
object.appendChild(param2);
object.appendChild(embed);
container.appendChild(object);
}
Can anyone correct my code?

Unless you have a really good reason to build your Flash including DOM elements manually, consider replacing the code with a single call to a framework like SWFObject that does all the "dirty work" for you.
swfobject.embedSWF("flashmovie.swf", "container", "512", "296", "9.0.0",
"expressInstall.swf", { allowFullScreen : true });

You can't set the name attribute of ANY element in IE by using .setAttribute('name', value);
You will need to use:
param1.name = 'movie';//works
param1.setAttribute("name", "movie");//will fail
Note: this bug was fixed in IE8 (as long as you are running in IE8 Standards Mode)

Could this be the reason?
IE7 breaks getElementById
If that is not the case, try setting the codebase and classid attributes of the object tag
object.
object.setAttribute("codebase", "http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab");
object.setAttribute("classid", "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000");

innerHTML in javaScript for Internet Explorer

I have used innerHtml in my java based web application. JavaScript works fine with Mozilla Firefox but it is not working in InternetExplorer.
Could you please tell me how to make it work in Internet Explorer too. or what is substitute of innerHTML in IE.
Code is:
function show() {
if('number' == typeof this.rowIndex) {
var rn = this.rowIndex;
var cell = tableRows[rn].cells;
employeeCode = cell[0].innerHTML;
//..........
}
}
Thank and regards

Using jQuery eliminates problems like this in nearly all cases. It handles the minor differences between major browsers so you can do simple things like:
$("div.summary").html(); /* Gets HTML from <div class="summary"> */
$("div.summary").html("Hello"); /* Sets the HTML */

innerHTML, to be cross-browser, needs something like this :
<script type="text/javascript">
function show (where,what) {
var ie = document.all; // Internet Explorer
var ns = document.getElementById && !document.all; // Firefox, Netscape, other browsers
if(ie) {
eval("document.all."+where).innerHTML = what; }
else if(ns) {
document.getElementById(where).innerHTML = what; }
}
</script>
try
<div id="display"></div>
As I found in http://usenet.manifestinteractive.com/manifestElementControl.html?/usenet/manifestElementControl.html

Try innerText in place of innerHTML.

You first need to check if the browser is using internet explorer then get the version. after you have the browsers version you can use an if statement to tell it to use InnerText for IE and InnerHTML for the rest of the browsers.
InnerText is the alternate way of InnerHTML for Internet Explorer. Hope this helps.
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
var ieversion = new Number(RegExp.$1) // capture x.x portion and store as a number
}
//detect if IE version is greater than 1 then deletes row content
if (ieversion>=1) {
row.innerText = '';
} else {
row.innerHTML = '';
}