Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts

    Increasing a value by 1

    Hi, I don't know anything about Javascript and probably should learn, but I am trying to make a simple like system like facebook.

    I don't know how to add 1 to the value of <b id="9-like">0</b>

    Can someone help me?

    Code:
    <span><b id="9-like">0</b> likes. 
    <a href="#" onclick="
    
        $.ajax({url: 'http://192.168.1.68/processors/like/1/9/',
            success: function() {
                 $("#9-like").html("1");
    	}
        });
    
    ">Like</a>

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Hi.

    First thing to point out is that you shouldn't be using onclick to attach event handlers to your elements. Try like this:

    Code:
    <a id="like_9" href="page.html">Like</a>
    
    <script type="text/javascript">
    $(function(){
    	$('#like_9').click(function(){
    		//	do stuff
    	});
    })
    </script>

    Second - a minor one but probably worth mentioning - is that unless you're doing something more complcated with your ajax request than the code you've posted, you don't need $.ajax() - you can simplify it a little by just using $.get(). In fact - and this moves on to the third point - you'd probably be better off using $.getJSON().

    Thirdly - you're doing it wrong Well, sort of. Incrementing the value client-side isn't going to give users an accurate count. What if two separate users hit the link at the same time? They'd both say "1" but the link would have been liked twice.

    A better solution would be for the server-side processor page to return the count of times the item has been liked. I won't go into the server-side code in detail here but in PHP it can be as simple as:

    Code:
    <?php
    $response = array('like_count'=>$whatever_the_count_is);
    echo json_encode($response);
    ?>
    You can then consume this response in your JS:

    Code:
    <script type="text/javascript">
    $(function(){
    	$('#mylink').click(function(){
    		$.getJSON('http://192.168.1.68/processors/like/1/9/', function(response){
    			$("#9-like").text(response.like_count);
    		});
    	});
    })
    </script>
    And finally... you're going to have loads of these links on your page, right? And you don't want to add individual code for each one, so attach the event handlers using CCS class names rather than individual IDs, and use selectors to figure out which span to update:

    Code:
    <span class="likes"><b>0</b> likes</span>
    <a class="like" id="like_9" href="like.html">Like</a>
    
    <script type="text/javascript">
    $(function(){
    	$('.like').click(function(){
    		var objLink = $(this);
    		var like_id = objLink.attr('id').replace('like_','');
    		$.getJSON('http://192.168.1.68/processors/like/1/' + like_id + '/', function(response){
    			objLink.prev('likes').children('b').text(response.like_count);
    		});
    	});
    });
    </script>
    Any use?

  • Users who have thanked Spudhead for this post:

    Ludatha (05-05-2010)

  • #3
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts
    Thank you, it all works except the actual updating of the number...

    When I click like and then look in the database it gets updated, when I run the like script in the browser it comes back with {"like_count":1} and since I am using this code:

    Code:
     <script type="text/javascript">
    	$(function(){
    		$('.like').click(function(){
    			var objLink = $(this);
    			var like_id = objLink.attr('id').replace('like_','');
    			$.getJSON('<?php echo base_url(); ?>/processors/like/1/' + like_id + '/', function(response){
    				objLink.prev('likes').children('b').text(response.like_count);
    			});
    		});
    	});
    	</script>
    Code:
    <span class="likes"><b>0</b> likes</span> 
    <a class="like" id="like_9" href="#">Like</a>
    I can't see what is wrong.

    Thanks for your help so far, you can tell I know nothing about JavaScript

  • #4
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    oops - my bad

    Code:
    objLink.prev('likes').children('b').text(response.like_count);
    should be

    Code:
    objLink.prev('.likes').children('b').text(response.like_count);
    (add a full stop before 'likes' to indicate it should be looking for an element with that class)

  • #5
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts
    Awesome its working, thanks for the help!

    EDIT:

    One more thing, how do you make it so when you click 'like' it doesn't go to the top of the page?
    Last edited by Ludatha; 05-05-2010 at 07:36 PM.

  • #6
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Code:
    <script type="text/javascript">
    	$(function(){
    		$('.like').click(function(){
    			var objLink = $(this);
    			var like_id = objLink.attr('id').replace('like_','');
    			$.getJSON('<?php echo base_url(); ?>/processors/like/1/' + like_id + '/', function(response){
    				objLink.prev('.likes').children('b').text(response.like_count);
    			});
    			return false;
    		});
    	});
    </script>

  • Users who have thanked Spudhead for this post:

    Ludatha (05-06-2010)

  • #7
    Regular Coder Ludatha's Avatar
    Join Date
    Jan 2008
    Posts
    250
    Thanks
    51
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Spudhead View Post
    Code:
    <script type="text/javascript">
    	$(function(){
    		$('.like').click(function(){
    			var objLink = $(this);
    			var like_id = objLink.attr('id').replace('like_','');
    			$.getJSON('<?php echo base_url(); ?>/processors/like/1/' + like_id + '/', function(response){
    				objLink.prev('.likes').children('b').text(response.like_count);
    			});
    			return false;
    		});
    	});
    </script>
    You're a legend thank you!
    I should really learn JS sometime :P


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •