0

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.

Greg
  • 425
  • 1
  • 8
  • 18

1 Answers1

3

http://jquerymobile.com/gbs/

jQuery Mobile is working to support all A grade browsers. This means that we will be actively testing against those browsers and ensuring that they work as best as they possibly can. The browsers will receive the full jQuery Mobile CSS and JavaScript (although the ultimate layout may be a gracefully degraded version of the full capabilities, depending upon the browser).

To check if a browser is defined as grade A, you can call

$.mobile.gradeA()

I don't have IE to check what that gives for this, but you can give it a try

David Pean
  • 2,866
  • 1
  • 14
  • 6
  • 1
    Thanks! That works great. I have tested "if (!$.mobile.gradeA())" and it works in IE 8. Is there any documentation on the "$.mobile.gradeA()" event? I didn't see anything about it on the jQuery Mobile website. – Greg Jan 31 '11 at 06:00
  • 1
    I should flag you by giving a link throwing back to this page – Jayson Ragasa Jul 08 '12 at 04:44