CODEWITHSUNDEEP
jqueryeventsmobile
Greg
Greg

Reputation: 425

jQuery Mobile - How to Check if the Browser supports jQuery Mobile events

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.

Upvotes: 0

Views: 7284

Answers (1)

David Pean
David Pean

Reputation: 2906

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

Upvotes: 3

Related Questions