[an error occurred while processing this directive]

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).

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:

		<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;
		<div id="wrapper">
		<script type="text/javascript">
				$("#quote p").load("script.php");
		<input type="submit" id="random" value="OutPut!"><br />
		<div id="quote"><p></p></div>

Program explanation:

The following code includes the jQuery JavaScript library file:

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

The code


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.


[an error occurred while processing this directive]