How to load the online and offline page content using Mobile JS?

Platform: jQuery |

Control: General

Tags: general, mobile

You can load online and offline page content in Mobile JS framework. The following methods help you achieve this.

For Offline Content:

You can load the offline page content in two ways, that is by using with Ajax call or without Ajax call, that is explained as follows.

Option 1: With Ajax Call

To load the offline content with Ajax call, you have to set the page url as the second parameter of the App.pageTransfer method as shown in the following code example. Here it’s given as ajax.html for JS and /home/ajax for MVC.

HTML

function loadPage() {

App.transferPage(App.activePage, "ajax.html");

}
</script>

CSHTML

function loadPage() {

App.transferPage(App.activePage, "/home/ajax");

}
</script>

Option 2: Without Ajax Call

To load the offline content without Ajax call, you can set the page url as href in the anchor link tag and set data-ej-appajax attribute as False. Here it is given as navpage.html for JS and /home/navpage for MVC. Refer to the following code example.

Note:

When you are doing this, you cannot achieve transition effect while transferring from one page to another, since the transition effect is applicable only for Ajax content loading.

HTML

</div>

CSHTML

</div>

For online content:

You cannot load the online page content by using the transferPage API, because it is completely handled with AJAX. However, you can achieve this by disabling the ajax feature with the anchor link while using the MobileJS source files.

To load the online content without Ajax call, you can set the page url as href in the anchor link tag and set the data-ej-appajax attribute as False. Here it is given as http://www.google.com. Refer to the following code example.

Note:

As already mentioned in the method for offline content without Ajax call, you cannot achieve transition effect while transferring from one page to another, as it is applicable only for Ajax content loading.

HTML

<a id="btn" data-ej-appajax="false" href="http://www.google.com">Go to Google page</a>

</div>

CSHTML

<a id="btn" data-ej-appajax="false" href="http://www.google.com">Go to Google page</a>

</div>

Did you find this information helpful?

CONTACT US

How to load the online and offline page content using Mobile JS?

For Offline Content:

Option 1: With Ajax Call

Option 2: Without Ajax Call

For online content:

Please sign in to access our KB

CONTACT US