jQuery Mobile Panel widget throws error when calling .panel() function (1.4.5, jquery 1.11.1)
Question
I'm trying to trigger the open of a panel using the
$("#searchpanel").panel("open");
method. it throws a
Uncaught TypeError: undefined is not a function
error because .panel() doesn't exist on that object as a method.
here is the html code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/themes/db.css" />
<style>@import "css/bible.css";</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script data-main="js/main" type="text/javascript" src="js/require-jquery.js"></script>
<style>
.panel-content { padding:3px; }
.ui-btn-text { font-size: .75em;}
h3 { font-size: 1em;}
p {font-size: .8em;}
.ui-submit .ui-btn-inner .ui-btn-text { font-size: 1.2em;}
.ui-submit {height:35px;}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="a">
<div class="ui-grid-c my-breakpoint">
<div class="ui-block-a"><a id="menuicon" href="#defaultpanel"></a></div>
<div class="ui-block-b"><input id="searchvalue" type="search" /></div>
<div class="ui-block-c"><input value="Search" type="submit" id="searchbtn" /></div>
<div class="ui-block-d"><a id="searchicon" href="#searchpanel"></a></div>
</div>
</div>
<div data-role="content">
<div id="resultwrap">
<ul id="result"></ul>
</div><!-- /content -->
</div>
<div data-role="panel" id="searchpanel" data-theme="a" data-position="right" data-display="overlay">
<div class="panel-content">
<h3>Search Results: <span id="searchTotal"></span></h3>
<div id="searchresults"></div>
</div>
</div>
<div data-role="panel" id="defaultpanel" data-theme="a">
<div class="panel-content">
<h3>Settings</h3>
</div>
</div>
</div><!-- /page -->
</body>
EDIT: per Alexanders suggestion below, modified the question for clarity. EDIT2: also added relevant head section so you can see the versions in use.
2 answers
solution1
0 2014-12-25 18:59:38
Have you created your method first before doing an open function?
Here is an example on how to do that: panel-swipe-open
$( 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" );
}
}
});
});
solution2
0 ACCPTED 2014-12-25 19:23:27
So it turns out the issue here is the
<script data-main="js/main" type="text/javascript" src="js/require-jquery.js"></script>
tag. Require is failing to load something correctly interfering with the event system. Testing without Require fixes the issue.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.