JQuery Mobile 1.3.2 error when using the panel

Question

I am trying to implement panel functionality using jQuery Mobile 1.3.2. Here is 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 launch this browser, I get an error message:

$. data (...) undefined

I traced it to line 10330 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 not compatible with jQuery 2.0.

You have received the error message:

TypeError: 'undefined' is not an object (evaluation is 'A.data (d [0], "MobilePage"). Parameters')

Try switching to jQuery 1.9, it works with it.

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

Answer 2

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

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

Answer 3

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> 

This allows me to continue to use jQuery 2 and CDNs for distribution. Maybe some side effects are unknown to me, so be careful.