How to Disable same page load on ons-splitter-side

[Jackson]

Hi,

I need to find a way to disable the same page load on ons-splitter-side.

Baically, I have the following:

<ons-splitter>
  <ons-splitter-side id="menu" side="right" width="220px" collapse >
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('home.html')" tappable>
          Home
        </ons-list-item>
        <ons-list-item onclick="fn.load('settings.html')" tappable>
          settings
        </ons-list-item>
        <ons-list-item onclick="fn.load('about.html')" tappable>
          About
        </ons-list-item>
		
      </ons-list>
	  
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content>
    <ons-navigator id="navi" page="home.html"></ons-navigator>
  </ons-splitter-content>
</ons-splitter>

Baically when I’m on home.html and I cick on the Home button, it reloads the same page which is not what i want.

What i need is that if the page is the same page, I don’t want to reload it.

Is this possible?

Thanks in advance.

[munsterlander]

@Jackson According to the docs (at least what I can find), that would be the expected behavior. Tabbar had an attribute of persistent which you can set to true. Hopefully, one of the dev’s can chime in here and suggest a way to invoke something similar.

[Jackson]

Thanks mate. there must be a way to stop this behavior. in fact this is important as it doesn’t really makes sense to reload the same page if you are already viewing it!

I understand that behavior can be prevented on the tab-bar but unfortunately i don’t use tabbar.

Hopefully someone has some sort of a solution for this as I’m just stuck with my project at the moment because of this issue.

[munsterlander]

@Jackson There is an underlying function _loadPersistentPageDOM, I would be interested to know if it is possible to invoke that somehow. Of note, is that it basically just removes the style attribute. Maybe try that and see what happens, element.removeAttribute('style'), as I am curious to see if that is what is happening underneath in the engine. Normally, I would throw something together but it is 4 am and I just woke up, apologies.

[Jackson]

I did try that but it didn’t really do anything. :(

[Jackson]

ok, I figured out a dirty way!

here it is:

   if(event.target.id=='myPageID') {
   $('#hm').prop('onclick',null).off('click');

///rest of my code////


    }else{
	$("#hm").click(function(){
    fn.load('home.html');
});
}

And that does the job but there must be a better way of doing this… for now, it works and i hope it helps others…

[munsterlander]

@Jackson Glad you got something working! I agree that I would hope there is a better way in the future. Major navigation elements should have a way to be persistent and not be reloaded. This was resolved for tabbar and hopefully it will be expanded to other elements.

[Fran Diox]

@munsterlander What do you think about this PR? :joy:
Note the change in line 71 -> 46.

[munsterlander]

@Fran-Diox HA! Got me right in the feels. Doing what you knew I was thinking! Awesome!

[jcdenton]

@Fran-Diox Is this merged in the latest rc (.rc17) version? Because in my project ons-splitter still reloads the same page when selected from the side menu.

Thanks

[Fran Diox]

@jcdenton Oh no, that PR was closed. We decided to keep Splitter simple instead.
Your issue can be fixed with basic javascript, just record the page you are loading and check every time you click on a menu item if that page is already loaded or not.

If what you want is to have persistent pages, then you can combine splitter with navigator, as explained here.

[jcdenton]

@Fran-Diox ok thanks! Will check it out.