0

Used a method to create some +1 and -1 buttons on a page. (Like a scoreboard)

jQuery - Increase the value of a counter when a button is clicked

However I'm looking for a way to sync the results so that they don't go back to default after each refresh.

Any ideas?

<span id="output">-99</span>

<button class="button right" id="target" type="button">+</button>
<button class="button right" id="targetminus" type="button">-</button>


$('#target').click(function() {
$('#output').html(function(i, val) { return val*1+1 });
});

$('#targetminus').click(function() {
$('#output').html(function(i, val) { return val*1-1 });
});
Community
  • 1
  • 1
Adam Hollister
  • 135
  • 1
  • 7
  • What are the purpose of that value? Do you want the user to see the same value regardless of the computer / browser they are using to access your application, or you only care about page refreshes in the current session? – Oscar Paz Mar 18 '14 at 12:11
  • @OscarPaz Yeah so that whoever goes to the site will see the updated result, regardless of computer/browser. – Adam Hollister Mar 18 '14 at 12:14

3 Answers3

0

I guess you can create a cookie and then read it when you reload. something like this :

function bakeCookie(score) {
    document.cookie = "score =" + score + "; path=/";
}

And you can read it when you load the page and set the value.

function eatCookie() {
    var score = document.cookie.replace(/(?:(?:^|.*;\s*)score\s*\=\s*([^;]*).*$)|^.*$/, "$1");;
}

Hope it helps.

Hugo Marabutt Nogueira
  • 77
  • 8
0

You need to store the result in the server, in a database, a local file or whichever place suits you best. What you need to do is:

Client side:

  1. Perform an AJAX request to a URL that will increment or decrement the current value. Don't send the current value, because someone else could have modified it since you've loaded the page.
  2. Block your buttons until the AJAX request finishes.
  3. Refresh the current value with the value received by the server
  4. Unblock the buttons.

Server side:

  1. Increment or decrement your current stored value depending on the request send by the browser. This operation must be transactional.
  2. Send the new, updated value to the browser that made the request.

This is not the place to explain how to perform every step. It would depend on your server, your server technology, or whether you have a database or not. I suggest you to learn more about client-server web applications.

Oscar Paz
  • 18,084
  • 3
  • 27
  • 42
0

I'd personally use cookies, There's a really nice little JQuery plugin for them here: https://github.com/carhartl/jquery-cookie

Also I'd maybe use data attributes on my buttons and tag them with a css class. This way you can then reuse your function to add subtract anything tagged with this data attribute and you can put in any number in the data-val attribute, e.g. 5, -5, 10, -10 etc.

<button class="button right target" type="button" data-val="1">+</button>
<button class="button right target" type="button" data-val="-1">-</button>

$('.target').click(function() {
    var val = $(this).data('val');
    var score = $.cookie('Score');

    $.cookie('Score', score + val);

    $('#output').html($.cookie('Score'));
});
Dylan Hayes
  • 2,331
  • 1
  • 23
  • 33