This is a GOOD ONE

Different Strings from different browsers

[supermanjace]

Check this out. Basically what I have done is I have set up links so that when you click them, they return the innerHTML of that anchor. Then, I take a line in an XML code and match it to that innerHTML to then populate a div.

Problem is, IE and FF return different values for the same inner HTML. Where FF might return:
<span class="brand">stone</span> <span class="beername">ipa with centennial and chinook hops</span>

IE returns: <SPAN class=brand>stone</SPAN> <SPAN class="beername">ipa with centennial and chinook hops</SPAN>

So you see, depending on the browser, I get a different innerHTML, and since this is the comparison, against my XML, it is hard to make a variable of this innerHTML that tests equally against IE and against FF. Any ideas what I can do? Can I specify a different test for different browsers?

here is my script. Keep in mind I set this up to test for FF, but it doesn't work for IE because of the problem above.

Can I just say...UGGHHHH!

<script type="text/javascript">
function createRequestObject() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
return xmlHttp;
}
var http = createRequestObject();
function sndReq() {
var that = this; // The link that triggered this event
// The callback function for the http request
http.open('get', 'beerdescriptions.xml', true)

http.onreadystatechange = function () {
var found = 0

if (http.readyState == 4) {
// that refers to the link
var test = that.innerHTML
alert(test);

var response = http.responseXML.documentElement
var set = response.getElementsByTagName("SET")

beerslicestart = test.lastIndexOf('span') -2;
beersliceend = test.lastIndexOf('beername') + 10;
beerslice = test.substring(beersliceend,beerslicestart);
brewersliceend = test.lastIndexOf('beername') - 21;
brewerslicestart = test.lastIndexOf('brand') + 7;
brewerslice = test.substring(brewersliceend,brewerslicestart) + " ";
fullname = brewerslice.concat(beerslice);

for (i=0;i<set.length;i++){

testset = set[i].getElementsByTagName("COMPARISON")
comparison = testset[0].firstChild.data

if (fullname == comparison){

var beer = set[i].getElementsByTagName("BEER")
var brewer = set[i].getElementsByTagName("BREWER")
var description = set[i].getElementsByTagName("DESCRIPTION")
var image = set[i].getElementsByTagName("IMAGE")
var abv = set[i].getElementsByTagName("ABV")
var location = set[i].getElementsByTagName("LOCATION")
var website = set[i].getElementsByTagName("WEBSITE")
var style = set[i].getElementsByTagName("STYLE")


document.getElementById("craftbeer").innerHTML= "<a href="+website[0].firstChild.data+" class='brewerlink' rel='external'>"+brewer[0].firstChild.data+"</a>"+"<br />"
document.getElementById("beerinfo").innerHTML= description[0].firstChild.data
document.getElementById("beername").innerHTML= beer[0].firstChild.data
document.getElementById("beerimage").innerHTML= "<img src="+image[0].firstChild.data+" class='beerimage' alt="+beer[0].firstChild.data+" />"
document.getElementById("source").innerHTML= ""
document.getElementById("style").innerHTML= "Style: "+style[0].firstChild.data
document.getElementById("abv").innerHTML= "ABV: "+abv[0].firstChild.data
document.getElementById("location").innerHTML= "Point of Origin: "+location[0].firstChild.data

found = 1

}

}


}
}

http.send(null);
}
// When the window loads, attach the event handlers to the links
// but only if AJAX is working
if (http) {
window.onload = function () {
var i, els = document.getElementsByTagName('a');
// Loop through all the links
for (i = els.length; i > 0; i--) {
// Attach the onclick handler to each link
els[i-1].onclick = sndReq;
}
}
}
</script>

[birdbrain]

Hi there supermanjace,

try it like this...

[blue]
var test = that.innerHTML[red].toLowerCase()[/red]; 
[/blue]

birdbrain

[astupidname]

First, I think that your usage of getElementsByTagName is wrong, as there are no html tags in the html language called "COMPARISON", "BEER", "BREWER", etc... I think what you really want there is getElementsByName.
Now, without testing or delving in to your code much more, as for the problem with IE and FF returning different innerHTML, one workaround for that would be, when comparing the innerHTML of the element to another string, is to convert toLowerCase() and replace() double quote marks ("). For example here is a test case that works in both IE and FF:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script type="text/javascript">
/*<![CDATA[*/ /*** for valid xhtml ***/
window.onload = function(){
/*** convert the innerHTML of var a to lower case and replace all (the ' g ' means global [all] within the string) double quotes with nothing ***/
var a = document.getElementById("test").innerHTML.toLowerCase().replace(/"/g,"");
alert(a);
/*** var b is the string to be compared to ***/
var b = '<span class="brand">stone</span><span class="beername">ipa with centennial and chinook hops</span>';
b = b.toLowerCase().replace(/"/g,""); /*** do to var b what we did to var a ***/
if (a === b){alert("they match");}
else {alert("no match");}
}
/*]]>*/
</script>
</head>
<body>
<p id="test"><span class="brand">stone</span><span class="beername">ipa with centennial and chinook hops</span></p>
</body>
</html>

[astupidname]

Oh, and uhh...

Can I just say...UGGHHHH!

Of course you can! We all do (frequently)! :)