Forum | Appery.io

Hello,

I followed your sliding panel tutorial and everything works fine on one page. Now I created another page and added the same sliding panel to the second page.

However, after I navigate from page 1 to page 2 and try clicking on the panel button it's broken. I don't get any js errors in Chrome developer tools.

I used the same panel name on both pages (#mypanel) which should work fine considering that panelEvents.js is included from both app pages and uses that name to control panel behavior on each page separately? Thanks for your help.

Hello!

Please give us public link (http://docs.appery.io/documentation/s...), we'll take a look.

Here you go:
http://appery.io/app/mobile-frame?src...

Try opening up the panel on the first page, then choose 'Offers' in the panel. This will take you to the Offers page. Try clicking on the panel button again - this is broken now.

Thanks for sharing. Sorry, but it will need more time for research. We'll keep you informed.

Hi,

To call sliding panel it should be on screen (in html panel component). What is the name of your Panel? I cannot find it on your page.

Hi Katya,

Here is the code that I use. Sliding panel id="mypanel" it's placed inside html panel component name="panelMenu"

I have the same Sliding panel on both pages (id="mypanel" for both)

code
<!-- panelMenu -->
<span name="panelMenu" dsid="panelMenu" id="Offers_panelMenu" class=" Offers_panelMenu">
<div data-role="panel" id="mypanel" data-position="left" data-display="reveal" data-theme="a">
<ul data-role="listview" data-divider-theme="h" data-inset="false">
<li data-role="list-divider" role="heading">
<&#47;li>
<li data-theme="a">
<a href="#" id="home" data-transition="slide">
Home
<&#47;a>
<&#47;li>
<li data-theme="a">
<a href="#" id="offers" data-transition="slide">
Offers
<span class="ui-li-count">
2
<&#47;span>
<&#47;a>
<&#47;li>
<li data-theme="a">
<a href="#" id="email" data-transition="slide">
Email a friend
<&#47;a>
<&#47;li>
<&#47;ul>
<&#47;div>
<&#47;span>
/code

Hi Katya, do you need more information to research this? Thanks.

Hello! Sorry for delay, we're looking into this issue. I'll let you know when have more information.

Hello! You have incorrect app logic. Please try this way.
1) In file panelMenuEvents this code prevar Panel = function() {
if (!$&#46;mobile&#46;activePage&#46;children('#mypanel')&#46;length) {
panel = $('#mypanel', $&#46;mobile&#46;activePage);
$&#46;mobile&#46;activePage&#46;append(panel);
_panel&#46;on("panelbeforeopen", function( event, ui ) {
_panel&#46;off()&#46;on("click", "#home", function() {
navigateTo("Home", true);
})&#46;on("click", "#offers", function() {
navigateTo("Offers", true);
})&#46;on("click", "#email", function() {
alert("Sorry can't send email just yet!");
});
});
}
};/pre2) On Home page show event Offers instead your code should be looking like this prePanel();/pre3) On menu button click run this code: pre$("#mypanel", $&#46;mobile&#46;activePage)&#46;panel("open");/pre