Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery mobile Panel Swipe function causing errors

I'm having such a hard time, I have a flip clock using mootools, then a weather widget using Yahoo API, now I have no idea what is causing

"cannot call methods on panel prior to initialization; attempted to call method 'open'"

SO i followed this demo, http://view.jquerymobile.com/master/docs/examples/panels/panel-swipe-open.php#demo-page and now i'm getting the error.

$( document ).on( "pageinit", "#demo-page", function() {
$( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
    // We check if there is no open panel on the page because otherwise
    // a swipe to close the left panel would also open the right panel (and v.v.).
    // We do this by checking the data that the framework stores on the page element (panel: open).
    if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
        if ( e.type === "swipeleft"  ) {
            $( "#right-panel" ).panel( "open" );
        } else if ( e.type === "swiperight" ) {
            $( "#left-panel" ).panel( "open" );
        }
    }
});

});

I'm sorta at a dead end cause I had it work, feel free to look at my code, http://yaasko.com/gra423/project-4.3/ if you try to swipe left or right the console will output the error.

Please let me know if you can help, first time jquery mobile user!

like image 636
Yasko Avatar asked Dec 26 '22 09:12

Yasko


1 Answers

In case of this msg:

"cannot call methods on panel prior to initialization; attempted to call method 'open'"

open panel like this:

$( "#left-panel" ).panel().panel("open");

First panel() call will initialize it and second one will open it.

EDIT :

$(document).on('pagebeforeshow', '#index', function(){        
    $( document ).on( "swipeleft swiperight", "#index", function( e ) {
        if ($.mobile.activePage.find('#left-panel').hasClass('ui-panel-closed') && e.type === "swipeleft") {
            $( "#right-panel" ).panel( "open" ); 
        }    

        if ($.mobile.activePage.find('#right-panel').hasClass('ui-panel-closed') &&  e.type === "swiperight") {
            $( "#left-panel" ).panel( "open" );           
        }        
    });
});
like image 130
Gajotres Avatar answered Jan 04 '23 22:01

Gajotres