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:

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.

jQuery to Show Data Randomly

jQuery to Show Data Randomly

Tutorials