innerHTML in javaScript for Internet Explorer - javascript

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 = '';
}

Related

XMLSerializer in IE9 compatability mode not working

I have this code:
....
jQuery(document).ready(function() {
function showResponse(responseText, statusText, xhr, $form) {
var myxml = responseText;
var serializer = new XMLSerializer();
var xmltostring = serializer.serializeToString(myxml);
It works fine in all browsers except IE9 when IE9 is in compatability mode. For reasons we won't go into the client needs to run IE9 in compatability mode so I am trying to find a solution.
The error that is reported is:
'XMLSerializer' is undefined
Does anybody know a way to deal with this? Is there another way to convert the DOM document/object into text like XMLSerializer does?
Thanks.
Since compatibility mode could be emulating IE8 and down behavior it won't work. XMLSerializer works in IE9 and up (standards mode). Another method to turn a DOM object into a string is to use outerHTML.
Example DOM:
var div = document.createElement('div');
div.innerHTML = '<p>testing 123</p>';
Get the string representation:
div.outerHTML
//=> "<div><p>testing 123</p></div>"
Ended up doing something like this which seems to get the job done:
var xmltostring='';
if (typeof window.XMLSerializer !== 'undefined') {
var serializer = new XMLSerializer();
xmltostring = serializer.serializeToString(myxml);
} else {
if(window.ActiveXObject){
xmltostring = myxml.xml;
}
}

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.

Browser compatibility error

I create one web page (which display details in table) using html & js. Which works on firefox but not in IE.
function frontEnd()
{
try{
th1 = document.getElementById('th1');
th1.firstChild.nodeValue = "Technology";
th2 = document.getElementById('th2');
th2.firstChild.nodeValue = "Level of knowledge";
t1 = document.getElementById('t1');
t1.firstChild.nodeValue = "HTML";
tl1 = document.getElementById('tl1');
tl1.firstChild.nodeValue = "5";
document.getElementById('MyTab').style.visibility="visible";
}
catch(e)
{
alert(e);
}
}
th1 is an id of table heading, t1,tl1 are data id. Actually am trying to display static values in table when user clicks button. It works sucessfully in firefox, not in IE. When click button using IE it reflects an error "[Object Error]"
Please tel me how to made the same code to work in IE.
Thanks,
Naveen
Why don't you use JQuery or Prototype JavaScript library , they are cross browser compatible.
Jquery
http://api.jquery.com/first-child-selector/

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);

How can I detect if Flash is installed and if not, display a hidden div that informs the user?

How can I use javascript/jQuery/etc to detect if Flash is installed and if it isn't, display a div that contains information informing the user that they need to install flash?
If swfobject won't suffice, or you need to create something a little more bespoke, try this:
var hasFlash = false;
try {
hasFlash = Boolean(new ActiveXObject('ShockwaveFlash.ShockwaveFlash'));
} catch(exception) {
hasFlash = ('undefined' != typeof navigator.mimeTypes['application/x-shockwave-flash']);
}
It works with 7 and 8.
#Drewid's answer didn't work in my Firefox 25 if the flash plugin is just disabled but installed.
#invertedSpear's comment in that answer worked in firefox but not in any IE version.
So combined both their code and got this. Tested in Google Chrome 31, Firefox 25, IE 8-10. Thanks Drewid and invertedSpear :)
var hasFlash = false;
try {
var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if (fo) {
hasFlash = true;
}
} catch (e) {
if (navigator.mimeTypes
&& navigator.mimeTypes['application/x-shockwave-flash'] != undefined
&& navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
hasFlash = true;
}
}
Use swfobject. it replaces a div with the flash if it is installed.
see: http://code.google.com/p/swfobject/
You can use navigator.mimeTypes.
if (navigator.mimeTypes ["application/x-shockwave-flash"] == undefined)
$("#someDiv").show ();
jqplugin: http://code.google.com/p/jqplugin/
$.browser.flash == true
You should also be able to use..
swfobject.getFlashPlayerVersion().major === 0
with the swfobject-Plugin.
I used Adobe's detection kit, originally suggested by justpassinby. Their system is nice because it detects the version number and compares it for you against your 'required version'
One bad thing is it does an alert showing the detected version of flash, which isn't very user friendly. All of a sudden a box pops up with some seemingly random numbers.
Some modifications you might want to consider:
remove the alert
change it so it returns an object (or array)
--- first element is boolean true/false for "was the required version found on user's machine"
--- second element is the actual version number found on user's machine
Very very minified version of http://www.featureblend.com/javascript-flash-detection-library.html (only boolean flash detection)
var isFlashInstalled = (function(){
var b=new function(){var n=this;n.c=!1;var a="ShockwaveFlash.ShockwaveFlash",r=[{name:a+".7",version:function(n){return e(n)}},{name:a+".6",version:function(n){var a="6,0,21";try{n.AllowScriptAccess="always",a=e(n)}catch(r){}return a}},{name:a,version:function(n){return e(n)}}],e=function(n){var a=-1;try{a=n.GetVariable("$version")}catch(r){}return a},i=function(n){var a=-1;try{a=new ActiveXObject(n)}catch(r){a={activeXError:!0}}return a};n.b=function(){if(navigator.plugins&&navigator.plugins.length>0){var a="application/x-shockwave-flash",e=navigator.mimeTypes;e&&e[a]&&e[a].enabledPlugin&&e[a].enabledPlugin.description&&(n.c=!0)}else if(-1==navigator.appVersion.indexOf("Mac")&&window.execScript)for(var t=-1,c=0;c<r.length&&-1==t;c++){var o=i(r[c].name);o.activeXError||(n.c=!0)}}()};
return b.c;
})();
if(isFlashInstalled){
// Do something with flash
}else{
// Don't use flash
}

Categories

Resources