How to update a number in html via javascript?

Question

After a voter votes, I want to update the count.

<form class="vote-form" action="">
  <div id="{{key}}" class="vote-count">{{votes}}</div>
  <input class="vote-button" type="submit" class="text-button" value="vote+"/>
  <input type="hidden" class="brag" name="brag" value="{{key}}">
  <input type="hidden" class="voter" name="voter" value="{{current_user.fb_id}}">
</form>

<script type="text/javascript">
  $(function() {  
    $('.error').hide();  
    $(".vote-form").submit(function() { 
      var inputs = $(this).find('input:hidden');
      var key = $('input.brag', this).val();
      $.ajax({
        type: "POST",  
        url: "/bean",  
        data: inputs,  
        success: function() {  
          //not sure how to do this, I want to increment {{votes}}
          $('#' + key).innerHTML = "foo"; 
        }  
      });  
      return false;
    });  
  });
</script>

What is `{{key}}`? Looks like some server-side code that is generating the HTML. If so, you'll need to use this in your JavaScript as well. If not...well, that's not a legal `id` attribute. :) — Phrogz, Jan 07 '11 at 21:34
key is generated by the Django template. So will the javascript not read the value generated by {{key}}?? — Will Curran, Jan 07 '11 at 21:37
I did not previously see your `input.brag` code. Yes, that will work just fine. Note that you could also drop the `class="brag"` and just use `var key = $('input[name=brag]').val();` — Phrogz, Jan 07 '11 at 21:39

score 2 · Accepted Answer · edited Jan 07 '11 at 21:48

2

var $div = $('#' + key),
    intValue = parseInt($div.html(), 10);

$div.html(++intValue);

edited Jan 07 '11 at 21:48

Stephen

18,827
9
60
98

answered Jan 07 '11 at 21:35

Marcus Whybrow

19,578
9
70
90

Sorry, had to add some caching out of sheer urge. Otherwise, +1 – Stephen Jan 07 '11 at 21:37
Awesome! I am a Java developer who has also learned ruby and python, but I cannot grasp js/jquery. The jquery docs are confusing to me and don't yield any answers. If you know a good resource for learning jquery please link me. – Will Curran Jan 07 '11 at 21:39
@Stephen That's what my answer looked like anyway – Marcus Whybrow Jan 07 '11 at 21:40
@Stephen I rolled it back so you can see, but feel free to rollforward again if you want. @Will I learn a lot from Chris Coyier at CSS-tricks. Check out his [video screencasts](http://css-tricks.com/video-screencasts/) and look out of the jQuery ones, also he has put together a [learning jQuery roundup](http://css-tricks.com/learning-jquery-a-roundup-roundup/) which looks good. – Marcus Whybrow Jan 07 '11 at 21:43
1

@Marcus Why don't you pass in the radix? (parseInt(..., 10)) – Šime Vidas Jan 07 '11 at 21:43
Actually, @Marcus... your code doesn't seem to work. Check out this fiddle: http://jsfiddle.net/hDV2j/ You need to increment the variable first. – Stephen Jan 07 '11 at 21:47
His original version was working for me. But I'll update the code. Thanks for links Marcus! – Will Curran Jan 07 '11 at 22:18

Phrogz · Answer 2 · 2011-01-07T21:51:14.843

2

If you want to blindly add 1 to whatever value is in the HTML already:

$('#'+key).html(function(i,old){ return old*1 + 1; });

I would, however, advocate having your server return the correct vote count in response to /bean and using this to update the HTML.

edited Jan 07 '11 at 21:51

answered Jan 07 '11 at 21:36

Phrogz

296,393
112
651
745

+1 My original comment is deleted, because it was plain wrong. On the other hand, `parseInt('074', 10)` still nicer than the unexpected `*1`, IMO. – lonesomeday Jan 07 '11 at 21:46
@lonesomeday To each his/her own. Per [my post here](http://stackoverflow.com/questions/3638074/javascript-adding-two-numbers-incorrectly/4600744#4600744), I strongly prefer a method that is a) shorter to type, b) faster to execute, and c) won't silently ignore garbage that I should be prepared to handle. – Phrogz Jan 07 '11 at 21:48

How to update a number in html via javascript?

2 Answers2