Loading pages using jQuery and preventing destroying of pages
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, 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.)
@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.
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
@fearnowrath Splitter replaces its content by default. The
ons-navigatorelement, however, can keep a stack of pages. Therefore, you can nest a
ons-navigatorinside 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
bringPageTop, you need to change that.
Another alternative is providing your own
pageLoaderto the splitter and thus change the way it loads and unloads pages. This is a bit more advanced, more info here.
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?
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 ?
@fearnowrath Hi! If you are using
ons-tabbarin 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-tabbarlisted 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
changeevent of the inner inputs.
@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.
@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-tab, and then load pages by calling Splitter’s
loadmethod. 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-navigatoris 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-buttonto pop pages. This
ons-back-buttononly works for
Apart from that, several components implement a handler for Android’s back button. These components are
ons-splitter-sideand all the dialogs. They have a default behavior that can be modified via
onDeviceBackButtonproperty. Navigator’s default behavior is popping 1 page, which is the same as pressing
ons-back-button. And by the way,
loadmethods, so I’m not sure what you mean. More info about device back button in the guide.