What is the best way to load dynamic page in a view?

[gpetrov]

Hi Vlad,

Compliments about your Framework7! It looks amazing!

Just one question about loading dynamic pages in a view.

We would like to load a page that is initially empty with loader, that kicks off an Ajax call to load its content. When content arrives the page should be emptied and the loader replaced with the real content. Preferably afterwards we would like also to implement a pull to refresh.

What will be the best way to do so? Currently if the page is initially empty and then content is loaded with loadContent it becomes another page .. so the back button returns to the loader page instead of replacing the current...

Thanks,
George

[nolimits4web]

Thanks, George.
You should not do loadContent again, you just need to replace content manually. For example:

You have some page with loader:

<div class="page" data-page="page-with-preloader">
  <div class="page-content"> .. just preloader here ...</div>
</div>

When page is loaded you do custom Ajax request and just replace page content with new one:

$$(document).on('pageAfterAnimation', function(e){
  var page = e.detail.page;
  if (page.name == 'page-with-preloader') {
    //Make custom Ajax request
    $$.get('something', function (data) {
      //And replace page-content
      $$(page.container).find('.page-content').html(data)
    })
  }
})

So you don't need at all to load another page, do everything here

[nolimits4web]

Closing as seems to be solved

[imaxwen]

I think if the view.router had an API like replaceContent(with page name parameter) would be better.

for example:

var popupView = null;
var cachedUrl = '';
// pop-up tool
function loadPopupPage(pageUrl) {
    if( cachedUrl != pageUrl ) {
        $$.get(pageUrl,function(pageContent){
            $$('.popup-view').find('.page-content').html(pageContent);
        });
    }
    cachedUrl = pageUrl;
    myApp.popup('.popup-view');
}

I need to handle the cache myself, if the view.router provides replaceContent API. so that I can handle the cache via myApp 's cacheDuration option.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.