1

I am attempting to build a website that consists of an index or table of contents 'main' page with links to several virtual pages that are built using data from an xml file. I've succeeding in hard-coding the website but trying to pull the text from the xml file and build the virtual pages is giving me difficulty since the commands I use either doesn't work, or gives a syntax error or something else depending on what I try.

In this current attempt I get:

uncaught error: syntax error, unrecognized expression: div data-role="header">

my index page index.html looks like this

<html>
<head>
<meta charset="utf-8">
<title>Assignment2</title>
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" type="text/css" href="style.css"/>-->
<script type="text/javascript" src="jquery-2.2.0.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" href="jquery.mobile.min.css">
<script type="text/javascript" src="jquery.mobile.min.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascript.js"></script>
</head>

<body>
<div data-role="page" id="index">
    <div data-role="header">
        <h1>Anime Watching This Season</h1>
    </div>

    <div data-role="main" class="ui-content">
        <ul data-role="list-view">
            <li><a href="#erased">Erased</a></li>
            <li><a href="#active_raid">Active Raid</a></li>
            <li><a href="#dimension_w">Dimension W</a></li>
            <li><a href="#grimgar">Grimgar of Fantasy and Ash</a></li>
            <li><a href="#konosuba">KonoSuba</a></li>
        </ul>
    </div>

    <div data-role="footer" class="center">
        <p>You are on the homepage</p>
    </div>    
</div>
</body>
</html>

My JavaScript file javascript.js looks like this:

$(document).ready(function(){

    $.ajax ({
            type: "GET",
            url: "series.xml",
            dataType: "xml",
            success: parseXML
        });


    function parseXML (mydoc)
    {

        $(mydoc).find("series").each(function(){
            //$("#output").append ("<div> trial div</div>");
            $("<div data-role=\"page\" >").attr('id', ($(this).attr("title")) ).appendTo('body');
            $("div data-role=\"header\">").appendTo('body');
            $("<h1>" + ($(this).find("name").text()) + "</h1>").appendTo('body');
            $("</div>").appendTo('body');
            $("div data-role=\"main\" class=\"ui-content\">" + "</div>").appendTo('body');
            $("div data-role=\"footer\" class=\"center\">" + "</div> </div>").appendTo('body');

            $("#inbody").append("<div data-role=\"page\" id=\"erased\"");
            //$("<div data-role=\"page\" id=\"").appendTo("body");  
            //$(this).find("name").appendTo("body");
            //$("\">").appendTo("body");

        });
    }

});

and the xml file called series.xml looks like this

<anime>
<series title="erased">
<name>Erased</name>
<description>some text</description>
<description>some text</description>
<description>some text</description>
<image>erased.jpeg</image>
</series>

<series title="active_raid">
<name>Active Raid</name>
<description>some text</description>
<description>some text</description>
<image>active_raid.jpeg</image>
</series>

<series title="dimension_w">
<name>Dimension W</name>
<description>some text</description>
<description>some text</description>
<description>some text</description>
<image>dimension_w.jpeg</image>
</series>

<series title="grimgar">
<name>Grimgar of Fantasy and Ash</name>
<description>Awaken...</description>
<description>some text</description>
<description>some text</description>
<description>some text</description>
<image>grimgar.jpeg</image>
</series>

<series title="konosuba">
<name>KonoSuba</name>
<description>some text</description>
<description>some text</description>
<description>some text</description>
<image>konosuba.jpeg</image>
</series>
</anime>

I've tried searching before for a solution but the more information I find the more confusing it gets, so if someone can point me in the right direction or explain how to approach building this that would be greatly appreciated.

Nayuki
  • 17,911
  • 6
  • 53
  • 80
Calsolum
  • 109
  • 8

2 Answers2

3

You're missing a lot of < and > inside the $(...). It's a bit baffling because you have the correct syntax half the time. Please be diligent in examining your syntax.

$(mydoc).find("series").each(function(){
            //$("#output").append ("<div> trial div</div>");
            $("<div data-role=\"page\" >").attr('id', ($(this).attr("title")) ).appendTo('body');
            $("<div data-role=\"header\">").appendTo('body');
            $("<h1>" + ($(this).find("name").text()) + "</h1>").appendTo('body');
            $("</div>").appendTo('body');
            $("<div data-role=\"main\" class=\"ui-content\">" + "</div>").appendTo('body');
            $("<div data-role=\"footer\" class=\"center\">" + "</div>").appendTo('body');

            $("#inbody").append("<div data-role=\"page\" id=\"erased\">");
            //$("<div data-role=\"page\" id=\"">).appendTo("body");  
            //$(this).find("name").appendTo("body");
            //$("\">").appendTo("body");

        });

You probably have more, i tried to clean up most of it, but i don't know your target HTML structure.

Eric Guan
  • 15,474
  • 8
  • 50
  • 61
  • Hi Eric thanks for answering, I apologize if the code was hard to follow as I was pretty much grasping at straws trying to find some way to get the output i wanted. I've tried what you suggested and it gives me what I'm looking for but with few problems. When I upload the files the javascript prematurely adds a to the line of code with the id of the
    – Calsolum Mar 01 '16 at 06:20
0

Ok it took alot of trial and error but I managed to get the result I wanted. This is what my scriptfile looks like.

$(document).ready(function(){

    $.ajax ({
            type: "GET",
            url: "series.xml",
            dataType: "xml",
            success: parseXML
        });

        //$("body").append("<div> this is a test</div>");
    function parseXML (mydoc)
    {

$(mydoc).find("series").each(function(){
$("body").append($("<div data-role=\"page\" >").attr('id', ($(this).attr("title"))).append("<div data-role=\"header\"> <h1>" + $(this).find("name").text() + "</h1> </div> <div data-role=\"main\" class=\"ui-content\"> <img src=\"" + $(this).find("image").text() + "\" width=\"225\" height=\"321\"/>  <p>" + $(this).find("description").text() + "</p></div> <div data-role=\"footer\" class=\"center\"> <a href=\"#index\" class=\"ui-btn ui-icon-home ui-btn-icon-notext\"></a> </div>"));


        });
    }

});

Whenever i try to break it down into smaller more easily readable parts jquery prematurely closes my div tags but this works

Calsolum
  • 109
  • 8