CODEWITHSUNDEEP
javascriptjquery
user17282
user17282

Reputation: 507

How to change the function handlers for a link in Jquery?

So in a particular page I serve a lot of content. Now user can click on the bookmark button for a piece of content and it should call the bookmark function which communicates necessary information to the server. Next time when the user clicks on the link it should call the unbookmark function which does the converse of what bookmark function does and the next time the user clicks on this link, it should call the bookmark function. Flip flop flip flop....

My link for the bookmark button kinda looks like this.

<a id = cno class = 'bookmark_button'></a>

I did come up with a solution for this by counting clicks for a particular cno using a global array. This is a very inconvenient thing cause the user has the option to refresh content in which case I have to reset all the counters! So I was wondering if there was an elegant solution to this. So that I could change the click event handler on the fly.

Edit: Bookmark function code:

function bookmark(cno){
  result = server_comm('bookmark', cno);
  if(success){
    //change the icon of the bookmark button;
  }
  else{
    // display error
  }
}

Upvotes: 0

Views: 59

Answers (4)

Hugo Ferreira
Hugo Ferreira

Reputation: 184

You can save the state of "checked/unchecked" on the A tag eg.:

<a id="bookmark-toggle" class="xpto bookmark-unchecked" >bookmark icon</a>

<script>
    $("#bookmark-toggle").click(function(){

        if ( $(this).hasClass("bookmark-unchecked") ) {
            // here you execute code that ADD text on bookmark
            // two lines below you can also run just inside a ajax callback function, so you can run it just if server said it could insert bookmark with success, and if not success, does not run two lines below and tell user what happens
            $(this).removeClass("bookmark-unchecked")
            $(this).addClass("bookmark-checked")
        } else if ( $(this).hasClass("bookmark-checked") ) {
            // here you execute code that REMOVE text on bookmark
            $(this).removeClass("bookmark-checked")
            $(this).addClass("bookmark-unchecked")
        }
    });
</script>

Plus: to work alternating between two class, give to you the ability to alternate button style too. you can set an icon different to both cases, or even alternating text too.. you choose..

Upvotes: 0

Travis
Travis

Reputation: 699

See the following fiddle:

http://jsfiddle.net/mdfb1ef6/12/

var firstClick = function() 
{
    $(this).text("Click me again!")
    $(this).one("click", secondClick);
}
var secondClick = function()
{
    $(this).text("Click me!");
    $(this).one("click", firstClick);
}
$("a").one("click", firstClick);

Essentially, you just call the one method again on the element, passing in a new handler.

Upvotes: 0

Rick Su
Rick Su

Reputation: 16440

Your server should render links depend on the bookmark state like below.

HTML

<!-- a bookmarked link looks like this -->
<a id="cno" class="bookmark_button bookmarked"></a>

<!-- a new link looks like this -->
<a id="cno" class="bookmark_button"></a>

Javascript

jQuery(function($) {
   $(".bookbmark_button").click(function() {
       var btn = $(this);
       if(btn.is(".bookmarked")) {
           btn.removeClass('bookmarked');

           // call undo bookmark here
       } else {
           btn.addClass('bookmarked')

           // call do bookmark here
       }
   });
});

Upvotes: 1

Alp
Alp

Reputation: 3105

Make an AJAX call to the server, and keep the state (on/off states of the book marks) at the server. Of course this will increase the communication with your server more but it will be more reliable.

__update__

Whenever someone clicks on a book mark button, make an AJAX call to the server. Server should get the request and decide what to do (add a new book mark or delete it) and it should respond accordingly. Depending on the answer from the server, you can decorate your button.

To do so,

function onNewBookMarkCallBack(){
   $('#idOfTheItemThatYouWantToChangeTheClass').addClass("newBookMark");
}

function onBookMarkDeletedCallBack(){
   $('#idOfTheItemThatYouWantToChangeTheClass').removeClass("newBookMark");
}

Upvotes: 0

Related Questions