Loading two different divs on same jQuery mobile site with jQuery Ajax



Here is a tricky project I got at college that the instructor never got around to giving us the solution to. It was to load a multi-page jQuery mobile site dynamically using jQuery Ajax XML parser. Firstly I had to load the unordered list with list items from an xml file that would be used as links. Then I had to load all the seperate pages from the xml as well these pages would have ids and be called by the links in the unordered list. The question is how do I load two seperate items on the same site, does it require seperate calls to the xml. Also is it actually possible to populate a container div with dynamically loaded "div data-role=page(s)". Here is my script that is contained in the head with the attempt at loading data-role-pages greyed out. Also the html and the xml.


Here is the javascript



   <script type="text/javascript">
       console.log("starting...");
       var xml;
       $(document).ready(function(){
           $.ajax({
               type: "GET",
               url: "lolcatz.xml",
               dataType: "xml",
               success: xmlParser
               });
         });
       function xmlParser(data) {
           xml = data;

           $(xml).find("kitteh").each(function () {
              kitteh = $(this);
              var name = $(kitteh).find("name").text();
              var id = $(kitteh).find("id").text();
              var src = $(kitteh).find("url").text();

   <!-- loading the list items from XML file -->

              $("#mylist").append('<li><a href="#' + id + '">' + name + '</a></li>');

   <!-- loading extra jQuery mobile pages from xml file, greyed out as not working --> 
              <!--$("#pages").append('<div data-role="page" id="' + id +'"><div        data-role="header"><h1>' + name + '</h1></div><div data-role="content">
              <a href="#pageone">Go to Page One</a>
              <p><img src="' + src + '"</p>
           </div>

           <div data-role="footer">
               <h1>Footer</h1>
            </div></div>');-->

           });
        }
      </script>

Here is the HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="jquery.mobile-1.4.1.min.css">
    <script src="http://ift.tt/15195HW"></script>
    <script src="jquery.mobile-1.4.1.min.js"></script>
    <script type="text/javascript">
    <!--Above Javascript goes here-->
    </script>
</head>
<body>
<div data-role="page" id="pageone">
      <div data-role="header">
        <h1>This is Page One</h1>
    </div>

      <div data-role="content">
        <div class="content-primary">
            <div data-demo-html="true">
                <ul data-role="listview" id="mylist">
                    <!-- list items loaded here from xml file -->
                </ul>
            </div>
        </div>

        <p>Page One Content</p>
        </div>

        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <div id ="pages">
    <!-- all other pages loaded here from xml file -->
</div>
</body>
</html>

Here is the xml file

<?xml version="1.0" encoding="UTF-8"?>
  <LolCatz>
    <kitteh>
        <id>1</id>
        <name>Ceiling Cat</name>
        <url>http://ift.tt/XbgWWv;
    </kitteh>
    <kitteh>
        <id>2</id>
        <name>Basement Cat</name>
        <url>http://ift.tt/1t4MRos;
    </kitteh>
    <kitteh>
        <id>3</id>
        <name>Monorail Cat</name>
        <url>http://ift.tt/XbgWWB;
    </kitteh>
    <kitteh>
        <id>4</id>
        <name>Laser Kitteh</name>
        <url>http://ift.tt/1t4MPgk;
    </kitteh>
  </LolCatz>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)