In this Tutorial we will show you how to Display the text data which is there in some text file say (mytext.txt) in the Browser on click of the button.
Step 1: Create a text file with name as mytext.txt
Step 2:Copy the below content in the text file
Hi!!! Welcome to the World of JQuery Programming!!
How do you Feel about JQuery?
Seems to be working Great right!!?
Keep Going!!!
Step 3: Create a HTML page say loadcontent.html and copy the below code in that file
LoadContent Example Using Jquery
<html >
<head>
<title>LoadContent Example Using Jquery</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
function Displaycontent()
{
$.ajax({
url : "textContent.php",
success : function (data) {
$("#contentArea").html(data);
}
});
}
</script>
</head>
<body>
<table width="100%" >
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td width="20%" > </td><td style="color:Yellow;"
width="60%">
see How Jquery Works</td></tr>
<tr><td> </td><td ><input type="button" value="Load Content"
onClick="
Displaycontent();"> <span
style="color:Yellow;"></span></td></tr>
<tr><td> </td><td>
<textarea id="contentArea" rows="6" cols="100"></textarea>
</td>
</tr>
</table>
</body>
</html>
|
Explanation:
Code Part 1:
function Displaycontent()
{
$.ajax({
url : "textContent.php",
success : function (data) {
$("#contentArea").html(data);
}
});
}
This Part of JQuery code retrives the Data from the Server and displays it in the text area
The Remaining part of the code deals with the creation of table and text area which is related to HTML concepts so i am not explaining those things here.
No comments:
Post a Comment
Please Provide your feedback here