I am trying to make a button, which will favorite the thread, using ajax. But it have to only fade in and out the favorited image on the favorited thread.

I am getting the following error: Uncaught SyntaxError: Unexpected token this

And that is my code line 11: $(this + ' .is_favorited').fadeIn("slow");

Here is the full Javascript source:

$(".do_favorite").live("click", function() {
    var item = $(this).closest(".box");
    var content = $(this).attr('data-id');
    alert(content);
    $.post( 'ajax.favorite.php?sid=' + content + '',
        $(this).serialize(),
        function(data) {
            if (data == "1") {
                // Favorite it
                $(this + ' .not_favorited').fadeOut("slow", function (
                    $(this + ' .is_favorited').fadeIn("slow");
                ));
            }else if (data == "2") {
                // Un-Favorite it
                $(this + ' .is_favorited').fadeOut("slow", function (
                    $(this + ' .not_favorited').fadeIn("slow");
                ));
            }else {
                alert("DER SKETE EN FEJL DU");
            }
        }
    );
    return false;
});

Hope someone can help me figure this out, as I really need to use this, to make it fade only the clicked one.

I am trying to make a button, which will favorite the thread, using ajax. But it have to only fade in and out the favorited image on the favorited thread.

I am getting the following error: Uncaught SyntaxError: Unexpected token this

And that is my code line 11: $(this + ' .is_favorited').fadeIn("slow");

Here is the full Javascript source:

$(".do_favorite").live("click", function() {
    var item = $(this).closest(".box");
    var content = $(this).attr('data-id');
    alert(content);
    $.post( 'ajax.favorite.php?sid=' + content + '',
        $(this).serialize(),
        function(data) {
            if (data == "1") {
                // Favorite it
                $(this + ' .not_favorited').fadeOut("slow", function (
                    $(this + ' .is_favorited').fadeIn("slow");
                ));
            }else if (data == "2") {
                // Un-Favorite it
                $(this + ' .is_favorited').fadeOut("slow", function (
                    $(this + ' .not_favorited').fadeIn("slow");
                ));
            }else {
                alert("DER SKETE EN FEJL DU");
            }
        }
    );
    return false;
});

Hope someone can help me figure this out, as I really need to use this, to make it fade only the clicked one.

• javascript
• jquery
• this

6 Answers 6

You can write as:

$(this).find('.not_favorited')

You need to pass this in as context in selector or use find() function on $(this).

Change

 $(this + ' .is_favorited').fadeOut("slow", function (

To

$('.is_favorited', this).fadeOut("slow", function (

Using find() method which is call behind the context.

$(this).find('.is_favorited').fadeOut("slow", function (

Edit

If you want to refer the event source element with class do_favorite in post function then you to put it to some temporary variable as you can not refer with this in post

$(".do_favorite").live("click", function() {
    var item = $(this).closest(".box");
    var content = $(this).attr('data-id');
    alert(content);
    do_favorite_OBJECT = $(this);
    $.post( 'ajax.favorite.php?sid=' + content + '',
        do_favorite_OBJECT.serialize(),
        function(data) {
            if (data == "1") {
                // Favorite it
                $('.not_favorited', do_favorite_OBJECT).fadeOut("slow", function (
                    $('.is_favorited', do_favorite_OBJECT).fadeIn("slow");
                ));
            }else if (data == "2") {
                // Un-Favorite it
                $('.is_favorited', do_favorite_OBJECT).fadeOut("slow", function (
                    $('.not_favorited', do_favorite_OBJECT).fadeIn("slow");
                ));
            }else {
                alert("DER SKETE EN FEJL DU");
            }
        }
    );
    return false;
});

save your "this" like this

    $(".do_favorite").live("click", function() {
        var me = $(this);
        var item = me.closest(".box");
        var content = me.attr('data-id');
        alert(content);
        $.post( 'ajax.favorite.php?sid=' + content + '',
        me.serialize(),
        function(data) {
            if (data == "1") {
            // Favorite it
            me.find(' .not_favorited').fadeOut("slow", function (
                me.find('.is_favorited').fadeIn("slow");
            ));
            }else if (data == "2") {
            // Un-Favorite it
            me.find('.is_favorited').fadeOut("slow", function (
                me.find('.not_favorited').fadeIn("slow");
            ));
            }else {
            alert("DER SKETE EN FEJL DU");
            }
        }
        );
        return false;
    });

Use:

$(".is_favorited", this);

or

$(this).find(".is_favorited");

this inside a $.post callback is not the HTML element you think it is. You need to save the element in a variable before calling $.post.

just use:

$(this).find('.not_favorited')