indexOf() not working in IE 7 2

tas2826 · Jan 27, 2009

I have a script that processes the innerHTML from a div on a page. The innerHTML contains tags. Basically I need to remove certain substrings from the innerHTML of the div and also its cooresponding . I am using some exist js for the removal and with the modifications I have made it works and also cleans up the tailing in Firefox, but not in IE7. Here is an example.

Code:

innerHTML = dog<BR>cat<BR>horse<BR>bear<BR>

after the script removes "horse" it looks like this.

Code:

innerHTML = dog<BR>cat<BR><BR>bear<BR>

Now I need to remove one of the tags where it is . So I do this.

Code:

var newTxtStr = myDiv.innerHTML;
var retIdx = newTxtStr.indexOf("<br><br>");
	
if(retIdx != 0 && retIdx != -1)
{
    newTxtStr= newTxtStr.substring(0, retIdx) + newTxtStr.substring(retIdx+4, newTxtStr.length);
}

This works fine in Firefox, meaning it finds the index correctly for retIdx above. However, in IE it returns a -1, never finds it.

I tried the suggestion from this site for indexOf, but still no luck.

Any suggestions on how to get around this? I know I could probably take a whole different approach, but I am looking for a way to make this way work. Or, if there is just no way for it to work this way, let me know. Basically it comes to it has to work in IE and Firefox.

Thanks in advance for the help and advice.

Troy

LarrySteele · Jan 27, 2009

In IE, indexOf() is case sensitive. Your indexOf() function was looking for " " and your innerHTML contained " ".

HTH,
Larry

Kirsle · Jan 27, 2009

Hi Troy,

In Firefox, the DOM is "rewritten" by the browser. Here you set your innerHTML to use tags with a capital "BR" inside them, and Firefox rewrites these to be lowercase 's. Thus your indexOf(" ") works, because you entered in lowercase 's, which is what Firefox has internally.

On Internet Explorer, it keeps the DOM literally how you told it to, so the 's there are in all caps.

Here's some code I wrote to demonstrate:

Code:

<body onLoad="doTest()">

<div id="tester"></div>

</body>
<script>
function doTest() {
	window.alert("Testing");
	var div = document.getElementById("tester");

	div.innerHTML = "dog<BR>cat<BR>horse<BR>bear<BR>";
	window.alert("start: " + div.innerHTML);

	// remove horse
	div.innerHTML = div.innerHTML.replace("horse","");
	window.alert("removed: " + div.innerHTML);

	// remove extra <br>'s
	var i = div.innerHTML.indexOf("<br><br>");
	while (i > -1) {
		window.alert("index: " + i);
		div.innerHTML = div.innerHTML.replace("<br><br>","");
		i = div.innerHTML.indexOf("<br><br>");
	}

	// done
	window.alert("done: " + div.innerHTML);
}
</script>

On Firefox I get popups saying:

Code:

Testing
start: dog<br>cat<br>horse<br>bear<br>
remove: dog<br>cat<br><br>bear<br>
index: 10
done: dog<br>catbear<br>

On Internet Explorer 7:

Code:

Testing
start: dog<BR>cat<BR>horse<BR>bear<BR>
remove: dog<BR>cat<BR><BR>bear<BR>
done: dog<BR>cat<BR><BR>bear<BR>

You'll need to A) do case-insensitive operations so that and are treated the same, or B) always use lowercase HTML tags. It's standards-compliant that tags be lowercased anyway, is bad practice, is good. If you set your innerHTML = " ", the Firefox will see it as " " and Internet Explorer will see it as " ".

Firefox is a standards-compliant browser so it knows that is better written , but Internet Explorer doesn't like to follow the standards and happily accepts your in all caps and doesn't care. But the standards call for lowercase always.

Cuvou.com | My personal homepage

Code:

perl -e '$|=$i=1;print" oo\n<|>\n_|_";x:sleep$|;print"\b",$i++%2?"/":"_";goto x;'

tas2826 · Jan 27, 2009

Larry and Kirsle, thanks for the suggestions. I did not notice the case issue. I went through and made sure the case was lowercase and still no luck in IE, continues to work fine in Firefox.

