List, with data from AJAX, disappears on Back button


#1

I have a link list, that’s populated from AJAX on Routes level by async() functon.
Each link leads to another component page, that’s also read from AJAX, defined on routes level.
Both things work just fine, however, upon taping back from the last view, the list all of a sudden just disappears and the page is left blank with only the navbar displayed on top.
This happens only on MD devices, and cannot be reproduced on iOS or Chrome emulators.

Is there something wrong with my app logic, or it’s just some parameters missing in my router/component page?


#2

Tried to add following options to app.js file, but obviously they are not the ones to help in this case.

var libraryView = app.views.create(’#view-library’, {
url: ‘/library/’,
domCache: false,
stackPages: true
});


#3

Disabled the searchbar and the AJAX-populated list does not disappear anymore.
This issue occurs for both - expandable and static search and only on Material Design (Android).


#4

Do you have a live example or JSFiddle where i can see this issue?


#5

Both AJAX sources are behind the user auth, so I’m affraid I won’t be able to provide a working JSFiddle.
Here are some blocks of my code, if it helps:

routes.js

Library - the list of items, retreived via AJAX;

{
path: ‘/library/’,
async(to, from, resolve, reject) {
app.preloader.show();
var url2 = “https://myintranetsite.com/library/_api/web/lists/GetByTitle(‘MyList’)/items?$select=Id,Title,File/ServerRelativeUrl,RevisionNo,RevisionDate&$expand=File&$top=20”;
app.request( {
url: url2,
dataType: ‘json’,
type: “get”,
crossDomain: true,
headers: { “Accept”: “application/json; odata=verbose” },
statusCode: {
404: function(xhr) {
console.log(‘page not found’);
}
},
complete: function() {
console.log(‘complete’);
},
success: function(response) {
app.preloader.hide();
resolve(
{
componentUrl: ‘./pages/library.html’,
},
{
context: {
products: response.d.results,
},
}
);
},
error: function() {
console.log(‘error’);
}
});
},
}

View-document - the component to view the item, with included pdf.js in iframe.

{
path: ‘/view-document/:first’,
async(to, from, resolve, reject) {
app.preloader.show();
var url2 = “https://myintranetsite.com/library/_api/web/lists/GetByTitle(‘MyList’)/items("+to.params.first+")?$select=Id,Title,File/ServerRelativeUrl&$expand=File”;
console.log("HMM "+url2)
app.request( {
url: url2,
dataType: ‘json’,
type: “get”,
crossDomain: true,
headers: { “Accept”: “application/json; odata=verbose” },
statusCode: {
404: function(xhr) {
console.log(‘page not found’);
}
},
complete: function() {
console.log(‘complete’);
},
success: function(response) {
app.preloader.hide();
resolve(
{
componentUrl: ‘./pages/view-document.html’,
},
{
context: {
documents: response.d,
},
}
);
// console.log(context)
},
error: function() {
console.log(‘error’);
}
});
},
},

Components

Library view - a list of all the items (corresponds to the first route above).

<template>
  <div class="page cached" class="page" data-name="library">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="title">Library</div>
<div class="right">
        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-demo">
          <i class="icon f7-icons ios-only">search_strong</i>
          <i class="icon material-icons md-only">search</i>
        </a>
      </div>
      <form data-search-container=".search-list" data-search-in=".item-title" class="searchbar searchbar-expandable searchbar-demo searchbar-init">
        <div class="searchbar-inner">
          <div class="searchbar-input-wrap">
            <input type="search" placeholder="Search"/>
            <i class="searchbar-icon"></i>
            <span class="input-clear-button"></span>
          </div>
          <span class="searchbar-disable-button">Cancel</span>
        </div>
      </form>
      </div>
    </div>
    <div class="page-content">
	<div class="searchbar-backdrop"></div>
      <div class="list media-list search-list searchbar-found">
        <ul>
          {{#each products}}
			<li>
          <a href="/view-document/{{ID}}/" class="item-link item-content search-list searchbar-found">
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">{{Title}}</div>
              </div>
              <div class="item-subtitle">Rev.: {{RevisionNo}} | Rev.date: {{formatdate RevisionDate}}</div>
            </div>
          </a>
        </li>
          {{/each}}
        </ul>
      </div>
    </div>
	<div class="list simple-list searchbar-not-found">
      <ul>
        <li>Nothing found</li>
      </ul>
    </div>
  </div>
</template>

Document view (with pdf.js in iFrame).
Tapping “Back” from this view, results into blank list view of previous component above.

<template>
  <div class="page" data-name="library">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">Back</span>
          </a>
        </div>
        <div class="title">{{documents.Title}}</div>
      </div>
    </div>
	<div class="pages">
  <div class="page" data-page="pdfviewer">
    <div class="page-content">
	<div id="container">
	<iframe id="theFrame" src="/test/f1/web/viewer.html?file=https://myintranetsite.com{{documents.File.ServerRelativeUrl}}" style="width:100%;height:100%;"></iframe>
	</div>
    </div>
  </div>
   </div>
  </div>
</template>
<style>
      #container { overflow: auto; -webkit-overflow-scrolling: touch; height: 100%; }
</style>

#6

Does someone have any clue, what am I doing wrong in this case?