Building single page applications easily with cowhite.js


In this tutorial, I will explain you how to build single page applications easily using cowhite.js.


Opensource code at github -

Documentation at

Download link of cowhite.js - (Dont embed this link in website, instead download and use)

What is Cowhite.js ?

Cowhite.js is a small jquery library that we developed to make our work easier. We have built the following features in Cowhite.js:

1. Build single page applications(spa)
2. Submit forms  
3. Button actions

1. Build single page applications(spa):

Lets say we are building a single page application where we have the urls which when opened, load the main content without re-loading staticfiles etc. Let these pages be page1, page2 and page3. Then the urls will be of the format:

To make this work, we need to add below html:

<div id='page1-section' class='each-section hide' >
    <p>Page 1 content here</p>
<div id='page2-section' class='each-section hide' >
    <p>Page 2 content here</p>
<div id='page3-section' class='each-section hide' >
    <p>Page 3 content here</p>

Then, if you open the url, then the content inside page1-section will be visible.

2. Load and insert data automatically from remote url:

In the previous example, we are simply switching between pages/sections and then the static content present inside each page/section is displayed. Here, we will show how to load data from remote url automatically, that is, without writing code for loading content.

<div id='page1-section' class='each-section hide'  data-url="">
<div id='page1-content'></div>

Whenever a page/section is loaded, it will look for data attribute "url", that is, data-url. And then will make an ajax call to that url and inserts the result into the html element with id "page1-content". Here page1 is the page name/hash name with section id as "page1-section". This is useful when you simply want to load some remote html when loading a page.

3. Load data from remote url automatically but render that content to the dom manually:

This is useful when the response is JSON/XML but not html. You need to write a callback and then add the data attribute data-callback to the section like below:

    <div id='page1-section' class='each-section hide'  data-callback="loadPage1Callback" data-url="">
        <div id='page1-content'></div>

Code for callback in javascript:

function loadPage1Callback(res){
  var html = "", $page1ItemHtml = $("#page1-template"), page1ItemHtml;
  for(var i=0; i<res.results.length; i++){
    page1ItemHtml = $page1ItemHtml.html().replace(/ITEM_ID/g, res.results[i].id).replace(
      /ITEM/g, res.results[i].name);
    html += page1ItemHtml;
    html += "<div>No items yet.</div>"

4. Load content/data manually:

There may be situation when you want to do things on your own when a particular page is loaded. Then we can use the events fired when a page is loaded.

If the page with hash "page1" is loaded, then the event fired is "page1-opened".

We can write html like this:

     <div id='page1-section' class='each-section hide' >
         <div id='page1-content'></div>

Write code in javascript that catches the event "page1-opened" that cowhite.js fired

$(document).on("page1-opened", function(){
    // write code here    
   // For example, you can make ajax call to some url and insert that response to the dom(any element as you wish)

You can look more of the documentation at


Recent Posts






RSS / Atom