-2

Im trying to run this javascript on my site but I can't seem to get it to load. I followed the tutorial link below but it just doesn't seem to load properly. Can anyone help. Sorry I'm new to working with XML.

Im also trying to run this locally, not on a server.

Video Link: https://www.youtube.com/watch?v=ppzYGd0wi_c

<!DOCTYPE html>

<html>
<head>


        <title>XML Testing</title>


        <meta name=viewport content="width=device-width, initial-scale=1">  




        <!-- CSS Style Information -->
<!--        <link rel="stylesheet" href="files/style.css" media="all">-->



        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>


        <script type="text/javascript">

            $(document).ready(function(){
               $.ajax({
                   type: "GET",
                   url: "data.xml",
                   dataType: "xml",
                   success: xmlParser
               });
            });

            function xmlParser(xml){
                $(xml).find("painting").each(function){
                   $("#container").append('<div class="painting"><img src="images/' + $(this).find("image").text() + '" width="200" height="225" alt="' + $(this).find("title").text() + '" /><br/><div class="title">' + $(this).find("title").text() + '<br/>$' + $(this).find("price").text() + '</div></div>'); 
                });
            }


        </script>


    </head>
    <body id="body">

        <div id="container">

        </div>


    </body>
</html>

Separate xml file called data.xml

<?xml version="1.0"?>


<paintings>
    <painting>
        <title>Boardwalk 5</title>
        <artist>Arnie Palmer</artist>
        <image>test.png</image>
        <price>850</price>
    </painting>
    <painting>
        <title>Boardwalk 5</title>
        <artist>Arnie Palmer</artist>
        <image>test.png</image>
        <price>850</price>
    </painting>
</paintings>
Curtis Paradis
  • 1
  • 1
  • 1
    Possible duplicate of [Ajax in Jquery does not work from local file](http://stackoverflow.com/questions/17947971/ajax-in-jquery-does-not-work-from-local-file) – Dave Sep 23 '16 at 16:54
  • Can you add more detail about the actual issue you are having? Which browser are you using? If you use the developer tools for your browser you can find an error message that should help others narrow down your problem. – Nat Dempkowski Sep 23 '16 at 17:01
  • Press `F12` in your browser for browser console and find out the error. It will display what you are missing and what type of error you are getting. – Rishal Sep 23 '16 at 17:15

1 Answers1

1

JS syntax error, should be:

$(xml).find("painting").each(function(){
   $("#container").append('<div class="painting"><img src="images/' + $(this).find("image").text() + '" width="200" height="225" alt="' + $(this).find("title").text() + '" /><br/><div class="title">' + $(this).find("title").text() + '<br/>$' + $(this).find("price").text() + '</div></div>'); 
});
Picko
  • 148
  • 6
  • At least mention what you changed. Nobody can spot that one character difference without careful inspection. – Dave Sep 23 '16 at 18:40
  • Updated each(**function){** to each(**function(){** -- added the missing parenthesis. – Picko Sep 23 '16 at 20:45