1

I'm new to jQuery AJAX. I want to build bookmarking system something like Twitter do (favorites). I have a lot of links. So it's not useful to write AJAX request for each link. That's why I want use just one request script for all links.

Let's say I have the links something link this:

<a href="#" id="1"><i class="icon-star-empty"></i></a>
<a href="#" id="2"><i class="icon-star"></i></a>
<a href="#" id="3"><i class="icon-star-empty"></i></a>

So I want to write AJAX request that do something like this when user clicks to one of those URLs.

if (class="icon-star-empty"){
    ajaxURL = "/insertBoomark"
} else{
    //it means class=icon-start
    ajaxURL = "/deleteBookmark"
}

$.ajax({
  url: ajaxURL,
  type: "POST",
  data: {id : linkID}, // I don't know how to get linkID too :(
  success: if class was icon-star empty then change it to icon-star-empty else change it to icon-star
});

I know that is not correct syntax. How can I solve this problem? Please help :(

Thanks in advance.

2
  • Why do you need to store user's bookmarking at server side? You can store user's preferences at client side, in cookies.
    – Jonas T
    Aug 27, 2012 at 0:38
  • I need it for another reasons.
    – Jack
    Aug 27, 2012 at 0:45

4 Answers 4

1
$("i").on("click", function() {

    if ( $(this).hasClass("icon-star-empty") ){
        ajaxURL = "/insertBoomark"
    } else{
        //it means class=icon-start
        ajaxURL = "/deleteBookmark"
    }

    var linkID = $(this).parent().prop("id");
    var obj    = $(this);

    $.ajax({
        url: ajaxURL,
        type: "POST",
        data: {id : linkID},
        success: function() {
            obj.hasClass("icon-star") ? obj.removeClass("icon-star").addClass("icon-star-empty") : obj.removeClass("icon-star-empty").addClass("icon-star");
        }
    });
})
2
  • thanks for your answer. +1 for it :) now it send AJAX request and makes changes in server-side but it doesn't change class name :( "icon-star-empty" doesn't change to "icon-star" :( how can I solve this ?
    – Jack
    Aug 27, 2012 at 1:01
  • updated.. if doesn't work - check your Ajax success for being called, because the ternary operator works fine - jsfiddle.net/PGdrB Aug 27, 2012 at 1:11
1

You can also use the href attribute and just prevent the default action from the jquery event.

html

<a href="page1" class="icon-star-empty"></a>
<a href="page2" class="icon-star"></a>
<a href="page3" class="icon-star-empty"></a>

javascript

    $(function(){
        $(document).on('click','a',function(e){
            e.preventDefault(); //prevent default click action
            var $this = $(this);  // keeps "this" accessable
            var ajaxURL = $this.attr('href'); // get the url from the "a" tag
            $.ajax({
                url: ajaxURL,
                type: "POST",
                data: {id : linkID},
                success: function() {
                    if($this.hasClass("icon-star"))
                        $this.removeClass("icon-star").addClass("icon-star-empty");
                    else
                        $this.removeClass("icon-star-empty").addClass("icon-star");
                }
            });
        });
    });
0
$('a').click(function(){
    var _ajaxURL,
    _self = $(this);
    if($(this).hasClass('icon-star-empty')){
        _ajaxUrl = "/insertBookmark";
    }else{
        _ajaxUrl = "/deleteBookmark";
    }
    $.ajax({
        url: _ajaxUrl,
        type: 'POST',
        data: {id : $(this).prop('id')},
        success: {
           //I have no idea what you want to do right here.
        }
    });
});
0

Okay, first, class is a reserved name in javascript.

Secondly, if you're doing it with a jQuery.click function, then you can just do $(this).attr('id') to get the id.

Also, for the success part, you seem to be confused about javascript's function syntax. What exactly are you trying to do?

1
  • I know that is not correct syntax. I wrote it just to explain what I exactly want. Couldt you help me please
    – Jack
    Aug 27, 2012 at 0:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.