Add Panel to page instead of index.html


#1

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


#2

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;
  }

#3

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


#4

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


#5

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);
}