blog

4 Ways To Use jQuery Load in Your Website

1. Read Text File Data of A Small Factory

Text File content with jQuery Load

Text files are the simplest ways to store information. For example, in small factories, every labour’s information is stored in separate text files. All these text files are uploaded on the web server so that the company’s administrators can access them over the internet.

A web developer’s work here, would be to show the labours information in a web page. For this, the developer can simply create a web page, add few divs which will show this information. Then, make an jquery ajax call to these text files using jquery load method. Finally, showing the information inside these divs.

The Code

<script>
    $(document).ready(function () {
        $("#labour").load("Michael-James.txt", function (response, status, xhr) {
            if (status == "error")
                $("#textData").html
        });
    });
</script>

Explanation – In the above web page, we are showing a labour’s (named “Michael James”) information inside a div (with id “labour”). We are calling the jQuery Load method to read the “Michael-James.txt” file. This text file contains the information about the labour.

The jQuery Load method searches this text file in the same folder where the web page is kept.

If the text files are kept in some other location, then give its relative path to the jQuery Load method.

Example – If the text file is kept inside a folder “labourFolder” (which is kept in the root), the jQuery Load syntax will look like:

$("#labour").load("/labourFolder/Michael-James.txt", 
function (response, status, xhr) {
    if (status == "error")
        $("#textData").html
 });

2. Get Product Information and Prices from JSON

JSON File content with jQuery Load

In the ecommerce world, distributed applications communicate with each other to get updated product prices and information. For example – a big distributer stores the current prices of the products in a JSON file.

This file is very small in size and is sent to the small shop keeper & partners to their email address. Through this JSON file, they can know about the current prices of the distributer’s products.

The job of a web developer, working for the shop keeper, can use the jQuery Load method to fetch this JSON and show the contents inside a web page. This makes it easy for the shop keepers to find out the current prices of the products. (Note that the JSON format is not understandable for a common man).

The Code

<button id="productButton">Try</button>
<div id="productJsonDiv"></div>
<div id="productHtmlDiv"></div>
$("#productJsonDiv").load
("product.json", function (response, status, xhr) {
    $(".displayPara").css("display", "block");
    var json = JSON.parse($("#productJsonDiv").html());
    var table = $("<table><tr><th>Product</th>
    <th>Color</th><th>Price</th></tr>");
    var tr;
    for (var i = 0; i < json.length; i++) {

        tr = $("<tr>");
        tr.append("<td>" + json.Product + "</td>");
        tr.append("<td>" + json.color + "</td>");
        tr.append("<td>" + json.Price + "</td>");
        tr.append("</tr>");
        table.append(tr);
    }
    table.append("</table>");
    $("#productHtmlDiv").html(table);
    if (status == "error")
        $("#textNoData").html
        ("Error: " + xhr.status + ": " + xhr.statusText);
});