How to load text content from an xml document into a div/paragraphs

Question

<div class="news"><a href="subsides/news.php">
              <p id="p1">Text comes here</p>
              <p id="p2">Another text comes here</p>
              <p id="p3">...</p>
              <p id="p4">...</p></a></div>

As above i have a div with four p-tags and i want to load text from an xml! I tried around, searched here, but found nth that suits my case! How could the xml-file and the javascript look like??

<?xml version="1.0" encoding="utf-8"?>
  <news name = "one">
              <p id="p1">bla bla bla</p>
              <p id="p2">bla bla bla</p>`
</news>

And the javascript:

$.ajax({
    url: "news.xml",
type: "GET",

    dataType: "xml",
    success: function (xml) {
        var xmlDoc = $.parseXML(xml),
            $xml = $(xmlDoc);
        $xml.find('news[name="one"]').each(function () {
            $(".news").append($(this).text());
        });
    }
});

http://stackoverflow.com/questions/16417211/load-xml-file-content-into-div-using-jquery This looks like what you want. Quick Google search pulled it up as the first result. — Th3BFG, Jul 15 '13 at 21:37

score 0 · Answer 1 · answered Jul 15 '13 at 21:53

0

You could use jQuery Ajax to get the XML data... If successful parse the result and search through it to find the node that contains the text you want. If you find the node, append its text to the appropriate paragraph

$.ajax({
    type: "GET",
    url: "docName.xml",
    dataType: "xml",
    success: function (result) {

        var xml = $.parseXML(result),
            $xml = $(xml);

        // Find the node that you want to add to your first paragraph
        // Depending on your situation, you may have to repeat for each paragraph

        $xml.find('xml node you want').each( function() {
            $('#p1').append( $(this).text() );
        });
    }
});

answered Jul 15 '13 at 21:53

digiliooo

821
7
9

Don't have enough rep to comment on the original question - are you sure you have your XML file in the root of your directory (so the URL is correct)? Also, can you show us what the actual XML looks like? Are you seeing any errors? – digiliooo Jul 15 '13 at 21:57
something something Thats the xml in the moment, the url is correct!! – Arni Jul 15 '13 at 22:08

Jasen · Answer 2 · 2013-07-15T22:22:43.823

0

Make a html <p> element from the xml <p> then append it to your div.

$xml.find('news[name="one"] p').each(function () {
    var $p = $("<p>").html($(this).text());
    var id = $(this).attr("id");
    $p.attr("id", id);
    $(".news").append($p);
});

Apparently, the two <p> are not the same and will render differently by the browser.

jsFiddle http://jsfiddle.net/exReT/

edited Jul 15 '13 at 22:22

answered Jul 15 '13 at 22:09

Jasen

14,030
3
51
68

How to load text content from an xml document into a div/paragraphs

2 Answers2