CODEWITHSUNDEEP
jqueryhtmlinternet-explorer
sonar
sonar

Reputation: 385

jQuery.html() method is not working appropriately on IE7 and IE8

I been working with jQuery for a while, but recently I've encountered a problem with IE7 and IE8 while using jQuery's .html() method. Id I receive an XML response from an AJAX call and try to get the innerHTML of a particular segment of that response I get an undefined.

Now this works prefectly on Firefox, Chrome and IE 9.

Please see the snippet below:

 var data = 
     "<reponse_data>" + 
     "  <chart_data>" + 
     "      <chart caption='' yAxisName='Unidades' alternateVGridColor='AFD8F8' toolTipBorderColor='114B78' toolTipBgColor='E7EFF6' plotBorderDashed='0' plotBorderDashLen='2' plotBorderDashGap='2'  useRoundEdges='1' showBorder='1' bgColor='FFFFFF,FFFFFF' formatNumberScale='0' paletteColors='B9E1FF,FEC618,94C20A,CD7239,0A9797'>" + 
     "          <set label='Inventario' value='1203' />" + 
     "          <set label='Recibidas' value='3423' />" + 
     "          <set label='Subastadas' value='3661' />" + 
     "          <set label='Entregadas' value='3648'  />" + 
     "          <set label='Balance' value='978'  />" + 
     "      </chart>" + 
     "  </chart_data>" + 
     "  <misc>" + 
     "      <initialInvCell>1,203</initialInvCell>" + 
     "      <receivedUnitsCell>3,423</receivedUnitsCell>" + 
     "      <auctionedUnitsCell>3,661</auctionedUnitsCell>" + 
     "      <deliveredUnitsCell>3,648</deliveredUnitsCell>" + 
     "      <finalInventoryCell>978</finalInventoryCell>" + 
     "  </misc>" + 
     "</reponse_data>";

 console.log('ChartData: ' + $(data).find('chart_data').html());

Upvotes: 3

Views: 2449

Answers (3)

sonar
sonar

Reputation: 385

Hi @teewuane and @joshua,

Thank you for all your help. I was able to succeed in achieving my goal by doing the following:

http://jsfiddle.net/CcWfj/3/

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
       function ieParse () {
            //var xmlText = "<root><fruit color='red'></fruit></root>";
            var xmlText = "<reponse_data>" + 
                          "   <chart_data>" + 
                          "       <chart caption='' yAxisName='Unidades' alternateVGridColor='AFD8F8' toolTipBorderColor='114B78'     toolTipBgColor='E7EFF6' plotBorderDashed='0' plotBorderDashLen='2' plotBorderDashGap='2'  useRoundEdges='1' showBorder='1'     bgColor='FFFFFF,FFFFFF' formatNumberScale='0' paletteColors='B9E1FF,FEC618,94C20A,CD7239,0A9797'>" + 
                          "           <set label='Inventario' value='1203' />" + 
                          "           <set label='Recibidas' value='3423' />" + 
                          "           <set label='Subastadas' value='3661' />" + 
                          "           <set label='Entregadas' value='3648'  />" + 
                          "           <set label='Balance' value='978'  />" + 
                          "       </chart>" + 
                          "   </chart_data>" + 
                          "   <misc>" + 
                          "       <initialInvCell>1,203</initialInvCell>" + 
                          "       <receivedUnitsCell>3,423</receivedUnitsCell>" + 
                          "       <auctionedUnitsCell>3,661</auctionedUnitsCell>" + 
                          "       <deliveredUnitsCell>3,648</deliveredUnitsCell>" + 
                          "       <finalInventoryCell>978</finalInventoryCell>" + 
                          "   </misc>" + 
                          "</reponse_data>";

            var xmlDocument = XMLFromString(xmlText);
            var chartData = XMLToString(xmlDocument.childNodes[0].childNodes[0].childNodes[0]);
            var elementsData = XMLToString(xmlDocument.childNodes[0].childNodes[1]);

            alert(chartData);
            alert(elementsData);

        }

        function XMLToString(oXML) {
          if (window.ActiveXObject) {
            return oXML.xml;
          } else {
            return (new XMLSerializer()).serializeToString(oXML);
          }
        }

        function XMLFromString(sXML) {
          if (window.ActiveXObject) {
            var oXML = new ActiveXObject("Microsoft.XMLDOM");
            oXML.loadXML(sXML);
            return oXML;
          } else {
            return (new DOMParser()).parseFromString(sXML, "text/xml");
          }
        }


    </script>
</head>
<body>
    <button onclick="ieParse ()">IE Parse</button>
</body>

So I basically had to scrap the use of jQuery's .find() and .html() function all together for IE7 and IE8.

And Joshua I'll take your comments into advicement.

I used the following reference: http://joncom.be/code/javascript-xml-conversion/

Thanks again,

Upvotes: 0

Joshua
Joshua

Reputation: 3603

$(data) is not HTML yet. It's a string, and as such it doesn't have any of the DOM associated with it that jQuery uses. You need to dump it into the DOM somewhere before trying to use it with jQuery.

Since you're getting this as a string from somewhere, maybe the best thing to do (performance and memory-wise) is parse the string and get the values you want. You can use either RegEx, or find the indexes of the opening and closing brackets and get whatever's in between.

Upvotes: 3

teewuane
teewuane

Reputation: 5734

EDIT: I've updated my answer. See this jsfiddle to see it working...

Note this is using jquery 1.8.2

html:

<div id="maincontent">
    hello world
</div>​

js:

var data = 
 "<reponse_data>" + 
 "  <chart_data>" + 
 "      <chart caption='' yAxisName='Unidades' alternateVGridColor='AFD8F8' toolTipBorderColor='114B78' toolTipBgColor='E7EFF6' plotBorderDashed='0' plotBorderDashLen='2' plotBorderDashGap='2'  useRoundEdges='1' showBorder='1' bgColor='FFFFFF,FFFFFF' formatNumberScale='0' paletteColors='B9E1FF,FEC618,94C20A,CD7239,0A9797'>" + 
 "          <set label='Inventario' value='1203' />" + 
 "          <set label='Recibidas' value='3423' />" + 
 "          <set label='Subastadas' value='3661' />" + 
 "          <set label='Entregadas' value='3648'  />" + 
 "          <set label='Balance' value='978'  />" + 
 "      </chart>" + 
 "  </chart_data>" + 
 "  <misc>" + 
 "      <initialInvCell>1,203</initialInvCell>" + 
 "      <receivedUnitsCell>3,423</receivedUnitsCell>" + 
 "      <auctionedUnitsCell>3,661</auctionedUnitsCell>" + 
 "      <deliveredUnitsCell>3,648</deliveredUnitsCell>" + 
 "      <finalInventoryCell>978</finalInventoryCell>" + 
 "  </misc>" + 
"</reponse_data>";

var a = $("<div/>",{
    html: data,
    id: "darth",
    style: "display:none;"
}).appendTo($("#maincontent"));

var b = a.find("chart_data").html();

alert(b);

Old answer:

I wouldn't think that would work since it's not really html at that point. It's a string of text until it's injected into the dom...

I would suggest dumping that into the dom first if you want to use methods like .html().

something like...

var data = "data" + "more data..." + "more data"...


var a = $("<div/>",{html: data, display: "none"}).appendTo($("body"));

then...

var b = a.find("chart_data").html();

It's not very pretty but it should work...

Upvotes: 1

Related Questions