JQuery Load Text File

From CoderLearner
Jump to: navigation, search

jQuery $.load() to load content

The $.load() method uses to fetch content into a match element.

Note

The $.load() method is obsolete, you need to use $.ajax(),$.post(), or $.get() method.

Syntax

$("div.text1").load("fruits.txt");	

Example 1

fruits.txt is the file content.

<!DOCTYPE html>
<html>
	<head>
		<title>Load Text</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery.min.js">
		</script>
		<script>
			$(document).ready(function(){
				$("div.text1").load("fruits.txt");
			});
		</script>
	</head>
	<body>
   		   <div class="text1"></div>
	</body>
</html>

Example 2

You need to create: car.txt, pet.txt, fruit.tx, category.txt and with the respectively content.

<!DOCTYPE html>
<html>
   <head>
      <title>First Project</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script language="javascript">
         $(document).ready(function(){
            $('#changeit').click(function(){
               var sel_value = $('select[name="filename"] option:selected').val();
               $('#content').load(sel_value+'.txt');
            });
         });
      </script>
   </head>
   <body>
      <select name="filename">
         <option value="car">Car</option>
         <option value="pet">Pet</option>
         <option value="fruit">Fruit</option>
         <option value="catory">Category</option>
      </select>
      <button id="changeit">Change It</button>
      <div id="content"></div>
   </body>
</html>

Try It

<seo metagenerator="jquery tutorial" title="Jquery/Ajax" metakeywords="jquery greater,jquery gt, jquery lt, less then, odd jquery,jquery find element, even jquery,jquery event, jquery mouse click, jquery double click, jquery hover, jquery string, jquery array, jquery button, jquery attriubtes" metadescription="jquery button, jquery attriubte, jquery example, jquery tutorial, jquery sample"/>