SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Ajax poll

  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax poll

    have a question to:
    http://www.w3schools.com/php/php_ajax_poll.asp

    works fine, but i want to add multiple polls on one page. how does it work? need i multiple div-boxes? how does ajax now witch poll to update?

    thx

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That poll is quite limited. You could modify it so that you can have multiple polls per page, by passing a unique identifier for each poll through ajax to php. Yes, you'd need separate divs (for each question block and its related result to appear in). I noticed that the php that creates the response (and the little graph) is hardcoded to say "Yes" or "No" as the answers, rather than for example "Chicken" or "Fish". Also, it currently stores all poll results in one file, which could be easily changed to store results for poll_A in a file called poll_A.txt, results for poll_B in poll_B.txt, etc. So all of that would need modifications to become a generic poll engine.

    Looks like a nice little project to work on to figure out ajax and php. Good luck!

  3. #3
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thx, but how can i tell the script in poll.js which div to use:

    (
    test.php
    ...
    <div id="poll<? echo $number; ?>">
    <a href="javascript:getVote(<? echo $number; ?>,0)">Klick</a>
    ...
    )

    poll.js
    ...
    document.getElementById("poll"+number).
    ...

    doesn't work.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Why doesn't it work?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    think the problem is in poll.js:


    var xmlHttp

    function getVote(number,int)
    {
    var ooo="poll";
    ooo=ooo+number;


    xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null)
    {
    alert ("Browser does not support HTTP Request")
    return
    }
    var url="poll_vote.php"
    url=url+"?vote="+int
    url=url+"&kid="+number
    url=url+"&sid="+Math.random()
    xmlHttp.onreadystatechange=stateChanged(ooo)
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)
    }

    function stateChanged(ooo)
    {
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    {
    document.getElementById(ooo).
    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
    }

    var number/ooo isn't available in the function: stateChanged
    (when i inser any manuel name in document.getElementById, e.g.
    document.getElementById("divname").
    it works.)

    -> but how can i do this dynamic with variables? thx

  6. #6
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    You need to add a few things to the codes (all 3 pages)
    The Javascript needs to know which poll is in use and which div to update.

    In the following code I have changed a few things so look through it carefully.

    PAGE: poll.htm

    Code:
    <html>
    <head>
    <script src="poll.js"></script> 
    </head>
    <body>
    <div id="poll_php_ajax">
    	<h2>Do you like PHP and AJAX so far?</h2>
    	<form>
    		Yes: <input type="radio" name="vote" value="0" onclick="getVote(this.value, 'poll_php_ajax')">
    		<br />
    		No: <input type="radio" name="vote" value="1" onclick="getVote(this.value, 'poll_php_ajax')">
    	</form>
    </div>
    
    <br />POLL 2<br />
    <div id="poll_sitepoint">
    	<h2>Do you like Sitepoint?</h2>
    	<form>
    		Yes: <input type="radio" name="vote" value="0" onclick="getVote(this.value, 'poll_sitepoint')">
    		<br />
    		No: <input type="radio" name="vote" value="1" onclick="getVote(this.value, 'poll_sitepoint')">
    	</form>
    </div>
    
    </body>
    </html>
    On this page I have changed the div id for each poll,
    poll 1 is now poll_php_ajax. You need to create your text file and call it poll_php_ajax.
    poll 2 is poll_sitepoint, again create a text file called poll_sitepoint


    Next I changed the onclick function call and added the second argument.
    Code:
    onclick="getVote(this.value, 'poll_php_ajax')"
    This passes the div id through to the javascript so it can be used to update that div

    PAGE: poll.js

    Code:
    var xmlHttp
    var updateDiv // blank variable
    
    function getVote(int, div2update) {
    	xmlHttp=GetXmlHttpObject()
    	if (xmlHttp==null) {
    		alert ("Browser does not support HTTP Request")
    	return
    	} 
    	
    	// register the variable to the incoming argument
    	updateDiv = div2update;
    	
    	var url="poll_vote.php"
    	url=url+"?vote="+int
    	url=url+"&sid="+Math.random()
    	url=url+"&poll="+updateDiv // send to the php page which txt file to use
    	xmlHttp.onreadystatechange=stateChanged 
    	xmlHttp.open("GET",url,true)
    	xmlHttp.send(null)
    } 
    
    function stateChanged() { 
    	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
    		document.getElementById(updateDiv).innerHTML=xmlHttp.responseText; // update the appropriate DIV
    	} 
    } 
    
    function GetXmlHttpObject() { 
    	var objXMLHttp=null
    		if (window.XMLHttpRequest) {
    			objXMLHttp=new XMLHttpRequest()
    		} else 
    		if (window.ActiveXObject) {
    			objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
    		}
    	return objXMLHttp
    }
    Added a blank variable at the top of the script
    Code:
    var updateDiv // blank variable
    This is filled later with the value passed from poll.htm (second argument)

    Code:
    function getVote(int, div2update) {
    added the second argument coming in from poll.htm so we can now register the variable
    Code:
    	// register the variable to the incoming argument
    	updateDiv = div2update;
    That can then be passed to the php processing page in the url
    Code:
    	var url="poll_vote.php"
    	url=url+"?vote="+int
    	url=url+"&sid="+Math.random()
    	url=url+"&poll="+updateDiv // send to the php page which txt file to use

    In the stateChanged function, the document.getElementById can now be assigned the updateDiv variable
    Code:
    function stateChanged() { 
    	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
    		document.getElementById(updateDiv).innerHTML=xmlHttp.responseText; // update the appropriate DIV
    	} 
    }
    so it knows which div to change the innerHTML of.

    PAGE: poll_vote.php
    PHP Code:
    <?php
    $vote 
    $_REQUEST['vote'];//get content of textfile
    $filename $_REQUEST['poll'];

    //$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>
    The PHP processing page has changed only slightly and that is to assign the $filename variable the id coming from the javascript

    PHP Code:
    $filename $_REQUEST['poll']; 
    This is then used to decide which txt file to update with the votes.
    PHP Code:
    $content file($filename);//put content in array 
    Hope this help explain!

    Spike
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another way is to set the closure properly for passing the update div to statechanged instead of using a global variable:
    Code:
    //xmlHttp.onreadystatechange=stateChanged 
    setStateChanged(xmlHttp, updateDiv);
    
    ...
    
    function setStateChanged(xh, div) {
      xh.onreadystatechange = function () {
        stateChanged(xh, div);
      }
    }
    
    function stateChanged(xh, div) { 
    	if (xh.readyState==4 || xh.readyState=="complete") { 
    		document.getElementById(div).innerHTML=xh.responseText; // update the appropriate DIV
    	} 
    }

  8. #8
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @spikeZ: works fine, thx!!

    @jimfraser: don't really get it, sorry: can you explain it again? thx

  9. #9
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    No problem

    What jim means is that instead of creating a global variable updateDiv and using the in the function, pass the div directly to the function as an argument
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •