Question

I am working on a Phonegap + jQuery Mobile + Android app, and i am trying to add the slide panel feature of jQuery mobile by binding it to a swipe event. I am using jQuery Mobile 1.2.0 and it seems that slide panel is not supported according the LogCat entry.

Here is my code snippet :

<div data-role="page" id="home-page"> <!-- Home page -->
    <div data-role="panel" id="menu-panel"> <!-- panel -->
        <p>Panel</p>
    </div><!-- panel -->
    <div data-role="header" data-position="fixed"> <!-- Header -->
        <h1>Home</h1>
    </div> <!-- Header -->
    <div data-role="content"> <!-- Content -->
        <p>What do you want to do ?</p>
    </div> <!-- Content -->
</div> <!-- Home page -->

And the .js file :

$('#home-page').live('pageshow',function(){
   $('#home-page').swiperight(function(){
       alert("swiped");
       $('#menu-panel').panel("open");
   });
});

And here is the LogCat error entry :

02-03 18:34:31.616: E/Web Console(389): TypeError: Result of expression '$('#menu-panel').panel' [undefined] is not a function. at file:///android_asset/www/home.js:4

According official jQuery Mobile docs, the slide panel should be supported but i don’t know what is going haywire.

Answer 1

Panels are not available in jquery mobile 1.2.0. They are a new feature of jquery-mobile 1.3. You need to update to the current beta.