Ajax Pages

Now, when we have our App structure with Views and Pages we need to understand how we can create and load new pages using Ajax in Framework7.

Here is important rule that you should remember:

By default Framework7 will load all links using Ajax, except links with additional external class (<a href="somepage.html" class="external">) and links with not correct href attribute (when it is empty or #).

This behavior could be changed by passing ajaxLinks parameter on App initialization

So it is seems to be simple and if we want to create link to page which is in about.html file we just need to write usual <a> tag:

<a href="about.html">Go to About page</a>

When we click on this link, Framework7 will send Ajax request to about.html, parse it, insert to DOM and run animated transition to this new page.

Internal file structure with Page

Because Framework7 has pretty smart parser we don't need full HTML layout (with HTML head, body, views, pages, etc.) in internal pages. Let's look on the structure of this internal about.html file:

<!-- That is all we have in about.html file -->
<div class="page" data-page="about">
  ... About page content goes here
</div>

The point is that Framework7's parser will try to find only <div class="page"> element in Ajax loaded page, so we don't need here full HTML layout, just the page. This is not restriction and, of course, if you need here full HTML layout it will also work fine.

Internal file structure with few Pages

Here is a bit complex situation. For example, we have two (or more) initialized Views with separate navigation. In our index file:

<body>
  ...
  <!-- Views -->
  <div class="views">
    <!-- Left view -->
    <div class="view view-main left-view">
      <!-- Navbar-->
      <!-- Pages -->
        <a href="about.html"> About </a>
      <!-- Toolbar-->
    </div>
    <!-- Right view -->
    <div class="view right-view">
      <!-- Navbar-->
      <!-- Pages -->
        <a href="about.html"> About </a>
      <!-- Toolbar-->
    </div>          
  </div>
  ...
</body>

As you see we have two views here (Left view and Right view), and both views have link to about.html file. And of course, we need to have different content when we click in different views.

Let's look how about.html should look in this case:

<!-- Left view -->
<div class="view view-main left-view">
  <div class="page" data-page="about-right">
    ... This page will be loaded when you click about.html link from Left view ...
  </div>          
</div>
<!-- Right view -->
<div class="view right-view">
  <div class="page" data-page="about-right">
    ... This page will be loaded when you click about.html link from Right view ...
  </div>          
</div> 

The main point here is that page for speific View should be wrapped with <div class="view"> with the same classes as in main layout. It will help Framework7 to recognize which page is for which view.

Internal file structure with Dynamic Navbar

Such structure is supported only in iOS Theme

As you may see in Nabvar & Toolbar layout types dynamic navbar requires through-type layout. But in this layout type navbar is not inside of page. So here is where we need to put it in about.html file:

<div class="navbar">
  ... Navbar content goes here
</div>
 
<div class="page" data-page="about">
  ... About page content goes here
</div>

The point is that we just need to put navbar with is content near with page. And if you need to have here few pages with different navbars, just wrap them both (page and navbar) with appropriate views like in previous example.

Going back in navigation

Ok, we already know how to load pages, but how can we get back to the previous page with reverse transition.

It is actually super easy, all we need is just to add back class to link. Here is the structure of about.html page with back link to home index.html page:

<div class="page" data-page="about">
  <!-- Just add additional "back" class to link -->
  <a href="index.html" class="back"> Go back to home page </a>
</div>

Here are few important notes about href attribute in "back" links:

  • If there are pages in navigation history Framework7 will always ignore url in "href" attribute

  • If there are no pages in navigation history (for example, when you have "back" link on first home page) Framework7 will load page from "href" attribute

  • This behavior can not be changed because user always expect to get previous page when he clicks on "back" link, not something else.

As you see href attribute is not required for "back" link, but try to keep it there for fallback.

Swipe back

This feature is available only in iOS Theme

If you have enabled "swipeBackPage" App parameter then you can also go to previous page by swiping from left to right from the left edge of the screen. But sometimes you may need to disable this behavior for some specific pages. In this case you may add additional no-swipeback class:

<div class="page no-swipeback">
    ...
</div>             

Load pages / Go back with/out animation

Sometimes we may need to load new page or go back immediately, without animated page transition. For this case we may set "noAnimate" global View or App parameter.

But if we need it in some particular case then we may just add addional "no-animation" class to link (or back link):

<div class="page" data-page="about">
  <!-- Add additional "no-anmation" class to link to disable animated page transition -->
  <a href="about.html" class="no-animation"> Load About page immediately </a>
 
  <!-- The same rule for back link -->
  <a href="index.html" class="back no-animation"> Go back immediately </a>
</div>

And if we disabled animation globally and need to enable it for particular case, we may enable it by adding "with-animation" class to link (or back link)

<div class="page" data-page="about">
  <!-- Add additional "with-anmation" class to link to enable animated page transition -->
  <a href="about.html" class="with-animation"> Load About page with animation </a>
 
  <!-- The same rule for back link -->
  <a href="index.html" class="back with-animation"> Go back with animation </a>
</div>

Load pages using additional navigation options

And sometimes we may need to have more controls on navigation with links. We may use all available options from View Navigation Methods as data- attributes, for example:

<!-- Refresh currently active page (reload from server) -->
<a href="about.html" data-reload="true" data-ignore-cache="true">Refresh page</a>
 
<!-- Go back but to another page, not to actual previous page in history. Such method also allows to jump back in history: -->
<a href="about.html" class="back" data-force="true">Back to About</a>
 
<!-- Load new page without animation -->
<a href="about.html" data-animate-pages="false"></a>          

Note that such attributes should be used in hypens-case instead of camelCase:

  • animatePages - data-animate-pages
  • ignoreCache - data-ignore-cache
  • contextName - data-context-name
  • reloadPrevious - data-reload-previous

Load pages using JavaScript

It is possible to load page from HTML files using JavaScript API, not only using <a> tags. For this case we may use .router.loadPage(url) View Navigation Methods:

// Initialize App  
var myApp = new Framework7();
        
// Initialize View          
var mainView = myApp.addView('.view-main')          
        
// Load page from about.html file to main View:
mainView.router.loadPage('about.html');

Note, that it is only possible for Views that were initialized

Going back using JavaScript

You can also get the same as when you click "back" link but with JavaScript using .router.back() View Navigation Methods:

// Initialize App  
var myApp = new Framework7();
        
// Initialize View          
var mainView = myApp.addView('.view-main')          
        
// Go back on main View
mainView.router.back();

It is also possible only for Views that were initialized

Conclusion

As you may see linking and navigation in Framework7 is pretty simple, all you should remember is that:

  • you need to use usual <a> tags with plain "href" attribute that contains url of required file with page

  • it is not required to have full HTML layout in pages loaded with Ajax. Just put there <div class="page"> (and <div class="navbar"> in case of Dynamic Navbar)

  • if you need to have few pages in single file - wrap them with <div class="view"> with appropriate classes for each view

  • just add "back" class to any link (<a href="index.html" class="back">) to make it work like "back" link

What's next

Let's look at how to make linking between Views