Say I have a fairly complex menu in the JQM Panel that I need it to be accessible from every pages in the application. One way of implementing it is simply copy and paste the Panel code to each and every sub pages.
This worked. However, it is only good for a small application with simple panel. Copying the big chunk of Panel code and applying in every other pages can be quite cumbersome and surely suffer performance issue when more pages are loaded into DOM later.
So I tried to do it another way - manipulating the Panel myself. I tapped into the pagecreate event and prepend the Panel into the page loaded. This way I can keep my DOM clean and always deal with one Panel at all time.
But that didn't work. It seemed the Panel failed to re-init themselves after I force-fully moving it from one page to another and call pageContainer.trigger('refresh') orpageContainer.trigger('create').
So I ended up doing this - keep the Panel html in js variable, then prepend the panel html into the page loaded, without removing the panel on previous page. This seem working.
Approach 3 - The compromise way
While this approach doesn't really take care of that having only one Panel in the DOM, at least I don't have to copy-paste it into every pages.
Now it works, but I'm not all that happy with it. I'm posting this question here and hopefully someone could shed some light explaining why the Approach 2 didn't work, and that would really make my day.
** My app is using Multi-page template