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.

jQuery to Show Data Randomly

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.