jQuery Mobile 1.3.2 error when using panel

Question

I'm trying to implement panel functionality with jQuery Mobile 1.3.2. Here's my code:

    <div data-role="page" id="homePage">
    <section data-role="panel" class="row">
        PANEL HERE..
    </section>

    <section data-role="header" class="row">
        <div class="large-12 columns">
            <h3>
                Header..
            </h3>               
        </div>          
    </section>

    <section data-role="content" class="row">
        <div class="large-12 columns">
            CONTENT..               
        </div>          
    </section>

    <section data-role="footer" class="row">
        <div class="large-12 columns">
            FOOTER..                
        </div>          
    </section>

    <script type="text/javascript">
        $(function ()
        {

        }());
    </script>
</div>

When I run this is a browser, I get an error:

$.data(...) is undefined

I've traced it to line 10330 of jquery.mobile-1.3.2.js:

var $theme = $.data( page[0], "mobilePage" ).options.theme,

What am I missing?

Answer 1

I see that jQuery mobile panel is not compatible with jQuery 2.0.

You got the error:

TypeError: 'undefined' is not an object (evaluating 'a.data(d[0],"mobilePage").options')

Try downgrade to jQuery 1.9 it works with it.

Demo: http://jsfiddle.net/IrvinDominin/3wUts/

Answer 2

I added this code right after the script include lines in the header:

<script type="text/javascript" src="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<script type="text/javascript">
  var jqDataOrg = $.data;
  $.data = function (a, b, c) { return jqDataOrg(a, b === "mobilePage" ? "mobile-page" : b, c); };
</script>

It allows me to continue to use jQuery 2 and CDNs for distribution. May have some side effects unknown to me so beware.

Answer 3

If you do a quick search in the jquery mobile javascript file (minified or not) for the term "mobilePage" and change it to "mobile-page" it will work. There should be only one match. I encountered this and got it working as such.

Source of the fix was: https://github.com/jquery/jquery-mobile/issues/6200