First create the actual file that queries the database
In this example the file is called chess_trivia_get_random.php
<?php ################################## # VERSION HISTORY ################################## # # chess_trivia_get_random.php # # v1.0 - initial version - 8/16/11 - bnb # ################################## ################################## # CONFIG FILES & SETTINGS ################################## require_once('config.php'); require_once('functions.php'); // make session data available to page session_start(); ##################################### # SET DATABASE CONFIG & VARIABLES ##################################### // Set database table // NOTE: Needed for the sidebar $v_database_table = "trivia"; // Connect to the database server // NOTE: Needed for the sidebar $link = connect_to_mysql($live); //function make database connection // First get the record data $v_sql_trivia = "SELECT * FROM $v_database_table ORDER BY Rand() LIMIT 1"; $result = @mysql_query($v_sql_trivia); if (!$result) { exit('<p> Error performing query against the $v_database_table table: ' . mysql_error() . '</p>'); } $v_Trivia_Desc = stripslashes(mysql_result($result, 0, "Trivia_Desc")); $v_Trivia_Create_Dt = stripslashes(mysql_result($result, 0, "Trivia_Create_Dt")); $v_Trivia_Last_Update_Dt = stripslashes(mysql_result($result, 0, "Trivia_Last_Update_Dt")); echo '</div><!-- end trivia-desc div -->'; mysql_close($link); ?>
The next step is the AJAX code
This can be in the primary file, or an include js file
In this example it is included in the main.js file
// GET CHESS TRIVIA function getNextTrivia() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("chess-trivia-content").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","http://www.dailychesspuzzles.com/includes/chess_trivia_get_random.php",true); xmlhttp.send(); }
The final step is to create the file that displays the AJAX
In this case the file is called chess_trivia_ajax_widget.php
<div id="chess-trivia-content"> <?php include("chess_trivia_get_random.php"); ?> </div><!-- end chess-trivia-content div --> <a id="trivia-next" title="Get next random chess trivia factoid" href="javascript:getNextTrivia()" >Next Chess Fact</a>
Note: The next thing to try is to turn the AJAX into a generic call using parameters for the div name and the file to include.
Example: callAJAX('chess-trivia-content','chess_trivia_get_random.php')