Load External File to an HTML Element Asynchronously using jQuery

Shinuraj
13y
24.4k
0
0

Article

Here I have used the jQuery AJAX method load() to show the external text file content to a DIV element.

Here is the load() method syntax:

$(html element).load(url,data,callback)

url: specify the path

data: use the data parameter to data to server

callback : to trigger a function after completion

Try out the below code to get more idea about this functionality.

Step 1: Place a text file in the root (say 'SampleText.txt') and add some content.

Step 2: Add this in the Head section.

   <script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $("button").click(function(){
        $("div").load('SampleText.txt',success);
      });

    function success()
    {
    alert("data loaded successfully");
    };
    });
    </script>

Step 3: Add this in the body section

<body>
<div>
<h2>Click on the below button to load the content from external text file</h2></div>
<button>Load Content</button>

</body>

PFA the working application !!

Thanks
Shinu