Load in xml file using jQuery

Question

I've been browsing through stackoverflow for a while and have not found an answer that suits my problem - I want to load in a certain part of my xml file when I click a button. I want to load parts of my xml file into 'contents' div.

This is my HTML Code :

<div>
  <input type="button" id="click"/>
  <div id="content">

  </div>
</div>

This is my XML :

<?xml version="1.0" encoding="utf-8"?>
<books>
    <book id="jeff">
    <author>Jeffrey </author>
    <title>Books 1</title>
</book>
<book id="jerry">
    <author>Jerry</author>
    <title>Books 2</title>
</book>
<book id="jimmy">
    <author>Jimmy</author>
    <title>Boks 3</title>
</book>
<book id="jem">
    <author>Jem</author>
     <title>Books 4</title>
</book>
</books>

I have tried this (I know this is far from right - so no hate please) :

$(document).ready(function() {
 $('#click').click(function(){
    $.ajax({
      url : 'books.xml',
      dataType : 'xml',
    success : parse,
     });

   function parse(xml){
     $('#content').append($(xml).find('authour').text());
       }
   });
 });

How would I access each authours id specification using jQuery. (Sorry if I messed up explaining it ! :) ).

stackoverflow.com/questions/1773550/… - this might help you. Change your xml to json and then iterate through it. — Maciej Kwas
– Maciej Kwas, Commented Feb 23, 2016 at 14:43
@MaciejKwas no need to convert to json just to read xml and pars to html — charlietfl
– charlietfl, Commented Feb 23, 2016 at 14:45
So what have you tried. Can you load the xml document and store it into a variable? Can you loop over the document? — epascarello
– epascarello, Commented Feb 23, 2016 at 15:00

Raulucco · Accepted Answer · 2016-02-23 15:42:00Z

1

It is possible to load the xml using jQuery with $.ajax, $.get, $.post. Once you are using jQuery it has a method $.parseXML:

$.ajax({url: 'file.xml', method: 'GET', dataType: 'xml'}).done(function (xml) {
  var xmlDoc = $.parseXML( xml );
  var author = $(xmlDoc).find('book[id="jem"]').find('author');
  $('#content').append('<span>' + author.text() + '</span>');
});

The server should respond with the correct mime type Content-type: "text/xml" in this case

edited Feb 23, 2016 at 15:42

answered Feb 23, 2016 at 15:15

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

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

4 Comments

Jeffrey Kola Abodunde Over a year ago

how would I output that into the content div and how would I select the author of a specific id such as jeff, jerry jimmy etc

Raulucco Over a year ago

You might want to create some html to append it where you want, I'll edit

Jeffrey Kola Abodunde Over a year ago

Replaced file.xml with books.xm - l(which is the name of the actual file) but still returns nothing , thanks for the help anyways.

Raulucco Over a year ago

The url must be the either absolute or relative. If is relative then it will use the domain and whole path of the actual page and append a '/' and he url that you provided. This is the way i made the example. If you add the '/' to the url then it will use the domain of the page and the url that you provide. Other possibility is to pass an absolute url.

Collectives™ on Stack Overflow

Load in xml file using jQuery

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related