Home Ajax Jquery jQuery Load Content
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

jQuery Load Content

Advertisement
In this section you will learn how to load content of a text file using jQuery and show it on the use browser. This example shows you how to load the content of simple text file and then show on the text box.

jQuery Load Content

     

In this section you will learn how to load content of a text file using jQuery and show it on the use browser. This example shows you how to load the content of simple text file and then show on the text box.

Our jQuery Load Content example will do the following work

  1. Web page is displayed with a button "Load Content" and a blank text box
  2. User clicks on the "Load Content" button.
  3. jQuery loads the context of a text file "testFile.txt" and displays in the text area

After completing this example you will be able to use jQuery to Load the content from server side text file and show it to the user.

Code:

1. HTML Page

Here is the code of "displayContent.html" file

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Show Content</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript"> 
function contentDisp()
{
$.ajax({
url : "textContent.php",
success : function (data) {
$("#contentArea").html(data);
}
});
}

</script> 
</head>
<body>
<table width="100%" border=0>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td width="30%" >&nbsp;</td><td style="color:blue;" width="70%">
Download Content Example</td></tr>

<tr><td>&nbsp;</td><td ><input type="button" value="Click" onClick="
contentDisp();">&nbsp;<span style="color:blue;"></span></td></tr>

<tr><td>&nbsp;</td><td>
<textarea id="contentArea" rows="10" cols="50"></textarea>
</td>
</tr>
</table>
</body>
</html>

 

2. jQuery code in the page

The following jQuery code retrieves the data from server and display in the text area.

function contentDisp()
{
$.ajax({
url : "textContent.php",
success : function (data) {
$("#contentArea").html(data);
}
});
}

3. Content of the text file

Here is the content of the text file:

Welcome to RoseIndia.Net jQuery Tutorials

Learn how you can do a lot of work with small code.

jQuery is here to help us in achieving high result with less coding.

jQuery is great!!!!

4. Program screen shot

Open your browse and type http://localhost/displayContent.html. Your browser should look like:

 

Now click on the "Click" button. The program will fetch the text data from database and display in the text area as shown below:

 

In this example you leaned how to fetch the text data from server and display in the text area.

Try the example online

Learn from experts! Attend jQuery Training classes.

Advertisement

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: September 8, 2008

Ask Questions?    Discuss: jQuery Load Content   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
Rena
July 2, 2011
defEYAbJiBkxUCM

Thanks for the insight. It birgns light into the dark!
gokul
September 14, 2011
html into another html

i need to load a html form in an html file into the center of the layout. kindly help me out.
JOY PAPPY
December 14, 2011
source code missing

Where is the source code for "textContent.php"??
satish
December 17, 2011
doubt

can we load a word document into a webpage using .load() in jquery...............
yamuna
January 16, 2012
jQuery Load Content

where is the textContent.php file?
DJ
February 16, 2012
very good article

very good article
Jez
May 31, 2012
Viewing line by line

The above example works well. Can you show how I can then display each individual line of the text file in a separate html table, rather than in just one table?
DMCA.com