Add Panel to page instead of index.html

I am having some issues when i try to add a right side panel to a page that is navigated to. I dont want the panel in the main part of the app but instead only available in one page that a user navigates too. The right panel is filled with data from Template7 so i cant have it in the main part of the app.

The issue i am having is that this works just fine on the first time that the user opens the panel, BUT if the user goes back 1 page in history and then back to the page that contains the panel, the panel is no longer able to be opened. I have to restart my entire application before i can use the panel again. Any help?

Thanks

So i fixed this in the framework itself by modifying the panel open method. Changed to:

    open: function open(side, animate) {
    var panelSide = side;
    if (!panelSide) {
      if ($$1('.panel').length > 1) {
        return false;
      }
      panelSide = $$1('.panel').hasClass('panel-left') ? 'left' : 'right';
    }
    if (!panelSide) { return false; }
    if (app.panel[panelSide]) {
      return app.panel[panelSide].open(animate);
    }
    var $panelEl = $$1((".panel-" + panelSide));
    if ($panelEl.length > 0) {
      var pan = app.panel.create({ el: $panelEl });
      pan.once('panelClosed', function() {
          this.destroy();
      });
      return pan.open(animate);
    }
    return false;
  }

This code only works on Ios mode on Android mode does not working.

try disabling cache on the page navigation

Link to page With Panel

also in yor code you have couple of codes that prevents panel from opening like

if ($$1('.panel').length > 1) {
        return false;
      }

try console log something in there so you can catch if one of them is preventing panel from opening

I do the console and I observe the panel in android mode app.panel[panelSide] this line of code is not always undefined but in ios mode is if you remove this code it works for me.

if (app.panel[panelSide]) {
return app.panel[panelSide].open(animate);
}