Jump to content

Ajax Poll


pritam79
 Share

Recommended Posts

The AJAX-poll script bellow is used to demonstrate a poll where a web page can get results without reloading.This is the html file poll.htm -

<html><head><script type="text/javascript" src="poll.js"></script></head><body><div id="poll"><h3>Do you like PHP and AJAX so far?</h3><form>Yes:<input type="radio" name="vote" value="0" onclick="getVote(this.value)" /><br />No:<input type="radio" name="vote" value="1" onclick="getVote(this.value)" /></form></div></body></html>

This is the javascript poll.js -

var xmlhttp;function getVote(int){xmlhttp=GetXmlHttpObject();if (xmlhttp==null)  {  alert ("Browser does not support HTTP Request");  return;  }var url="poll_vote.php";url=url+"?vote="+int;url=url+"&sid="+Math.random();xmlhttp.onreadystatechange=stateChanged;xmlhttp.open("GET",url,true);xmlhttp.send(null);}function stateChanged(){  if (xmlhttp.readyState==4)  {  document.getElementById("poll").innerHTML=xmlHttp.responseText;  }}function GetXmlHttpObject(){var objXMLHttp=null;if (window.XMLHttpRequest)  {  objXMLHttp=new XMLHttpRequest();  }else if (window.ActiveXObject)  {  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");  }return objXMLHttp;}

And this is the PHP script poll_vote.php –

<?php$vote = $_REQUEST['vote'];//get content of textfile$filename = "poll_result.txt";$content = file($filename);//put content in array$array = explode("||", $content[0]);$yes = $array[0];$no = $array[1];if ($vote == 0)  {  $yes = $yes + 1;  }if ($vote == 1)  {  $no = $no + 1;  }//insert votes to txt file$insertvote = $yes."||".$no;$fp = fopen($filename,"w");fputs($fp,$insertvote);fclose($fp);?><h2>Result:</h2><table><tr><td>Yes:</td><td><img src="poll.gif" width="<?php echo(100*round($yes/($no+$yes),2)); ?>" height="20"><?php echo(100*round($yes/($no+$yes),2)); ?>%</td></tr><tr><td>No:</td><td><img src="poll.gif" width="<?php echo(100*round($no/($no+$yes),2)); ?>"height="20"><?php echo(100*round($no/($no+$yes),2)); ?>%</td></tr></table>

Firstly, I get the html form with two radio buttons for “Yes” and “No”. On selecting either “Yes” or “No” the text file poll_result.txt gets updated properly, but the gif image that corresponds to the poll is not displayed in the html page. I have the image file in the same location as the above files. Please help.

Link to comment
Share on other sites

I don't see why that wouldn't work if the files are all where they need to be. Use Firebug to look for the request for the poll.gif and see if the server is returning an error code for it.
All my files (poll.gif, poll.htm, poll.js, poll_result.txt, poll_vote.php) are in the same location under the "www" directory. Everything is working except that the image is not getting displayed. The image dimensions are height=’20’ and length=’100’. I had created this image with these dimensions before running the entire script. Could that be the reason?
Use Firebug to look for the request for the poll.gif and see if the server is returning an error code for it.
Never used Firebug before, dont have that thing... any way of getting that?
Link to comment
Share on other sites

There's a link in my signature for it, the Firefox link. It's a Firefox extension. It might be that the image is corrupted some how. If you just double-click on the image does it open? If you're running this through Apache, the filename is going to be case-sensitive also.

Link to comment
Share on other sites

There's a link in my signature for it, the Firefox link. It's a Firefox extension.
Found firebug, Is it just a Firefox add-on? I guess it can only be used when the pages to be debugged are online, can that be done offline? I have not installed it yet….
Link to comment
Share on other sites

I've been working on another poll problem (thought double posting) under Javascript forum and noticed there's an error in the code supplied.document.getElementById("poll").innerHTML=xmlHttp.responseText;should bedocument.getElementById("poll").innerHTML=xmlhttp.responseText;(lowercase h in xmlhttp)

Link to comment
Share on other sites

I've been working on another poll problem (thought double posting) under Javascript forum and noticed there's an error in the code supplied.document.getElementById("poll").innerHTML=xmlHttp.responseText;should bedocument.getElementById("poll").innerHTML=xmlhttp.responseText;(lowercase h in xmlhttp)
Thanks dsonesuk, it worked..the image got displayed.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...