Using jQuery $.ajax, 'GET' method to display XML as HTML - only works in some browsers

Question

I am trying to pull data from an XML file into a website as HTML elements using the jQuery $.ajax 'GET' method, but it currently only works in two browsers using a local copy of jquery-1.9.1.min.

This will work just fine in Chrome and Firefox, however in Opera, Safari, and all versions of IE nothing comes through. Opera is the only browser that returns an error in the console:

Uncaught exception: TypeError: Cannot convert 'n.innerHTML' to object.

The function:

$(document).ready(function(){
  $.ajax({
    type: "GET",
    url: "content/pages.xml",
    crossDomain: true,
    dataType: "xml",
    success: function parseXml(xml){
      // find all page divs and load each into the main content area
      $(xml).find("page").each(function(){
        $("#contentArea").append($(this).find("mainPage").html());
      });
    }
  });
});

The XML:

 <page>
    <mainPage>
        <div id="homePage" class="mainPage"><!-- columns incomplete -->
            <div id="homePage_txtpart_010" class="txtpart">
                <p id="homePage_txt_010">For those who are tired of spending tens of thousands of dollars to advertise on Live-Stream programming, only to receive minimal or ineffective exposure, StreamYourAd.com offers 
                a long overdue alternative to fruitless pre-roll ads. Take the guess work out of whether or not your ads reach your audience, and start paying less to attain more.</p>
                    <br />
                <p id="homePage_txt_020">When you partner with us, your ads...</p>
                <ul id="homePage_lst_010">
                    <li id="homePage_itm_010">Last longer</li>
                    <li id="homePage_itm_020">Cost less (less than a penny per view)</li>
                    <li id="homePage_itm_030">Can't be blocked, skipped or ignored</li>
                    <li id="homePage_itm_040">Reach a targeted, captivated audience</li>
                    <li id="homePage_itm_050">Reach mobile viewers</li>
                </ul>
            </div>
            <div id="homePageColumns">
                <div id="homePageColumn_010" class="homePageCol">
                    <h2 class="titles">Digital Branding</h2>
                    <p class="homePageColumns_txt">Embedded advertisements, logo blocks and digital PR.</p>
                </div>
                <div id="homePageColumn_020" class="homePageCol">
                    <h2 class="titles">Social Solutions</h2>
                    <p class="homePageColumns_txt">Facebook development, Twitter development, surveys and fan feedback.</p>
                </div>
                <div id="homePageColumn_030" class="homePageCol">
                    <h2 class="titles">Promotions and Endorsements</h2>
                    <p class="homePageColumns_txt">Product placement, streamer shout-outs, incentives and giveaways.</p>
                </div>
            </div>
        </div>
    </mainPage>
</page>

<page>
    <mainPage>
        <div id="aboutPage" class="mainPage">
            <div id="aboutPage_txtpart_010" class="txtpart">
                <p id="aboutPage_txt_010">StreamYourAd.com was created as an alternative to the stale forms of advertising currently offered in the Live-Streaming marketplace. Our goal is to get your message out to the masses.</p>
                <p id="aboutPage_txt_020">Commercials are often ignored, skipped and even blocked. However, our process directly connects streamers with advertisers and ensures delivery of your message to live-streaming audiences worldwide.</p>
                <p id="aboutPage_txt_030">Our ability to work with budgets big and small, create customizable service packages and employ streamers as advertisers makes working with StreamYourAd.com a partnership worth exploring.</p>
                <p id="aboutPage_txt_040">Check out our list of services and contact us to see how we will help you reach your target audience every time.</p>
            </div>
        </div>
    </mainPage>
</page>

<page>
    <mainPage>
        <div id="servicesPage" class="mainPage"><!-- includes four sub-pages; incomplete -->
            <div id="servicesPage_txtpart_010" class="txtpart">
                <p id="servicesPage_txt_010">services...</p>
            </div>
        </div>
    </mainPage>
</page>

<page>
    <mainPage>
        <div id="contactPage" class="mainPage"><!-- needs forms and more contextual info -->
            <div id="contactPage_txtpart_010" class="txtpart">
                <p id="contactPage_txt_010">If you are an advertiser that is interested in having our streamers promote your business, a streamer interested in joining our Stream Team, or for any other inquiries you may have, please contact us and leave us your comments.</p>
            </div>
        </div>
    </mainPage>
</page>

The HTML:

            <div id="contentArea">
                <!-- populated by xml data on document ready -->
            </div>

Have I missed something or is my syntax just off? I usually don't work with jQuery and XML in this way so don't be afraid to rip my code apart :)

is there a reason to use the "crossDomain" setting? Are the files on another server? — user571545
– user571545, Commented Jan 26, 2014 at 18:49
I'm just wondering in case a browser is trying to retrieve XML using CORS...? — user571545
– user571545, Commented Jan 26, 2014 at 18:57

Musa · Accepted Answer · 2014-01-26 19:38:05Z

I'd suggest having the html as cdata in your xml and use .text().
Also remove crossDomain: true, since by your url you're not making a cross domain request.

$(document).ready(function(){
  $.ajax({
    type: "GET",
    url: "content/pages.xml",
    dataType: "xml",
    success: function parseXml(xml){
      // find all page divs and load each into the main content area
      $(xml).find("page").each(function(){
        $("#contentArea").append($(this).find("mainPage").text());
      });
    }
  });
});

<page>
    <mainPage><![CDATA[
        <div id="aboutPage" class="mainPage">
            <div id="aboutPage_txtpart_010" class="txtpart">
                <p id="aboutPage_txt_010">StreamYourAd.com was created as an alternative to the stale forms of advertising currently offered in the Live-Streaming marketplace. Our goal is to get your message out to the masses.</p>
                <p id="aboutPage_txt_020">Commercials are often ignored, skipped and even blocked. However, our process directly connects streamers with advertisers and ensures delivery of your message to live-streaming audiences worldwide.</p>
                <p id="aboutPage_txt_030">Our ability to work with budgets big and small, create customizable service packages and employ streamers as advertisers makes working with StreamYourAd.com a partnership worth exploring.</p>
                <p id="aboutPage_txt_040">Check out our list of services and contact us to see how we will help you reach your target audience every time.</p>
            </div>
        </div>]]>
    </mainPage>
</page>

http://jsfiddle.net/mowglisanu/2mT8E/

Great answer! Your solution works perfectly in all browsers (including IE8)

Oleg · Accepted Answer · 2014-01-26 19:31:46Z

0

The problem appears because these browsers don't support innerHTML property for XML data (jQuery access innerHTML property when you call .html() method).

Here is a screenshot of Opera's dragonfly tool:

opera dragonfly screenshot

The workaround is a bit dirty, but it works: you have to replace

dataType: "xml",

with

dataType: "html",

Unfortunately it doesn't work in IE8 and IE9 (however if you remove crossDomain: true it works fine in IE9)

Edit

It is also worth to note that all page nodes should be wrapped by a single parent node in pages.xml file

edited Jan 26, 2014 at 19:31

answered Jan 26, 2014 at 19:17

Oleg

23.5k10 gold badges72 silver badges87 bronze badges

1 Comment

DRZ Over a year ago

Musa, that worked like a charm; Zub, I should have specified everything in my XML file is wrapped in a master <data></data> tag, next time I'll be sure to include the entire file for better reference. Thank you both, you guys are awesome!

Collectives™ on Stack Overflow

Using jQuery $.ajax, 'GET' method to display XML as HTML - only works in some browsers

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related