How to do loop using Jquery .load from an external xml file

Question

I'm trying to access an external xml stored in the same domain and using jquery .load, I want to do a loop within the the rest of the nodes.

Issue: I can only retrieve 1 node using .load.

Here's my external xml

<?xml version="1.0" encoding="UTF-8" ?> 
<Main_List>
<links>
      <header>Header 1</header> 
    - <link_items>
      <url_label>URL Label 1</url_label> 
      <url>http://stackoverflow.com</url> 
      <url_target>_self</url_target> 
      </link_items>
      <link_items>
      <url_label>URL Label 2</url_label> 
      <url>http://stackoverflow2.com</url> 
      <url_target>_self</url_target> 
      </link_items>
      <link_items>
      <url_label>URL Label 3</url_label> 
      <url>http://stackoverflow3.com</url> 
      <url_target>_self</url_target> 
      </link_items>
      <link_items>
      <url_label>URL Label 4</url_label> 
      <url>http://stackoverflow4.com</url> 
      <url_target>_self</url_target> 
      </link_items>
  </links>
  </Main_List>

Here's my script

$( "#header" ).load("main_list.xml header"); 
    $( "#url_label" ).load("main_list.xml url_label");

    // load url to temp div, then set as variable and to change attributes
    $('#temp').load("main_list.xml url", function(url) {
    var getNode_url = $('#temp').text();
    jQuery('#url_label').attr('href',getNode_url);
    });

Here's my target div

<div id="header"></div>
<a id="url_label></a><br>
<div id="temp" style="display:none"></div>

My expected result should be

Header 1
<a href="http://stackoverflow.com" target="_self">URL Label 1</a>
<a href="http://stackoverflow2.com" target="_self">URL Label 2</a>
<a href="http://stackoverflow3.com" target="_self">URL Label 3</a>
<a href="http://stackoverflow4.com" target="_self">URL Label 4</a>

#temp element not appear at html ?

guest271314
– guest271314

2015-10-07 17:10:07 +00:00
Commented Oct 7, 2015 at 17:10 — guest271314
– guest271314, Commented Oct 7, 2015 at 17:10
sorry, forgot to add... it's now updated...

syntaxcode
– syntaxcode

2015-10-07 17:13:56 +00:00
Commented Oct 7, 2015 at 17:13 — syntaxcode
– syntaxcode, Commented Oct 7, 2015 at 17:13
Should a elements be appended to #temp ?

guest271314
– guest271314

2015-10-07 17:28:16 +00:00
Commented Oct 7, 2015 at 17:28 — guest271314
– guest271314, Commented Oct 7, 2015 at 17:28

guest271314 · Accepted Answer · 2015-10-07 20:04:48Z

1

Try using $.get() , $.parseXML()

$.post("/echo/html/", {
      html: $("pre")[0].innerHTML
  }, function (response) {
      var xml = $($.parseXML(response)).find("main_list");
      xml.find("header").appendTo("#header");
      xml.find("link_items").each(function (i, el) {
          // do stuff with `link_items` elements
          var a = $("<a />", {
              "href": $(el).find("url").text(),
                  "target": $(el).find("url_target").text(),
                  "html": $(el).find("url_label").text() + "<br />"
          });
          $("#temp").append(a)
      })
  })

jsfiddle http://jsfiddle.net/9r3o4v9c/5/

edited Oct 7, 2015 at 20:04

answered Oct 7, 2015 at 17:15

guest271314

1

Sign up to request clarification or add additional context in comments.

5 Comments

syntaxcode Over a year ago

sorry to mention, but I need to use .load function because the external can be .xml or just main_list (without the .xml extension) depending on the format retrieved from an external source, but the content is the same xml tag node format. Using $.get without .xml extension will not work for my page.

guest271314 Over a year ago

@syntaxcode "Using $.get without .xml extension will not work for my page" Response from server wrapped in jQuery() at var xml = $(response.documentElement); ; should return same results whether .xml extension provided , .xml extension not provided - if response from server same text . Could also try var xml = $(response);

guest271314 Over a year ago

@syntaxcode " it didn't work." Can describe "it didn't work" ? Was response returned from server ? Can create jsfiddle jsfiddle.net to demonstrate ? What is result of js at post ?

syntaxcode Over a year ago

Not sure how to load the external xml, but here's the fiddle - jsfiddle.net/9r3o4v9c/3

guest271314 Over a year ago

@syntaxcode See updated post ; added call to $.parseXML()

Collectives™ on Stack Overflow

How to do loop using Jquery .load from an external xml file

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related