JQuery Mobile Panel widget kills page

Question

I'm trying to add a panel to my jquery mobile page, but whenever I put the code in it just shows a white screen with the loading widget and won't do anything else. I am using JQuery 2.0.0 hosted by Google, JQuery Mobile JS 1.3.1 hosted by JQuery, and JQuery Mobile css also hosted by JQuery, but still can't seem to get this working. The panel code is also pulled directly from the JQuery Mobile documentation.

Here is what I've got, it's a simple log in page:

<div data-role="page" id="mainPage">
    <!-- leftpanel1  -->
    <div data-role="panel" id="leftpanel1" data-position="left" data-display="reveal" data-dismissible="true" data-theme="a">

        <div class="panel-content">
            <h3>Left Panel: Reveal</h3>
            <p>This panel is positioned on the left with the reveal display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
            <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
            <a href="#demo-links" data-rel="close" data-role="button" data-theme="a" data-icon="delete" data-inline="true">Close panel</a>
        </div><!-- /content wrapper for padding -->

    </div><!-- /leftpanel1 -->
    <div data-role="content">
        <div id="logo"><img src="img/logo.png" style="width:100%;height:25%"></div>
        <br /><br /><br />
        <a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-transition="flow">Login</a>
        <br />
        <a href="#leftpanel1" data-role="button" data-inline="true" data-mini="true">Reveal</a>
        <a href="moreInfo" data-role="button">More Info</a>
        <br /><br /><br /><br /><br />
        New to 2Gen? <a href="#register">Sign up for an account.</a>
        <div data-role="popup" id="popupMenu">
            <div data-role="popup" id="popupLogin">
                <div data-role="fieldcontain">
                    <div style="padding:10px 20px;">
                        <h3>Please sign in</h3>
                            <input class="inputBox" type="text" id="loginUsername" value="" placeholder="Username">
                            <input class="inputBox" type="password" id="loginPassword" value="" placeholder="Password">
                            <br />
                            <div class="ui-grid-a">
                                <div class="ui-block-a">
                                    <input type="checkbox" data-mini="true" id="rememberMeCheckbox" name="rememberMeCheckbox">
                                    <label for="rememberMeCheckbox">Remember<br /> Me</label></div>
                                <div class="ui-block-b"><a href="#" onclick="login()" data-role="button" data-mini="true">Login</a>
                                </div></div>
                            </div><!-- /grid-a -->
                    </div>
                </div>
            </div>
        </div>
</div><!-- /page -->

Any help would be greatly appreciated, thanks

Here is what I'm getting on my end: http://jsfiddle.net/3dxKW/2/

Edit:

I figured out why it wasn't working, apparently it doesn't like when I use JQuery 2.0.0, so when I switched to 1.9.1 it worked perfectly.

Answer 1

I just tried it on jsfiddle.net and it works http://jsfiddle.net/ouadie/3dxKW/

    <div data-role="panel" id="leftpanel1"
     data-position="left" data-display="reveal"
     data-dismissible="true" data-theme="a">

    <div class="panel-content">
       ...
    </div>
  </div>

http://jquerymobile.com/demos/1.3.0/docs/widgets/panels/

Answer 2

jQuery Mobile 1.3 doesn't support jQuery 2.0 yet.

Only starting from 1.4 version it will work with jQuery 2.0 (july - august)