Storing Click Count Data

[nielse63]

I'm having some trouble storing data for a click counter. Every time someone clicks on "Good" or "Bad", the number next to it will count this, but the problem is that as of yet the count gets reset to zero whenever the page is reloaded. The code is as follows:

<script>
function add_to_goodcount1(){
	var goodcount1=document.getElementById('goodcount1');
	var cstore = document.getElementById('good_counter_score1');

	cstore.value=parseInt(cstore.value)+1;
	goodcount1.innerHTML=cstore.value;
}

function add_to_badcount1(){
	var badcount1=document.getElementById('badcount1');
	var cstore = document.getElementById('bad_counter_score1');

	cstore.value=parseInt(cstore.value)+1;
	badcount1.innerHTML=cstore.value;
}
</script>

<a href="javascript:add_to_goodcount1();">Good </a><input type="hidden" name="good_counter_score1" id="good_counter_score1" value='0'><span id="goodcount1">0</span>
<p>&nbsp;</p>
<a href="javascript:add_to_badcount1();">Bad </a><input type="hidden" name="bad_counter_score1" id="bad_counter_score1" value='0'><span id="badcount1">0</span>

I was wondering if anyone would be able to point me in the best direction as to how to store the data into a text file for both the good and bad count so that when a user returns to the site the count remains the same, or has grown from other users clicking as well. I'm only just getting used to AJAX and all, so any help would be greatly appreciated. Thanks!

 

[Diancecht]

Well, this is just Javascript, no AJAX involved, as far as I can see.

The context of the variable is the page, so the data vanishes with it. To persist it, maybe you should think on a cookie or a server-side solution, depending on the persistence level you need

Cheers,
Dian

 

[feherke]

Hi

Cookies are not enough because the OP wrote :

or has grown from other users clicking as well

nielse63, AJAX is about communication. Between client and server. So far you posted only the client-side code and mentioned nothing about the server-side. So tell us about the server-side.

By the way, I am wondering how the JavaScript part could work. You are reading out the current value from the element with [tt]id[/tt] good_counter_score1, then putting the incremented value back into the element with [tt]id[/tt] goodcount1. I feel a gap in the logic there.

Feherke.

http://rootshell.be/~feherke/

 

[Diancecht]

Good point feherke: if you plan to share the counter among several users, you need a common point to store the value.

Btw, there's a hidden field to store the value and a span to show it.

Cheers,
Dian

 

[feherke]

Hi

Btw, there's a hidden field to store the value and a span to show it.

Oops. Yes, I saw that. The part I missed is that the incremented value is put back into [tt]cstore.value[/tt]. Sorry, but I find hard to follow that code.


Feherke.

http://rootshell.be/~feherke/

 

[nielse63]

thanks for all the help guys. I am really new to this, and though it is just an experiment i feel like i have to make this work.

are there any tips on how to store the info into a text file and recall it or something that you might be able to give me? i've tried that with some samples and everything (counters, etc) and it's worked, but i haven't been able to work it into the whole clicking on the link.

any examples would also help.

 

[Diancecht]

You will need some server side technology to make a counter for all users

Cheers,
Dian

 

[nielse63]

I have the server side technology, and access and all, but I don't have the code. I'm using PHPmyAdmin and MySQL through my hosting service. My main problem is just storing and recalling the data for all users to see.

 

[nielse63]

Ok, so with the server side technology and everything in place, and the database and table created for all this stuff, it is STILL not working. The code updates and php are as follows:

