JAVASCRIPT » Ajax

A poller script that uses Ajax to send vote to the server and receives vote results from the server. The results are displayed in some animated graphs. Configuration: PHP and mySql required This script requires that you have PHP installed on your server and access to a mySql database. Files included in package ajax-poller.html = Main HTML file. Contains some HTML code and some PHP code. You will find the code for the poller between the comments <!-- START OF POLLER --> and <!-- END OF POLLER -->. ajax-poller-cast-vote.php = This file is called by ajax when someone casts a vote. This file updates the database and returns vote results as XML back to ajax-poller.html dbConnect.php = File included by ajax-poller and ajax-poller-cast-vote.php. This file connect the scripts to your database js/ajax-poller.js = Main Javascript file for this script. js/ajax.js = Ajax (Library from http://twilightuniverse.com/projects/sack). css/ajax-poller.css = Cascading style sheet for the poller images/* = images used by the script createDbTables.php = Installation file. This file creates the default database tables you need for this script. Just put in connection and data and execute the file in your browser Installation This is a step by step guide on how to configure this script Modify dbConnect.php. Insert your dbName, username and password. You may have to create a new database. Edit createDbTables.php. Insert your dbName, username and password and execute the script in your web browser Now, try to open ajax-poller.html in your web browser Javascript variables You will find some variables at the top of ajax-poller.js which you could modify: var serverSideFile = `ajax-poller-cast-vote-php`; var voteLeftImage = `images/graph_left_1.gif`; var voteRightImage = `images/graph_right_1.gif`; var voteCenterImage = `images/graph_middle_1.gif`; var graphMaxWidth = 120; // It will actually be a little wider than this because of the rounded image at the left and right var graphMinWidth = 15; // Minimum size of graph var pollScrollSpeed = 5; // Lower = faster var useCookiesToRememberCastedVotes = true; serverSideFile = Path to the PHP file that is called by ajax. voteLeftImage, voteRightImage and voteCenterImage = Path to the graph images graphMaxWidth = Max width of graph graphMinWidth = Min width of graph pollScrollSpeed = Speed of animation. Lower value = faster animation useCookiesToRememberCastedVotes = If set to true, use cookie to prevent user from casting more than one vote