Dynamically Create HTML page from XML using JQuery

amdish · Jul 19, 2012

My first post. Be nice...I'm super new to this. This question is not job related, I'm just trying to teach myself some new fun skills. I'm trying to build an html page with anchors from an xml using jquery. I'm having success, but I cannot figure out how to link to the various anchors. I may be approaching it wrong, or I may be missing some code. Your opinion is also appreciated...so I'll respect a 'god, that approach is terrible.'The problem is my button (HREF) to #orders + ID is not working. The section get's built just fine, the link doesn't work though. I tested by taking out the #allOrders div above it and low that does seem to work. But I need that div to dynamically build my #orders + ID from the xml. Don't I? Again...I searched for this, but maybe it is so rudimentary as to be not even questioned by others...that happens too, sometimes the question is just too basic. Here is my code, \[code\]<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title> </title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <link rel="stylesheet" href="http://stackoverflow.com/questions/11251994/my.css" /> <style> /* App custom styles */ </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> </script> <script> $(document).ready(function () { $.ajax({ type: "GET", url: "mobile_sales.xml", dataType: "xml", success: xmlParser }); }); function xmlParser(xml) { $('#load').fadeOut();//first build the DIVs necessary for the document for test we will only build the Orders divs. $(xml).find("order").each(function() { var id = $(this).attr('id'); $(".allOrders").append('<div style="min-height: 631px;" class="ui-page ui-body-c" tabindex="0" data-url="orders' + id + '" data-role="page" id="orders' + id + '"><div data-theme="e" data-role="header"><h3>Orders</h3></div><div class="orders' + id + '"></div></div>') }); $(xml).find("sales_person").each(function () { $(".intro").append('<div class="sales_person">' + $(this).find("name").text() + '</div><div class="mtdsales">Month To Date Sales: ' + $(this).find("mtdsales").text() + '</div><div class="ytdsales">Year To Date Sales: ' + $(this).find("ytdsales").text() + '</div>'); $(".sales_person").fadeIn(1000); }); $(xml).find("customer").each(function () { var id = $(this).attr('id'); $(".customers").append('<div data-role="collapsible" data-filter="true"><h3>' + $(this).find("kna1_kunnr").text() + ' ' + id +'</h3><a data-role="button" data-transition="fade" href="http://stackoverflow.com/questions/11251994/#complaints' + id + '">Complaints</a><a data-role="button" data-transition="fade" href="http://stackoverflow.com/questions/11251994/#contacts' + id + '">Contacts</a><a data-role="button" data-transition="fade" href="http://stackoverflow.com/questions/11251994/#orders' + id + '">Sales Orders</a>') }); $(xml).find("order").each(function() { var id = ".orders" + $(this).attr('id'); $(id).append('<h5>' + $(this).find("vbak_ername").text() + '</h5>') }); } </script> </head> <body> <div data-role="page" id="page1"> <div data-theme="e" data-role="header"><h3>Sales Stuff</h3></div> <div class="intro"></div> <a data-role="button" data-transition="fade" onclick="myFunction()" href="http://stackoverflow.com/questions/11251994/#customers">View Customers</a> </div> <div data-role="page" id="customers"> <div data-theme="e" data-role="header"><h3>Customers</h3></div> <div class="customers"></div> </div> <div class="allOrders"></div><div class="allComplaints"></div><div class="allContacts"></div></body>\[/code\]

Dynamically Create HTML page from XML using JQuery

amdish

New Member