function ajaxFunction(count) {
var xmlhttp;
if (window.XMLHttpRequest) {
  xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.open("POST","goodbad.php",true);
xmlhttp.send(POST);
}

function add_to_goodcount1(){
    var goodcount1=document.getElementById('goodcount1');
    var cstore = document.getElementById('good_counter_score1');

    cstore.value=parseInt(cstore.value)+1;
    goodcount1.innerHTML=cstore.value;
    ajaxFunction(cstore.value);
}

function add_to_badcount1(){
    var badcount1=document.getElementById('badcount1');
    var cstore = document.getElementById('bad_counter_score1');

    cstore.value=parseInt(cstore.value)+1;
    badcount1.innerHTML=cstore.value;
    ajaxFunction(cstore.value);
}


<body>
<a href="javascript:add_to_goodcount1();">Good </a><input type="hidden" name="good_counter_score1" id="good_counter_score1" value='0'><span id="goodcount1">0</span>
<p>&nbsp;</p>
<a href="javascript:add_to_badcount1();">Bad </a><input type="hidden" name="bad_counter_score1" id="bad_counter_score1" value='0'><span id="badcount1">0</span>
</body>

And here's the php file:

<?php

$count = $_POST['count'];

mysql_connect("localhost", "username", "password");
mysql_select_db("raterest1");

mysql_query("UPDATE count SET count='$count'") or die(mysql_error());

?>

Would anyone know what's going on here, why it's not storing the data?

 

[Diancecht]

xmlhttp.open("POST","[URL unfurl="true"]http://hostname:port/goodbad.php",true);[/URL]

Cheers,
Dian

 

[feherke]

Hi

The ajaxFunction() does nothing with its count parameter.

[b]function[/b] [COLOR=darkgoldenrod]ajaxFunction[/color][teal]([/teal]count[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] xmlhttp[teal];[/teal]
  [b]if[/b] [teal]([/teal]window[teal].[/teal]XMLHttpRequest[teal])[/teal] [teal]{[/teal]
    xmlhttp[teal]=[/teal][b]new[/b] [COLOR=darkgoldenrod]XMLHttpRequest[/color][teal]();[/teal]
  [teal]}[/teal] [b]else[/b] [b]if[/b] [teal]([/teal]window[teal].[/teal]ActiveXObject[teal])[/teal] [teal]{[/teal]
    xmlhttp[teal]=[/teal][b]new[/b] [COLOR=darkgoldenrod]ActiveXObject[/color][teal]([/teal][green][i]"Microsoft.XMLHTTP"[/i][/green][teal]);[/teal]
  [teal]}[/teal] [highlight][b]else[/b] [b]return[/b][teal];[/teal][/highlight]

  xmlhttp[teal].[/teal][COLOR=darkgoldenrod]open[/color][teal]([/teal][green][i]"POST"[/i][/green][teal],[/teal][green][i]"goodbad.php"[/i][/green][teal],[/teal][b]true[/b][teal]);[/teal]
  xmlhttp[teal].[/teal][COLOR=darkgoldenrod]send[/color][teal]([/teal][highlight][green][i]'count='[/i][/green][teal]+[/teal]count[/highlight][teal]);[/teal]
[teal]}[/teal]

By the way, the logic is quite wrong.

Feherke.

http://rootshell.be/~feherke/

 

[feherke]

Hi

This is how I would do it :

[b]function[/b] [COLOR=darkgoldenrod]ajaxFunction[/color][teal]([/teal]direction[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] xmlhttp[teal];[/teal]
  [b]if[/b] [teal]([/teal]window[teal].[/teal]XMLHttpRequest[teal])[/teal] [teal]{[/teal]
    xmlhttp[teal]=[/teal][b]new[/b] [COLOR=darkgoldenrod]XMLHttpRequest[/color][teal]();[/teal]
  [teal]}[/teal] [b]else[/b] [b]if[/b] [teal]([/teal]window[teal].[/teal]ActiveXObject[teal])[/teal] [teal]{[/teal]
    xmlhttp[teal]=[/teal][b]new[/b] [COLOR=darkgoldenrod]ActiveXObject[/color][teal]([/teal][green][i]"Microsoft.XMLHTTP"[/i][/green][teal]);[/teal]
  [teal]}[/teal] [b]else[/b] [b]return[/b][teal];[/teal]

  xmlhttp[teal].[/teal][COLOR=darkgoldenrod]open[/color][teal]([/teal][green][i]'GET'[/i][/green][teal],[/teal][green][i]'goodbad.php?direction='[/i][/green][teal]+[/teal]direction[teal],[/teal][b]true[/b][teal]);[/teal]
  xmlhttp[teal].[/teal][COLOR=darkgoldenrod]send[/color][teal]([/teal][b]null[/b][teal]);[/teal]
[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]add_to_count[/color][teal]([/teal]direction[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] counthold[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal](([/teal]direction[teal]==[/teal][purple]1[/purple][teal]?[/teal][green][i]'good'[/i][/green][teal]:[/teal][green][i]'bad'[/i][/green][teal])+[/teal][green][i]'count'[/i][/green][teal]);[/teal]
  counthold[teal].[/teal]innerHTML[teal]=[/teal][COLOR=darkgoldenrod]parseInt[/color][teal]([/teal]counthold[teal].[/teal]innerHTML[teal],[/teal][purple]10[/purple][teal])+[/teal][purple]1[/purple][teal];[/teal]
  [COLOR=darkgoldenrod]ajaxFunction[/color][teal]([/teal]direction[teal]);[/teal]
[teal]}[/teal]

[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"javascript:add_to_count(1);"[/i][/green][b]>[/b]Good[b]</a><span[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"goodcount"[/i][/green][b]>[/b]0[b]</span>[/b]
[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"javascript:add_to_count(-1);"[/i][/green][b]>[/b]Bad[b]</a><span[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"badcount"[/i][/green][b]>[/b]0[b]</span>[/b]

[teal]<?php[/teal]

[navy]$direction[/navy][teal]=[/teal][navy]$_GET[/navy][teal][[/teal][green][i]'direction'[/i][/green][teal]];[/teal]

[b]if[/b] [teal]([/teal][navy]$direction[/navy][teal]!=[/teal][purple]1[/purple] [teal]&&[/teal] [navy]$direction[/navy][teal]!=-[/teal][purple]1[/purple][teal])[/teal] [b]return[/b][teal];[/teal]
[navy]$field[/navy][teal]=([/teal][navy]$direction[/navy][teal]==[/teal][purple]1[/purple][teal]?[/teal][green][i]'good'[/i][/green][teal]:[/teal][green][i]'bad'[/i][/green][teal]).[/teal][green][i]'count'[/i][/green][teal];[/teal]

[COLOR=darkgoldenrod]mysql_connect[/color][teal]([/teal][green][i]"localhost"[/i][/green][teal],[/teal] [green][i]"username"[/i][/green][teal],[/teal] [green][i]"password"[/i][/green][teal]);[/teal]
[COLOR=darkgoldenrod]mysql_select_db[/color][teal]([/teal][green][i]"raterest1"[/i][/green][teal]);[/teal]

[COLOR=darkgoldenrod]mysql_query[/color][teal]([/teal][green][i]"update count set $field=$field+1"[/i][/green][teal])[/teal] [b]or[/b] [b]die[/b][teal]([/teal][COLOR=darkgoldenrod]mysql_error[/color][teal]());[/teal]

[teal]?>[/teal]

[small][maroon]Warning[/maroon] The above code was not tested[/small]

Feherke.

http://rootshell.be/~feherke/