jQuery Example, jQuery to Retrieve Server's Current Time, jQuery Server time

Home Ajax Jquery jQuery to Show Data Randomly

Google Advance Search
RoseIndia.Net Search

jQuery to Show Data Randomly
Posted on: September 8, 2008 at 12:00 AM

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:

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.

Related Tags for jQuery to Show Data Randomly:
php, jquery, c, query, jsp, ide, dom, browser, server, data, asp, script, random, replace, user, get, display, ip, tutorial, ria, this, id, simple, row, js, show, rows, example, call, with, program, to, ram, wse, exam, ws, sh, e, il, it, repl, calling, can, li, spl, use, im, dev, from, first, ce, browse, in, ml, cal, as, m, play, sid, side, ca, j, isp, ace, all, hp, how, pro, do, tor, xa, xamp, s, sp, displays, at, is, ir, ha, ll, mpl, epl, epl, develop, ea, and, rv, sim, tutor, scr, s, s, ri, rip, th, sho, st, hat, disp, ple, pl, pr, nd, on, om, ogr, o

«Previous Index Next»