Sliding Panel on two app different pages is broken

Wed Nov 13, 2013 8:53 pm

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.

Wed Nov 13, 2013 9:51 pm

Hello!

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

Wed Nov 13, 2013 10:27 pm

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.

Thu Nov 14, 2013 6:13 am

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

Thu Nov 14, 2013 1:58 pm

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.

Thu Nov 14, 2013 2:18 pm

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

<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">
</li>
<li data-theme="a">
<a href="#" id="home" data-transition="slide">
Home
</a>
</li>
<li data-theme="a">
<a href="#" id="offers" data-transition="slide">
Offers
<span class="ui-li-count">
2
</span>
</a>
</li>
<li data-theme="a">
<a href="#" id="email" data-transition="slide">
Email a friend
</a>
</li>
</ul>
</div>
</span>
/code

Fri Nov 15, 2013 3:05 pm

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

Fri Nov 15, 2013 7:20 pm

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

Mon Nov 18, 2013 2:17 pm

Hello! You have incorrect app logic. Please try this way.
1) In file panelMenuEvents this code prevar Panel = function() {
if (!$.mobile.activePage.children('#mypanel').length) {
panel = $('#mypanel', $.mobile.activePage);
$.mobile.activePage.append(panel);
_panel.on("panelbeforeopen", function( event, ui ) {
_panel.off().on("click", "#home", function() {
navigateTo("Home", true);
}).on("click", "#offers", function() {
navigateTo("Offers", true);
}).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", $.mobile.activePage).panel("open");/pre