Here is the html and js file that I am using. What I am seeing is that in IE the is getting converted to . If you notice the alerts (colored red below) in removeCmtFromOText() function in the js file, I tried using replace and still no luck. Anyway, here are the files, maybe I am just suffering from blindness from staring at this too long. Sorry it's not too pretty, it is just a proof of concept to be used in a larger project. to use it, just change the controls on the html page and then returning them to their original values will invoke the removal logic.

html file

Code:

<html>

   <head>
         
      <script type="text/javascript" src='./test.js'></script>    
      
   </head>

   <body onload="keepOrig();">
      <form name="processForm" action="" method="POST">
         <input type="hidden" id="originalfname" name="original">
         <input type="hidden" id="originalradio1" name="original">
         <input type="hidden" id="originalradio2" name="original">
         <input type="hidden" id="originalcheckbox" name="original">
         <input type="hidden" id="originalselect" name="original">

         <table border="1" cellspacing="2" cellpadding="5">
         	<tr>
         		<td>         		
         			<input name="fname" type="text" value="default" actionreason="Value is changed for: fname." id="fname" size="20" maxlength="20" onchange="javascript:checkForChange(this.id);">
         		</td>
         	</tr>         	
         	<tr>
         		<td>
         			radio group<input type="radio" id="radio1" actionreason="Value is changed for: radiogroup." name="radio1" value="radio1" checked onClick="javascript:handleRadios(this.id); javascript:checkForChange(this.id);">
         			<input type="radio" id="radio2" actionreason="Value is changed for: radiogroup." name="radio2" value="radio2" onClick="javascript:handleRadios(this.id); javascript:checkForChange(this.id);">
            	</td>
            </tr>
            <tr>
         		<td>
         			checkbox<input type="checkbox" id="checkbox" actionreason="Value is changed for: checkbox." name="checkbox" value="N" onClick="javascript:checkForChange(this.id);">
            	</td>
            </tr>
            <tr>
            	<td>
            		<select id="selection" name="selection" onchange="javascript:checkForChange(this.id);" actionreason="Value is changed for: selection.">
 	 					<option value="option1">option1</option>
  						<option value="option2">option2</option>  
  						<option value="option3">option3</option>  
					</select>
				</td>
            </tr>

         	<tr>
            	<td>                  			
         			<div name="comment" id="comment" style="background:silver;height:3em;width:25em;padding:0.5em;margin: 0.5em;border:1px solid black;overflow:auto;"></div>
         		</td>
         	</tr>         	
         </table>
      </form>
   </body>
   
</html>

js file

Code:

<!--
var originalTextVal = '';
var originalRadio1Val = '';
var originalRadio2Val = '';
var originalCheckboxVal = '';
var originalSelectVal = '';
var changeMessage = '';

function checkForChange(objId)
{
	var obj = document.getElementById(objId);
	var currentVal = '';
	var foundIt = false;
	
	if(obj.type=="text" || obj.type=="select-one")
	{
		currentVal = obj.value;
		foundIt = true;
	}
	if(obj.type=="radio" || obj.type=="checkbox")
	{		
		currentVal = obj.checked;
		foundIt = true;
	}
	
	if(foundIt)
	{
		var originalVal = '';
		var oTextArea = document.getElementById("comment");
		var currText = oTextArea.innerHTML;
		var actionReason = obj.getAttribute("actionreason");
	   	
		if(obj.id == "fname"){
			originalVal = originalTextVal; }
		if(obj.id == "radio1"){
			originalVal = originalRadio1Val; }
		if(obj.id == "radio2"){
			originalVal = originalRadio2Val; }
		if(obj.id == "checkbox"){
			originalVal = originalCheckboxVal; }
		if(obj.id == "selection"){
			originalVal = originalSelectVal; }
		
	   	if(originalVal == currentVal)
   		{
	   		//so search for possibleActionReasons, if there, remove.	   		
	   		oTextArea.innerHTML = removeCmtFromOText(oTextArea.innerHTML, actionReason);   	   	  
   		}
   		else
   		{
	   		//put on the needed action/reason.	   
	   		if(oTextArea.innerHTML == null || oTextArea.innerHTML.indexOf(actionReason) == -1)
	   		{
	      		oTextArea.innerHTML += actionReason + "<br>";
 			}
   		}   		
	}
}


