Home Ajax Jquery jQuery to Show Data Randomly

Related Tutorials


 
 

Share on Google+Share on Google+

jQuery to Show Data Randomly

Advertisement
In this first jQuery tutorial we will develop a simple program that Show Data Randomly from server and displays on the user browser.

jQuery to Show Data Randomly

     

In this first jQuery tutorial we will develop a simple program that Show Data Randomly  from server and displays on the user browser. In this example we will be calling a server side PHP script to get the Random Data. You can easily replace PHP with JSP, or ASP program.

Steps to develop the Data Show Randomly

Step 1:

 

 

 

 

Create php file to that prints the current server data. Here is the code of PHP script (time.php).

<<?php
header("Cache-Control: no-cache");

$prefix = array('P1','P2','P3','P4');
$suffix = array('S1','S2','S3','S4');
// This selects a random element of each array
echo $prefix[rand(0,count($prefix)-1)] . " Related To  " 
. $suffix[rand(0,count($suffix)-1)];

?>

Step 2:

Write HTML page to call the script.php. Create a new file (randomArray.html) and add the following code into it:

<html>
	<head>
		<title>AJAX with jQuery Example</title>
		<script type="text/javascript" src="jquery.js"></script>
		<style type="text/css">
		#wrapper {
			width: 240px;
			height: 80px;
			margin: auto;
			padding: 10px;
			margin-top: 10px;
			border: 1px solid black;
			text-align: center;
		}
		</style>
	</head>
	<body>
		<div id="wrapper">
		<script type="text/javascript">
		$(document).ready(function(){
			$("#random").click(function(){
				$("#quote p").load("script.php");
			});
		});
		</script>
		<input type="submit" id="random" value="OutPut!"><br />
		<div id="quote"><p></p></div>
		</div>
	</body>
</html>

Program explanation:

The following code includes the jQuery JavaScript library file:

<script type="text/javascript" src="jquery.js"></script>

The code

$("#random").click(function()

When we click on the Ouput Button.

makes load the  to script.php file.

Following code intercepts the ajax call success and then sets the data into "quote" div:

s$("#quote p").load("script.php")(

........

}

When you run the program in browser it will look like following screen shot:

 

Check online demo of the application

Learn from experts! Attend jQuery Training classes.

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



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

Related Tutorials

Discuss: jQuery to Show Data Randomly  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com