I am currently using the jQuery Mobile "pagebeforecreate" page initialization event to load content into my html page. The jQuery Mobile events are discussed here: http://jquerymobile.com/demos/1.0a2/#docs/api/events.html. After the content is loaded synchronously and appended to the body jQuery Mobile formats the page.
Here is my code which works in browsers that support jQuery Mobile:
<!DOCTYPE html> <html> <head> <title>jQuery Mobile Test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script> $('body').live('pagebeforecreate',function(event){ var ajaxContent = ""; $.ajax({ async: false, type: "GET", url: "test.xml", dataType: "xml", success: function(xml) { $(xml).find('item').each(function() { ajaxContent += '<li><a href="'+$(this).find('link').text()+'">'+$(this).find('title').text()+'</a></li>'; }); //alert(ajaxContent); $('#menu').append(ajaxContent); } }); }); </script> <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> </head> <body> <noscript>You must have JavaScript enabled to view the content on this website.</noscript> <div data-role="page"> <div data-role="header"> <h1>jQuery Mobile</h1> </div> <div data-role="content"> <ul data-role="listview" id="menu"> <li><a href="#">Static</a></li> </ul> </div> </div> </body> </html> and here is the XML file:
<?xml version="1.0" encoding="UTF-8"?> <menu> <item> <title>Awesome Link from XML 1</title> <link>http://www.google.com</link> </item> <item> <title>Awesome Link from XML 2</title> <link>http://www.gmail.com</link> </item> </menu> How can I detect if the browser supports the "pagebeforecreate" jQuery Mobile event? Or is there a way to detect if this event was executed? If this event is never executed I need to load the XML with another function. Even though IE 8 does not support jQuery Mobile I would still like it to process the XML file and display the links.