function keepOrig()
{	
   	originalTextVal = document.getElementById("fname").value;
   	document.getElementById("originalfname").value = originalTextVal;
   	
   	originalRadio1Val = document.getElementById("radio1").checked;
   	document.getElementById("originalradio1").value = originalRadio1Val;
   	
   	originalRadio2Val = document.getElementById("radio2").checked;
   	document.getElementById("originalradio2").value = originalRadio2Val;
   	
   	originalCheckboxVal = document.getElementById("checkbox").checked;
   	document.getElementById("originalcheckbox").value = originalCheckboxVal;
   	
   	originalSelectVal = document.getElementById("selection").value;
   	document.getElementById("originalselect").value = originalSelectVal;
}


function removeCmtFromOText(otxt, cmtString)
{
	if(otxt == null || cmtString == null)
	{
		return '';
	}
	
	var locOfCmt = otxt.indexOf(cmtString)
	var newOtxtStr = '';
	
	if(locOfCmt >  -1)
	{
		var newOtxtArray = otxt.split(cmtString);
		for(i=0; i<newOtxtArray.length; i++)
		{
			newOtxtStr = newOtxtStr + newOtxtArray[i];
		}
	}
	else
	{
		newOtxtStr = otxt;
	}
	
	if(newOtxtStr.indexOf('  ') == 0)  //remove spaces at the end of string
	{
		newOtxtStr = newOtxtStr.substring(2, newOtxtStr.length);
	}
	if(newOtxtStr.indexOf('<br>') == 0)  //remove spaces at the end of string
	{
		newOtxtStr = newOtxtStr.substring(4);
	}
	if(newOtxtStr.indexOf('<br>') == newOtxtStr.length - 4)
	{
		newOtxtStr = newOtxtStr.substring(0, (newOtxtStr.length - 4) );
	}
[COLOR=red][b]
	var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
	var retIdx = '';
	if(isIE)
	{
		alert("before replace: " + newOtxtStr);
		newOtxtStr.replace(/<BR>/, "<br>");
		alert("after replace: " + newOtxtStr);
	    retIdx = newOtxtStr.indexOf("<br><br>");
	    alert("return Index: " + retIdx);
	}
	else
	{
		retIdx = newOtxtStr.indexOf("<br><br>");
	}
	
	
	if(retIdx != 0 && retIdx != -1)
	{
		newOtxtStr = newOtxtStr.substring(0, retIdx) + newOtxtStr.substring(retIdx+4, newOtxtStr.length);		
	}
[/b][/color]
	alert("return value: " + newOtxtStr);
	return newOtxtStr;
}


function handleRadios(objId)
{
	var clickedRadio = document.getElementById(objId);
	
	var radio1 = document.getElementById("radio1");
	var radio2 = document.getElementById("radio2");
	
	if(clickedRadio.id == radio1.id)
	{
		radio2.checked = false;
	}
	else
	{
		radio1.checked = false;
	}
}
//-->

tas2826 · Jan 27, 2009

One other note on the following line. I tried it the following way also and still no luck.

newOtxtStr.replace(/BR/, "br");

BTW, what do you use to debug js in IE? I do not have a Visual Studio install available. I have also tinkered with Companion.js and Firebug Lite but cannot get any breakpoints to work, although I think you have to get the full commercial product for the Companion.js.

tas2826 · Jan 27, 2009

Ok, got the replace to work. I guess I was expecting js to behave more like java. The line:

newOtxtStr.replace(/BR/, "br");

neede to be

newOtxtStr = newOtxtStr.replace(/ /g, " ");

and then it worked and now it works in IE.

Thanks for the help.

Troy

BillyRayPreachersSon · Jan 27, 2009

LarrySteele said:
In IE, indexOf() is case sensitive.

Just to avoid confusion, it should be pointed out that indexOf is case-sensitive an ALL browsers, not just IE.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

indexOf() not working in IE 7 2

tas2826

Programmer

LarrySteele

Programmer

Kirsle

Programmer

tas2826

Programmer

tas2826

Programmer

tas2826

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor