Framework7: Mixing inline and ajax pages

[Hexodus]

This is a (multiple allowed):

• [ ] bug
• [x] enhancement
• [ ] feature-discussion (RFC)

• Framework7 Version: 1.5.2
• Platform and Target: Phonegap Desktop, Browser

What you did

I have a single view with one inline page inside and a couple of ajax pages. To activate the hash navigation I set: domCache: true

Expected Behavior

I expected that the ajax pages wouldn't be loaded any more as soon as they are cached AND the cached page will be shown. Mixing Ajax and inline pages should be possible.

Actual Behavior

The cashed page remains in DOM and the ajax page is also loaded. The bad thing about it is that it results in duplication of id's - the code picks the cached page (which is the first in dom) but the fresh loaded page is the one being displayed.

The DOM after first ajax-questions-page loading:

<div class="views">
    <!-- view -->
    <div class="view view-main" data-page="questions">
        <div class="navbar">...</div>
        <!-- Pages container -->
        <div class="pages navbar-fixed toolbar-fixed">
            <!-- questions is the ajax page questions.html -->
            <div data-page="questions" class="page page-on-left">...</div>
            <!-- this is my inline page -->
            <div data-page="index" class="page page-on-left">...</div>
        </div>
        <!-- /pages -->
    </div>
    <!-- /view -->
</div>

The DOM after second ajax-questions-page loading:

<div class="views">
    <!-- view -->
    <div class="view view-main" data-page="questions">
        <div class="navbar">...</div>
        <!-- Pages container -->
        <div class="pages navbar-fixed toolbar-fixed">
            <!-- questions is the ajax page questions.html -->
            <div data-page="questions" class="page page-on-left cached">...</div>
            <!-- this is my inline page -->
            <div data-page="index" class="page page-on-left">...</div>
            <!-- this shouldn't be happening -->
            <div data-page="questions" class="page page-on-center">...</div>
        </div>
        <!-- /pages -->
    </div>
    <!-- /view -->
</div>

So what's happening is the duplication of the ajax loaded page after the second loading. The cached version isn't being used or being displayed. Mixing inline- with ajax pages isn't obviously working. But it would be great if it would.

Best,
Adrian Maleska

[dawuwu]

I have the same problem

[valnub]

Hi, the settings name domCache might be missleading. From what I understand, enabling it will only activate the ability to embed pages into the DOM without using Ajax Pages feature. It has nothing to do with caching pages, I think.

[ZanderBrown]

@valnub that's my interpretation of the docs however given the name it is definitely a little misleading

[Hexodus]

@valnub You conclusion might be right but it's not a solution for the given problem which is: using inline pages together with ajax pages - this is a very common scenario and a problem for everybody with F7.

[ZanderBrown]

So you have page x stored in the DOM and page x.html which contains the same page and is being loaded over ajax?

[valnub]

I don't think this is a bug. As far as I know, F7 currently only supports using either Ajax pages _or_ cached pages, not both at the same time.

This might rather be a feature request.

[ZanderBrown]

@valnub that was my thinking. Hence my request for clarification

[Hexodus]

@valnub The docs aren't that clear about this topic IMO otherwise I wouldn't even try to mix it. But I agree to change this issue from but to feature request.

@ZanderBrown Actually I have page x in DOM and load y.html over ajax. I end then in having x in the DOM, y.html cached and y.html loaded over Ajax - but the y.html cached version isn't even being used/displayed.

[ZanderBrown]

@Hexodus slightly confused here. Have you got a repo/gist we can take a look at?

[Hexodus]

@ZanderBrown I created a repo to show this behavior:
Repo: F7-Mixing-inline-and-ajax-pages

And for clarification here's a Gif Animation showing what happens. In short the dom is growing because the cached ajax pages aren't being reused.

[hellofarhan]

Same problem here

[Hexodus]

Someone posted on Stackoverflow a possible workaround. Unfortunately I had no time to check it. In the case someone wants to give it a try:

Stackoverflow possible workaround

[Danmoreng]

I have the same issue:
using some inline pages and most pages over ajax. Cache set to be false, domCache set to be true.

Ajax pages are in domCache and therfor I have problems because I use html ids in the ajax pages...

My workaround:

onPageInit:

$$('.cached').each(function(){
    var pageName = $$(this).data('page');
    if(pageName === page.name){
         $$(this).remove();
    }
});

This removes the cached ajax page from the dom, right before I insert the newly loaded one and my scripts which need the unique ids runs. It's not very elegant, but it works.

[lancewalk87]

Has anyone figured this out yet?

[nolimits4web]

Issue is closed because of outdated/irrelevant/not actual

If this issue is still actual and reproducible for latest version of Framework7, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue