|
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
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
