How to inject the same panel into multiple pages using jquery mobile

jQuery Mobile >= 1.4

• Solution one:

  Use an External panel that can be accessed from any page, this is in case you want to have the same panel contents in all pages.

  Append panel to $.mobile.pageContainer once only on pagebeforecreate and then enhance the panel using $(".selector").panel().

  var panel="<div data-role="panel" id="mypanel" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>";
  
  $(document).one('pagebeforecreate', function () {
    $.mobile.pageContainer.prepend(panel);
    $("#mypanel").panel();
  });
  

  Add button to open the panel in each header (or wherever you want).

  <a href="#mypanel" class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-grid ui-corner-all"></a>
  

Note: When using External Panel data-theme should be added to panel div, as it doesn’t inherit any styles/theme.

Demo

---

• Solution two:

  If you wish to do changes to panel before appending it, based on number of pages in DOM, add panel to each one with a different ID and a button to open that panel.

  Note that you don’t need to call any kind of enhancement, because you’re adding panels on pagebeforecreate. Hence, panels will be auto-initialized once page is created.

  var p = 1,
      b = 1;
  $(document).one('pagebeforecreate', function () {
      $.mobile.pageContainer.find("[data-role=page]").each(function () {
          var panel="<div data-role="panel" id="mypanel" + p + '" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';
          $(this).prepend(panel);
          p++;
      });
      $.mobile.pageContainer.find("[data-role=header]").each(function () {
          var panelBtn = '<a href="#mypanel' + b + '" class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-grid ui-corner-all"></a>'
          $(this).append(panelBtn);
          b++;
      });
  });
  

  Demo

Note: Make sure you use .one() not .on(), if you use the latter, panels will be added whenever a page is created.

---

jQuery Mobile <= 1.3

You can do it this way, using pagebeforecreate event and by checking if there is no Panel added already. Keeping in mind that panels markup should always be placed before [data-role=header] that’s why I used .before().

There is no need to call any enhancement method since panels are added on pagebeforecreate. They will be initialized during that event.

Demo

Your panel

var panel="<div data-role="panel" id="mypanel" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>";

Add panels dynamically

$(document).on('pagebeforecreate', '[data-role=page]', function () {
  if ($(this).find('[data-role=panel]').length === 0) {
    $('[data-role=header]').before(panel);
  }
});

---

Update

There are two alternative methods to inject “External Panel” dynamically.