Dynamic Content Loading Plugin With jQuery - ViaJS

ViaJS is a lightweight, jQuery dependent JavaScript library which allows to dynamically load external html content into your webpage without reloading the current page. Based on XMLHttpRequest web API.

See also:

• Dynamically Load Content Into A Container with jQuery

How to use it:

1. Load jQuery library and the jQuery ViaJS' JavaScript in your html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="lib/app.js"></script>

2. Add the via-views attribute to DIV containers where you want to fetch and place external content.

<div class="container" id="title" via-views>Title</div>
<div class="container" id="content" via-views>Content</div>

3. Specify the URLs you want to load into the DIV containers.

var views = {
    home: [{
      selector: "#title",
      templateUrl: 'title.html'
    }, {
      selector: "#content",
      templateUrl: 'content.html'
    },
    ],
    defaultView: {
      view: 'home'
    }
};

4. Create an anchor link that will fetch and insert the html files as displayed above into to the 'title' and 'content' containers.

<a via-link via-href="home">Home</a>

5. Initialize the ViaJS and done.

new Via(views);

---

This awesome jQuery plugin is developed by abdi0987. For more Advanced Usages, please check the demo page or visit the official website.