Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Is simple.</p> <pre><code>/****** JQUERY *******/ /** * SEND NEW VOTE * @param int color id of color */ function SendVote(color){ var count = ''; if( color == 1){ count = 'red'; } if( color == 2){ count == 'blue'; } if( color == 3){ count == 'green'; } //send data via ajax, var queryParams = {'color':color}; $.ajax({ data: queryParams, type: "post", url: 'path/to/vote.php' beforeSend: function(){ // here you could add a loader (if you want) //show loader }, success: function(response){ // success here you get the response from the server //response is not empty if( response.length &gt; 0){ $("#"+count+' span').html(response+' votes'); // then change the number of the counter }else{ //and error on php, cause there response but is empty } }, fail: function(e){ //get fail ajax errors console.log('fail '+e); }, error: function(e){ // get errors console.log('error '+e); } }); } /*** ON vote.php (or your php script) *****/ if( isset($_POST['color']) ){ //do the things to add the new vote //then echo the total of votes for the color echo getVotes($_POST['color']); //this is the response that ajax will get } /********** html *******/ &lt;div id="red"&gt; &lt;a href="#" onclick="SendVote(1)"&gt;&lt;img src="images/red.jpg" width="100%" /&gt;&lt;/a&gt; &lt;span&gt; 5 votes &lt;/span&gt; &lt;/div&gt; &lt;div id="blue"&gt; &lt;a href="#" onclick="SendVote(2)"&gt;&lt;img src="images/blue.jpg" width="100%" /&gt;&lt;/a&gt; &lt;span&gt; 4 votes &lt;/span&gt; &lt;/div&gt; &lt;div id="green"&gt; &lt;a href="#" onclick="SendVote(3)"&gt;&lt;img src="images/green.jpg" width="100%" /&gt;&lt;/a&gt; &lt;span&gt; 0 votes &lt;/span&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload