CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Winterwind
Winterwind

Reputation: 117

Applying AJAX to rating system

So I've create this rating system that sends number 1-5 to a textfile, depening on which star the user clicked on. At the same page we have a counter who counts number of votes, and the total amount of all votes.

The progress works fine, but I want to enchance it some.

Here is my code:

<form name="Star" id="Star">    
    <div id="rating-area" class="shadow">   

    <img src="star-icon.png" id="thumb1" data-value="1" />
    <img src="star-icon.png" id="thumb2" data-value="2" />
    <img src="star-icon.png" id="thumb3" data-value="3" />
    <img src="star-icon.png" id="thumb4" data-value="4" />
    <img src="star-icon.png" id="thumb5" data-value="5" />

    </div>


</form>



<script>


   jQuery('div#rating-area img').click(function(e){
        var val = jQuery(this).data('value') ;
        console.log(val) ;
        jQuery.post('post.php',{ Star : val },function(data,status){
            console.log('data:'+data+'/status'+status) ;
        }) ;
    }) ;

</script>



<?php

    $file = file("textfile.txt");
    $textfil = file_get_contents("textfile.txt");
    $textfill = str_split($textfil);


    echo "Number of votes in file: " . count($textfill) . "<br>";
    $sum = 0;

    foreach ($textfill as $vote) {
        $sum = $sum + intval($vote);
    }
    echo "Total: " . $sum;
?>

Im kind of new to this php, but is it possible to do an AJAX request so that we don't have to reload the page to get the updated count numbers?

What I need help with is to create an AJAX call so when the user onclick a star, the page will call for data from the textfile without realoading the whole page.

I think I posted all the necassary information, if not, please tell me and I will edit and try to give you the information.

Upvotes: 0

Views: 1406

Answers (1)

Matt The Ninja
Matt The Ninja

Reputation: 2731

Firstly I would rather store this information in database than a text file but the concept is the same.

1.) Create a new PHP that reads the text file and gets the new 'Count' of votes or 'Score' whatever information you want to send back. For simple usage I would just echo this value.

2.) Add some more Javascript to go fetch this value after we have added the users count.

The example below gives a good overview of the concept (From W3Schools - http://www.w3schools.com/php/php_ajax_database.asp). This example would take and then replace the return value into the webpage with the css 'ID' of 'txtHint'. This specfic example also gets the entire page and loads it into this ID, this will be fine if you are only echo'ing the vale to your browser.

<script>
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>

This should help you out, if you struggle getting it to work post back your code and can debug on from that.

Upvotes: 1

Related Questions