CAS-IT
asked on
Recursive use of replaceWith behaving differently on IE9.0.8112.16421 than FireFox 7.0.1
We've got a function that we point at a specific element, and it recurses through every child-element, with the intent of removing the tags which do not match our 'approved tag' list. approved tags are passed in as an argument of type array of string.
In Firefox, it works perfectly.
In IE, it does not fail, but it drops out a lot of the content once it hits the first span.
Specific function is here...
Downloadable HTML file you can run to test the function out here...
cleanHTML3-EE.html
HTML Source of our test page is here...
In Firefox, it works perfectly.
In IE, it does not fail, but it drops out a lot of the content once it hits the first span.
Specific function is here...
function cleanHTML (theObject,allowedTags){
for (i=$(theObject).find('*').length-1;i>=0;i--) {
if ($.inArray($($(theObject).find('*')[i]).get()[0].tagName.toLowerCase(),allowedTags)==-1)
{ $($(theObject).find('*')[i]).replaceWith($($(theObject).find('*')[i]).html());}
}
}
Downloadable HTML file you can run to test the function out here...
cleanHTML3-EE.html
HTML Source of our test page is here...
<!DOCTYPE html>
<html>
<head>
<title>cleanHTML Test v3.0 - Modified 11/3/2011</title>
<meta charset="utf-8">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
function cleanHTML (theObject,allowedTags){
for (i=$(theObject).find('*').length-1;i>=0;i--) {
if ($.inArray($($(theObject).find('*')[i]).get()[0].tagName.toLowerCase(),allowedTags)==-1)
{ $($(theObject).find('*')[i]).replaceWith($($(theObject).find('*')[i]).html());}
}
}
</script>
<div ID="testcontainer">
<div style="border:1px solid blue;" class="slJobDuties">
<div style = "border:1px solid red;" class="ExternalClass936C2C07EC22467780317A758292E763">
<div style="url:'http://www.udel.edu'">
<p StYle='font-weight:bold;'>
Text <a href=".">Outside</a> <i>Spans</i>
<span class="bob">
Test Inside one span, outside of others
<span style="border:1px solid black;">
<span style="border:1px solid orange;" class="bob">
<span class="bob" style="border:1px solid orange;">
College <i><a href=".">Accounting</a></i> <span><b>Style</b></span>
<br />
More stuff
</span>
</span>
</span>
</p>
</div>
</div>
</div>
</div>
<script>
console.log($("#testcontainer").html()); //Handy Debugging line - show me the HTML before I do stuff
cleanHTML($("#testcontainer"),["a","br","p"]);
console.log($("#testcontainer").html()); //Handy Debugging line - show me the HTML AFTER I do stuff
</script>
</body>
</html>
ASKER
output in IE9
LOG: <DIV style="BORDER-BOTTOM: blue 1px solid; BORDER-LEFT: blue 1px solid; BORDER-TOP: blue 1px solid; BORDER-RIGHT: blue 1px solid" class=slJobDuties>
<DIV style="BORDER-BOTTOM: red 1px solid; BORDER-LEFT: red 1px solid; BORDER-TOP: red 1px solid; BORDER-RIGHT: red 1px solid" class=ExternalClass936C2C07EC22467780317A758292E763>
<DIV style="url: 'http://www.udel.edu'">
<P style="FONT-WEIGHT: bold">Text <A href=".">Outside</A> <I>Spans</I> <SPAN class=bob>Test Inside one span, outside of others <SPAN style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid"><SPAN style="BORDER-BOTTOM: orange 1px solid; BORDER-LEFT: orange 1px solid; BORDER-TOP: orange 1px solid; BORDER-RIGHT: orange 1px solid" class=bob><SPAN style="BORDER-BOTTOM: orange 1px solid; BORDER-LEFT: orange 1px solid; BORDER-TOP: orange 1px solid; BORDER-RIGHT: orange 1px solid" class=bob>College <I><A href=".">Accounting</A></I> <SPAN><B>Style</B></SPAN> <BR>More stuff </SPAN></SPAN></SPAN></P></DIV></DIV></DIV>
LOG: <P style="FONT-WEIGHT: bold">Text <A href="file://files-001.art-sci.udel.edu/users-001/cita/home/cantrell/Documents/Code/">Outside</A> Spans </P>
ASKER
IE seems to be caching something ...
Renamed my file without changing any code and it's resolving fine now ...
/sigh
Renamed my file without changing any code and it's resolving fine now ...
/sigh
that would make sense given the output i got...
you could try adding these meta tags to make the page expire?
<meta name="Expires" content="Sun, 04 Dec 2011 00:00:00 America/New_York" />
<meta http-equiv="last-modified" content="2011-10-04@00:00: 00 America/New_York" />
you could try adding these meta tags to make the page expire?
<meta name="Expires" content="Sun, 04 Dec 2011 00:00:00 America/New_York" />
<meta http-equiv="last-modified"
ASKER
I'll give that a shot on Monday, thanks :)
ASKER
No luck. Attaching current file.
cleanHTML3-EE.html
Error occurs when removing spans, still IE only.
cleanHTML3-EE.html
Error occurs when removing spans, still IE only.
I'm using the same version as you but mine works and yours doesn't correct?
can you post the output from the console from this page:
http://jsfiddle.net/rjurd/JvWX7/embedded/result/
can you post the output from the console from this page:
http://jsfiddle.net/rjurd/JvWX7/embedded/result/
ASKER
Looks good to me
LOG:
<div style="border: 1px solid blue;" class="slJobDuties">
<div style="border: 1px solid red;" class="ExternalClass936C2C07EC22467780317A758292E763">
<div style='url: "http://www.udel.edu";'>
<p style="font-weight: bold;">
Text <a href=".">Outside</a> <i>Spans</i>
<span class="bob">
Test Inside one span, outside of others
<span style="border: 1px solid black;">
<span style="border: 1px solid orange;" class="bob">
<span style="border: 1px solid orange;" class="bob">
College <i><a href=".">Accounting</a></i> <span><b>Style</b></span>
<br>
More stuff
</span>
</span>
</span>
</span>
</p>
</div>
</div>
</div>
LOG:
<p style="font-weight: bold;">
Text <a href=".">Outside</a> Spans
Test Inside one span, outside of others
College <a href=".">Accounting</a> Style
<br>
More stuff
</p>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
output in IE9
Open in new window