Loading pages using jQuery and preventing destroying of pages

[fearnowrath]

Hello,
I just picked up onsenui and i will be asking a handful of questions very soon. I want to ask a few questions on the same topic but I am not sure if it meets the guidelines of the community?

My question is - how can i prevent destroying of pages when another page is opened?
I need to load certain pages of our website into the app via <object> tag. In some cases, I dont want the <object> to reload when another page(lets say search page) is opened and user switches back to the original page. How can i do that?

Also, can I get a list of js functions that are used for loading pages etc? eg, I only see onclick=“fn.load(‘home.html’)” in the examples but how can I load the page using jquery instead of pure javascript?

Also, when should I use the ons-navigator to switch to another page and when should i use the onclick on <ons-button>s to switch to another page? What is the suggested approach for this?

(Sorry but would it be possible for the community moderators to check this post. I saw some replies on other latest posts but not on this one :(. Would really appreciate any help.)
thanks

[misterjunio]

@fearnowrath if you need to navigate between pages you probably need the <ons-navigator> element present. With respect to the reference page, if you use jQuery you can target the navigator the jQuery way but you still need to call its methods (I guess that’s the “list of functions” you are looking for?) to actually switch pages. When you push a new page the previous one is not destroyed.

[fearnowrath]

Thanks for your response.
Actually what i mean is, only in some cases, i dont want the pages to be destroyed. I have loaded content using <object> on some pages and when I click on some other page and then come back to the first one, the <object> loads the remote content again. Is it possible to make it not load it in some cases? Also I found about the load functions, they are the functions of <ons-splitter-side>. It also allows passing “options” but what parameters can be passed in the options isn’t mentioned in the docs. https://onsen.io/v2/api/js/ons-splitter-side.html

[Fran Diox]

@fearnowrath Splitter replaces its content by default. The ons-navigator element, however, can keep a stack of pages. Therefore, you can nest a ons-navigator inside the splitter and use its method bringPageTop, which will not destroy the previous page, instead of splitter’s load. There is an example here which uses resetToPage instead of bringPageTop, you need to change that.

Another alternative is providing your own pageLoader to the splitter and thus change the way it loads and unloads pages. This is a bit more advanced, more info here.

[fearnowrath]

Thanks Fran,
Now, I have another problem. I am not able to select anything on a page with a tabbar and a splitter on it. Why is that? Everything is fine. The content is loading and I have both splitter and tabbar on the same page. However, I cannot do anything with the content on that page, ie if there is a text, i cannot select it, if i embed an iframe there, i can do nothing with the iframe(click and scroll etc. are all disabled in that iframe), why is that? This only happens when tabbar is present on the page. If the tabbar is removed, i can select the text and scroll iframe etc, just like on any normal webpage.

Also, right now, I am appending the tabbar using jquery, because our project needs both tabbar and splitter on every page. but even if i use the tabbar html directly on the page, without appending via jquery, i am not able to select.

Could you please help me in this case?

[Fran Diox]

@fearnowrath Probably you are not using the tab bar correctly, so it is “compiling” in a wrong way. Check out tabbar tutorial, and perhaps the ToDo app can also be useful.

[fearnowrath]

Hi Fran,
Thanks for your response.
I found why that is happening . Actually we need the tabbar on all pages, even on pages that are not linked in the tab buttons. So, whenver I open any page by clicking on the splitter menu, but not on the tabbar button, the page doesn’t work. The page will work only if i click on the tabbar and one of the pages from the ons-tab buttons is opened. Why is this happening? what is the solution to this?
Right now, I feel as if making custom tabbars without using ons-tab is the only solution, but I dont want to do that because the design might be inconsistent. What do you suggest to be the ideal way to do it by using ons-tab ?

[Fran Diox]

@fearnowrath Hi! If you are using ons-tabbar in a custom way, I’d recommend you going with the pure CSS solution. You don’t need to make it yourself, simply use the CSS version of ons-tabbar listed in CSS components page. That will not assume any default behavior and you can customize it as you want. The drawback is that it doesn’t change to material design automatically but you can, of course, do that by adding the right CSS classes.

For changing pages, you can simply listen for change event of the inner inputs.

[fearnowrath]

@Fran-Diox WOW thats great, thanks. I think i will have to use that.
For the material design ripple effect when the button is tapped, do you already have any css classes for that? If so, could you please link me to the page?
Also, for my situation that i mentioned earlier, do you think adding a custom tabbar would be the right thing to do rather than using the ons-tab?

I also wanted to add something quickly here, a little unrelated to the topic but still. Is it possible to make the device back button back button(<ons-back-button>) both work for page’s loaded/pushed via either <ons-page>'s load method or <ons-navigator>'s pushpage method? For ons-page(https://onsen.io/v2/api/js/ons-page.html) there is onDeviceBackButton method but no <ons-back-button> option to go back right? And for ons-navigator, there is no option to make the device back button work right?

thanks a lot for your help so far.

[Fran Diox]

@fearnowrath You can add ripple effect by appending <ons-ripple></ons-ripple> component wherever you want.

I’m not sure I understand about the situation you mention, I already said that you can use pure CSS solution instead of using ons-tabbar and ons-tab, and then load pages by calling Splitter’s load method. I think this pattern is not very common but you can do whatever you want in your app, of course.

About the back buttons… I think it is completely different from what you think. ons-navigator is the only component that keeps a page stack, which mean that it can push pages on top of other pages and pop them. Therefore, it also has a ons-back-button to pop pages. This ons-back-button only works for ons-navigator.

Apart from that, several components implement a handler for Android’s back button. These components are ons-navigator, ons-page, ons-splitter-side and all the dialogs. They have a default behavior that can be modified via onDeviceBackButton property. Navigator’s default behavior is popping 1 page, which is the same as pressing ons-back-button. And by the way, ons-page has no load methods, so I’m not sure what you mean. More info about device back button in the guide.