Link to home
Start Free TrialLog in
Avatar of alainbryden
alainbrydenFlag for Canada

asked on

JavaScript works in IE but not in Firefox - XML DOM objects

Script is working in IE but not in firefox.

Hey everyone. I'm having trouble figuring out how to make this script work in both IE and firefox. The javascript can be viewed here: http://ride.dsu.dal.ca/test2.html

and the script is the following:
<script type="text/javascript">
   <!--
function getXMLhttp() {
      var C=null;
      try{
            C=new ActiveXObject("Msxml2.XMLHTTP");
      }catch(e){
            try{
                  C=new ActiveXObject("Microsoft.XMLHTTP");
            }catch(sc){
                  C=null;
            }
      }
      if(!C&&typeof XMLHttpRequest!="undefined"){
            C=new XMLHttpRequest();
      }
      return C;
}
request = getXMLhttp();
if (request) {
      request.open("GET", "xml", true);
      request.onreadystatechange = function() {
         if (request.readyState == 4 && request.status == 200) {
            var xmlDoc = request.responseXML;

   var city = xmlDoc.getElementsByTagName("city");
   var unemployment = parseInt(city[0].getElementsByTagName("unemployment")[0].text);
   var transport = parseInt(city[0].getElementsByTagName("transport")[0].text);
   var criminality = parseInt(city[0].getElementsByTagName("criminality")[0].text);
   var pollution = parseInt(city[0].getElementsByTagName("pollution")[0].text);

   document.write("" + unemployment + " Unemployment<br>" + transport + " Transport<br>" + criminality + " Criminality<br>" + pollution + " Pollution");

   if (unemployment + (100 - transport) + criminality + pollution == 0)
   {
      document.write("<br><br><br>Population needs Attention!<br>");
      document.location.href = "http://synthlight.miniville.fr/";
   }
   else if( (100 - transport) >= unemployment && (100 - transport) >= criminality && (100 - transport) >= pollution )
   {
      document.write("<br><br><br>Transport needs Attention!<br>");
      document.location.href = "http://synthlight.miniville.fr/tra";
   }
   else if( unemployment >= criminality && unemployment >= pollution )
   {
      document.write("<br><br><br>Commerce (for unemployment) needs Attention!<br>");
      document.location.href = "http://synthlight.miniville.fr/com";
   }
   else if( criminality >= pollution )
   {
      document.write("<br><br><br>Security (for crime) needs Attention!<br>");
      document.location.href = "http://synthlight.miniville.fr/sec";
   }
   else
   {
      document.write("<br><br><br>Environment (for pollution) needs Attention!<br>");
      document.location.href = "http://synthlight.miniville.fr/com";
   }
         }
       };
}
request.send(null);
</script>

What I am noticing is that firefox works perfectly, the XML values are extracted, displayed, and the if statements work properly, but in firefox, something goes wrong, all the values are parsed as 'NAN' and the if statement defaults to the else case.

How can I make this script work in both browsers? I thought that the commands for xmlDom objects would work the same in both browsers after I had opened it (which is done differently in each browser.)
Avatar of b0lsc0tt
b0lsc0tt
Flag of United States of America image

Let's try changing the If part.  Use this ...

      try{
            C=new ActiveXObject("Msxml2.XMLHTTP");
      }catch(e) {
            try{
                  C=new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e) {
                  try {
                  C=new XMLHttpRequest();
                }catch(e) { alert ('Not supported'); }
          }
      }
      return C;

Let me know how that works or if you have a question.

bol
Avatar of alainbryden

ASKER

that has the same effect.

I'm actually finding something new, and that's that the script sometimes causes ie to hang. I don't know why it would.
Okay, it's not hanging IE anymore, but it still doesn't work in firefox. This is the code once more - and I repeat - firefox is defaulting to the else statement, which means it is getting into the request code, which means that try catch statement is fine how it is, it is sucessfully retrieving the XML object.

The problem must be in the code somewhere in these four lines:

      var city = xmlDoc.getElementsByTagName("city");
      var unemployment = parseInt(city[0].getElementsByTagName("unemployment")[0].text);
      var transport = parseInt(city[0].getElementsByTagName("transport")[0].text);
      var criminality = parseInt(city[0].getElementsByTagName("criminality")[0].text);
      var pollution = parseInt(city[0].getElementsByTagName("pollution")[0].text);


here is the code again:
_______________________________________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
      <head>
            <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
            <title>Synthlight City</title>
      </head>
      <body>
<script type="text/javascript">
   <!--
