WEB How to increase text upon an onClick in Ajax?

Discussion in 'OT Technology' started by pkr, Jun 24, 2008.

  1. pkr

    pkr Guest

    I'm making a rating script for a portion of my site that will not be a normal 5 star based rating script. I'm wondering how I would have the user click on the link and have it add an additional number to the existing one.

    Say it's @ 0 Votes.

    User clicks on a button saying "Like it" and it changes to 1 vote.

    Make sense? :o If anyone can help me with this I'll be :bowdown:
     
  2. SLED

    SLED build an idiot proof device and someone else will

    Joined:
    Sep 20, 2001
    Messages:
    28,118
    Likes Received:
    0
    Location:
    AZ, like a bauce!
    are you using a JS framework yet? i.e. prototype, jQuery, Dojo, etc...

    it would depend on what you're using, or if you are writing your own AJAX calls
     
  3. pkr

    pkr Guest

    No framework. I figure it's just too much for what I'm doing. :dunno:

    Is there an example even with the frontend JS portion of it so I can test how it looks?
     
  4. Jesse

    Jesse PSN: iamajesse; XBL: Inhale My Rod; G8 GT crew; Ne OT Supporter

    Joined:
    Jan 12, 2005
    Messages:
    25,649
    Likes Received:
    0
    Location:
    California :: (925)
    Control + Mouse wheel

    :coolugh:
     
  5. pkr

    pkr Guest

    :slap: Text # not text size
     
  6. SLED

    SLED build an idiot proof device and someone else will

    Joined:
    Sep 20, 2001
    Messages:
    28,118
    Likes Received:
    0
    Location:
    AZ, like a bauce!
    typically this is done by:

    - having a known div or element in the html with the number
    - making request to server via ajax on click
    - server tracking the request in it's own datastore
    - server retrieving new "like it" count from datastore
    - server responds with either a new number or a whole new div (either works)
    - javascript on client updates div contents with new number from server, or replaces div element with server response

    look into http://microformats.org/wiki/rest/ahah
     
  7. pkr

    pkr Guest

    :bowdown: Hel yeah! WML Is on fire today.
     
  8. Jesse

    Jesse PSN: iamajesse; XBL: Inhale My Rod; G8 GT crew; Ne OT Supporter

    Joined:
    Jan 12, 2005
    Messages:
    25,649
    Likes Received:
    0
    Location:
    California :: (925)
    No shit :mamoru:
     
  9. Slid.

    Slid. I'm a guy.

    Joined:
    Oct 25, 2001
    Messages:
    1,928
    Likes Received:
    0
    Location:
    NH
    Code:
    <script>
      curCount = 1;
    </script>
    
    <input type="button" onClick="curCount++; document.getElementById('countText').innerHTML = curCount + ' votes';" value="Vote">
    
    <div id="countText">
      1 vote
    </div>
    
     
  10. 95vr4

    95vr4 OT Supporter

    Joined:
    Oct 6, 2004
    Messages:
    2,513
    Likes Received:
    0
    Location:
    Weddington, NC
    It's worth the file size imo, makes things soo easy. You can also add scriptaculous onto prototype and get all the cool transition effects :cool:
     
  11. SLED

    SLED build an idiot proof device and someone else will

    Joined:
    Sep 20, 2001
    Messages:
    28,118
    Likes Received:
    0
    Location:
    AZ, like a bauce!
    if you have a heavy ajax'd site, definitely worth it. but if only small parts of the site needs to be dynamic, not having the overhead is nice. it can be pretty frustrating on slower connections and even slower computers
     
  12. pkr

    pkr Guest

    :werd: I'd use it if I had more ajax stuff but I don't have much and my js file is pretty small as it is, so I'd like to keep it that way.

    P.S. Big thank you to slid :bowdown: brotha :cool:
     
  13. Kevin

    Kevin New Member

    Joined:
    Aug 27, 2002
    Messages:
    87,634
    Likes Received:
    0
    Location:
    Michigan
    .Net makes ajax a breeze.
     
  14. SLED

    SLED build an idiot proof device and someone else will

    Joined:
    Sep 20, 2001
    Messages:
    28,118
    Likes Received:
    0
    Location:
    AZ, like a bauce!
    it also makes it a pain in the dick if you want anything more than their built in controls. too much overhead too.
     
  15. Josh

    Josh Guest

    A key thing to do is not rely on your server scripts to send the exact values for your ajax output. If the html element has a value of 1, just use the javascript to make it 2 like you would without ajax, and call your scripts separately.
     
  16. SLED

    SLED build an idiot proof device and someone else will

    Joined:
    Sep 20, 2001
    Messages:
    28,118
    Likes Received:
    0
    Location:
    AZ, like a bauce!
    depends on if having an accurate count from the server is important or not. If not I would tend to agree
     
  17. Josh

    Josh Guest

    True, but for something as simple as a rating script it would almost never matter if it was inaccurate.

    I've found that if you rely on the script to bring your HTML to the page with ajax it can fucker things up, especially if the server is lagging. the worst is when the page won't load and you get a 404 error. I've figured out way around this though using some regular expressions in javascript.
     
  18. pkr

    pkr Guest

    The only thing I'm worried about really is the person not having javascript enabled, but this element isn't going to factor TOO much into the website.

    I can see where you are coming from though. Hopefully I won't have to have that in the back of my mind too much longer as I want to get a dedicated in the long run.
     
  19. Josh

    Josh Guest

    I dont think the javascript enabled is a huge issue. Most users have it enabled now I think. You could use something to detect if it is on or off and show links accordingly for ajax functionality or just a regular link that loads the vote in a new page. I haven't done this though, I build most ajax apps assuming all users have JS enabled. :o
     
  20. 95vr4

    95vr4 OT Supporter

    Joined:
    Oct 6, 2004
    Messages:
    2,513
    Likes Received:
    0
    Location:
    Weddington, NC
    Meh, you're probably right, I'm just too lazy to write my own custom JS (JS isn't my strongest area either). I mean you can do ajax things like this with literally 1 or 2 lines of code using prototype.
     

Share This Page