Home

Adding event handlers

JQuery loadJSON plugin enables you to attach event handlers that will be called before or after the JSON content is loaded into the template. In the initialization call you can define onLoading and onLoaded functions that will be called before and after json is loaded.

Live Example

In this example, JSON array will be loaded into the table template. Before we load the JSON, we will hide the table so user will not see initial blank template. When table is loaded, table will be shown using the fadding effect.

Additionally, you cna put any other code in these functions. In this example, after the table is loaded I have applied DataTables plugin that adds client side sorting and filtering.



NameAddressTown



Implementation

In this example is placed template that can be used to load array into the table. The table template is shown below:

        <table id="myTable" class="display">
            <thead>
                <tr>
                    <th>Name</th><th>Address</th><th>Town</th>
                </tr>
            </thead>
            <tbody>
                <tr> 
                    <td><a href="details.html" class="ID"><span class="Name"></span></a></td>
                    <td><span class="Address"></span></td>
                    <td><span class="Town"></span></td>
	            </tr>
            </tbody>
        </table>
    

JSON array is same as in the list example:

[
    {
	    "ID": 17,
        "Name": "Emkay Entertainments",
        "Address": "Nobel House, Regent Centre"
    },
    {
        "ID": 18,
        "Name": "The Empire",
        "Address": "Milton Keynes Leisure Plaza"
    },
    {
        "ID": 19,
        "Name": "Asadul Ltd",
        "Address": "Hophouse"
    },
    {
        "ID": 20,
        "Name": "Star Records",
        "Address": "St Danny Street"
    },
    {
        "ID": 21,
        "Name": "Ashley Mark Publishing Company",
        "Address": "1-2 Vance Court"
    }
]
	

This array contains elements with properties ID, Name, and Address that will be bound to the elements in the HTML template.

When JSON is loaded into the template, we have two functionas that will be called before JSON is loaded (onLoading), and after JSON is loaded (onLoaded). Example of the code is shown below:

    	    $(document).ready(function () {
    	        $('tbody tr').loadJSON('list.js', {
                    onLoading: function () {
    	                $("table#myTable").hide();
    	            },
    	            onLoaded: function () {
    	                $("table#myTable").dataTable({sPaginationType: "full_numbers"}).fadeIn("slow");;
    	            }
    	        });
    	    });