Mixing inline and ajax pages

This is a (multiple allowed):

• bug

• 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

[Danzondo]

I have the same problem

[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.