function getXMLhttp()
{
      var C=null;
      try
      {
            C=new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch(e)
      {
            try
            {
                  C=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e)
            {
                  try
                  {
                        C=new XMLHttpRequest();
                  }
                  catch(e)
                  {
                        alert ('Not supported');
                  }
                }
      }
      return C;
}
request = getXMLhttp();
if (request)
{
      request.open("GET", "xml", true);
      request.onreadystatechange = function()
      {
            if (request.readyState == 4 && request.status == 200)
            {
                  var node;
                  var xmlDoc = request.responseXML;

                  var city = xmlDoc.getElementsByTagName("city");
                  var unemployment = parseInt(city[0].getElementsByTagName("unemployment")[0].text);
                  var transport = parseInt(city[0].getElementsByTagName("transport")[0].text);
                  var criminality = parseInt(city[0].getElementsByTagName("criminality")[0].text);
                  var pollution = parseInt(city[0].getElementsByTagName("pollution")[0].text);
                  node = document.createTextNode("" + unemployment + " Unemployment<br>" + transport + " Transport<br>" + criminality + " Criminality<br>" + pollution + " Pollution");
                  document.getElementById("p1").appendChild(node);
                  if (unemployment + (100 - transport) + criminality + pollution == 0)
                  {
                        node = document.createTextNode("<br><br><br>Population needs Attention!<br>");
                        document.getElementById("p1").appendChild(node);
                        window.location = "http://synthlight.miniville.fr/";
                  }
                  else if( (100 - transport) >= unemployment && (100 - transport) >= criminality && (100 - transport) >= pollution )
                  {
                        node = document.createTextNode("<br><br><br>Transport needs Attention!<br>");
                        document.getElementById("p1").appendChild(node);
                        window.location = "http://synthlight.miniville.fr/tra";
                  }
                  else if( unemployment >= criminality && unemployment >= pollution )
                  {
                        node = document.createTextNode("<br><br><br>Commerce (for unemployment) needs Attention!<br>");
                        document.getElementById("p1").appendChild(node);
                        window.location = "http://synthlight.miniville.fr/com";
                  }
                  else if( criminality >= pollution )
                  {
                        node = document.createTextNode("<br><br><br>Security (for crime) needs Attention!<br>");
                        document.getElementById("p1").appendChild(node);
                        window.location = "http://synthlight.miniville.fr/sec";
                  }
                  else
                  {
                        node = document.createTextNode("<br><br><br>Environment (for pollution) needs Attention!<br>");
                        document.getElementById("p1").appendChild(node);
                        window.location = "http://synthlight.miniville.fr/env";
                  }
            }
       };
}
request.send(null);
   -->
</script>

You should be redirected to synthlight city automatically. If not, click <a href="http://synthlight.miniville.fr/">here</a>.

<p ID="p1"></p>
      </body>
</html>
There was a strange error if the html didn't fully load before the script executed, so here's the code I'm using right now.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
      <head>
            <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
            <title>Synthlight City</title>
      </head>
      <body>
You should be redirected to synthlight city automatically. If not, click <a href="http://synthlight.miniville.fr/">here</a>.
<p ID="p1"></p><p ID="p2"></p>

<script type="text/javascript">
   <!--
function getXMLhttp()
{
      var C=null;
      try
      {
            C=new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch(e)
      {
            try
            {
                  C=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e)
            {
                  try
                  {
                        C=new XMLHttpRequest();
                  }
                  catch(e)
                  {
                        alert ('Not supported');
                  }
                }
      }
      return C;
}
request = getXMLhttp();
if (request)
{
      request.open("GET", "xml", true);
      request.onreadystatechange = function()
      {
            if (request.readyState == 4 && request.status == 200)
            {
                  var xmlDoc = request.responseXML;

                  var city = xmlDoc.getElementsByTagName("city");
                  var unemployment = parseInt(city[0].getElementsByTagName("unemployment")[0].text);
                  var transport = parseInt(city[0].getElementsByTagName("transport")[0].text);
                  var criminality = parseInt(city[0].getElementsByTagName("criminality")[0].text);
                  var pollution = parseInt(city[0].getElementsByTagName("pollution")[0].text);
                  document.getElementById("p1").innerHTML = ("" + unemployment + " Unemployment<br>" + transport + " Transport<br>" + criminality + " Criminality<br>" + pollution + " Pollution");
                  if (unemployment + (100 - transport) + criminality + pollution == 0)
                  {
                        document.getElementById("p2").innerHTML = ("<br><br><br>Population needs Attention!<br>");
                        window.location = "http://synthlight.miniville.fr/";
                  }
                  else if( (100 - transport) >= unemployment && (100 - transport) >= criminality && (100 - transport) >= pollution )
                  {
                        document.getElementById("p2").innerHTML = ("<br><br><br>Transport needs Attention!<br>")
                        window.location = "http://synthlight.miniville.fr/tra";
                  }
                  else if( unemployment >= criminality && unemployment >= pollution )
                  {
                        document.getElementById("p2").innerHTML = ("<br><br><br>Commerce (for unemployment) needs Attention!<br>");
                        window.location = "http://synthlight.miniville.fr/com";
                  }
                  else if( criminality >= pollution )
                  {
                        document.getElementById("p2").innerHTML = ("<br><br><br>Security (for crime) needs Attention!<br>");
                        window.location = "http://synthlight.miniville.fr/sec";
                  }
                  else
                  {
                        document.getElementById("p2").innerHTML = ("<br><br><br>Environment (for pollution) needs Attention!<br>");
                        window.location = "http://synthlight.miniville.fr/env";
                  }
            }
       };
}
request.send(null);
   -->
</script>
      </body>
</html>
Thanks for the code.  I did overlook your note about the result Firefox was giving.

Since it works in IE the problem is most likely not an error in the conditions you use.  Have you tried using an alert to see what Firefox is getting?  I notice you seem to be putting the results in "p1."  What is the result?  You mentioned NaN above but is that the result for each field or which ones?  Please clarify.

What type of form elements are unemployment, transport, criminality and transport?

If the elements are select lists then using text is the problem.  Firefox doesn't have text as part of the select element.  You need to access the options.  To do that in your code use ...

                  var unemployment = (city[0].getElementsByTagName("unemployment")[0].text)? parseInt(city[0].getElementsByTagName("unemployment")[0].text) : parseInt(city[0].getElementsByTagName("unemployment")[0].options[city[0].getElementsByTagName("unemployment")[0].selectedIndex].text);

Make the same changes to the other elements.  Let me know how that works.

bol
I reread this and the data actually sounds like XML.  (Don't say duh, it has been a long day)  The point I made in the last part of my comment is still true, text doesn't work in Firefox.  You can try replacing that part in your script with textContent or I can help with coding for both browsers.  I'll try testing textContent in IE to see if that will work for both.

Let me know if you aren't sure what I mean and I can provide a sample using your script.

bol
none of those above reccomendations worked. a call to any of those functions or properties merely returns "undefined" much the way typing city.asdfa would return "undefined". The must be something I'm missing about the way new XMLHttpRequest().responseXML objects are to be treated. When IE is being used, we are dealing with a new ActiveXObject("Microsoft.XMLHTTP").responseXML object. There must be some way I'm supposed to treat them differently, or else if they're the same object, there must be different properties I'm supposed to access in firefox scripts.

I've tried
var unemployment =
parseInt(city[0].getElementsByTagName("unemployment")[0].text
parseInt(city[0].getElementsByTagName("unemployment")[0]
parseInt(city[0].getElementsByTagName("unemployment").item(0)//and .text
parseInt(city.item(0).getElementsByTagName("unemployment").item(0)//and .text
I've even tried just outputting to a string: city, city.text, city[0], city[0].text, but nothing I try gives me any output other than "undefined" or "[XML object]"
ASKER CERTIFIED SOLUTION
Avatar of kawas
kawas
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Fantastic kawas. I don't know how I haven't picked that out in all my research. I'll to a little if else so it works on both platforms.

Solution:
      var xmlDoc = request.responseXML;
      var city = xmlDoc.getElementsByTagName("city");
      var unemployment = parseInt(city[0].getElementsByTagName("unemployment")[0].textContent);
      if (isNaN(unemployment))
            unemployment = parseInt(city[0].getElementsByTagName("unemployment")[0].text);
      var transport = parseInt(city[0].getElementsByTagName("transport")[0].textContent);
      if (isNaN(transport))
            transport = parseInt(city[0].getElementsByTagName("transport")[0].text);
      var criminality = parseInt(city[0].getElementsByTagName("criminality")[0].textContent);
      if (isNaN(criminality))
            criminality = parseInt(city[0].getElementsByTagName("criminality")[0].text);
      var pollution = parseInt(city[0].getElementsByTagName("pollution")[0].textContent);
      if (isNaN(pollution))
            pollution = parseInt(city[0].getElementsByTagName("pollution")[0].text);
It was missed in my earlier comment too (http:#19562107).  Not an original comment Kawas but glad the second time was the charm.

bol
i didnt actually see your comment, sorry. I was just responding to the last message that i saw.
@Kawas - No worries.  I'll freely admit I could've written it clearer.  I was curious if you read it at all though and from your reply it sounds like you didn't.  In the future you might want to make sure you read all the previous comments.  :)

I am glad you posted a clearer comment so it could solve this.  It was a good one.  Thanks!

bol
Sorry b0lsc0tt. I also missed that suggestion in your comment. It was late when I recieved your comments as well, so I thought I'd gotten everything I could out of them but hadn't. I'm sorry for neglecting to reward you on a question you had put that much effort into.
AlainBryden,

No worries!  Thanks for the apology.  If you really feel bad about it and want to correct it then you can post a message in General Community Support to have this reopened.  Let me know if you need details about doing this but I REALLY don't expect it for this question.  I mainly mention it for your future info in case you didn't know.  Kawas definitely deserved points in this case; my comment should've been better. :)

Thanks again for the comment.

bol
maybe we can get an admin to remove the accept ... not sure how though
@Kawas - The way to do it is to post a message in General Community Support.  This can be done by starting a new question and choosing General under the Community Support zone.  In the message body you would want to include the URL and let the mods or admins know what help you need.  No points are needed for posts in that zone.  I don't expect Alainbryden to do that for this question but thought these details might be useful to you in the future if you need Admin or Mod help.  Let me know if you have a question about any of this. :)

bol