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.