Articles in this section
Category / Section

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

2 mins read

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

<div align="center">

<input type="button" id="btn" data-ej-touchend="loadPage" data-ej-text="Go to Ajax page" />

<script>

function loadPage() {

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

}
</script>

CSHTML

<div align="center">

<input type="button" id="btn" data-ej-touchend="loadPage" data-ej-text="Go to Ajax page" />

<script>

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 align="center" style="top: 20px; position: relative;">

<a id="btn" data-ej-appajax="false" href="navpage.html">Go to Next page</a>

</div>

CSHTML

<div align="center" style="top: 20px; position: relative;">

<a id="btn" data-ej-appajax="false" href="/home/navpage">Go to Next page</a>

</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

<div align="center" style="top: 20px; position: relative;">

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

</div>

CSHTML

<div align="center" style="top: 20px; position: relative;">

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

</div>

 

Conclusion

I hope you enjoyed learning about how to load the online and offline page content using Mobile JS.

You can refer to our JavaScript Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.  You can also explore our JavaScript Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied