SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery: callback function not executing

    I'm playing around with this bit of code which is intended to provide an instantaneous "Add to favourites" link next to a feed item on my site.

    Code JavaScript:
    $(document).ready(function() {
    $(".fav").click(function() {
        if($(this).hasClass("off")) {
            $.get("/include/frontend/favourite.php", {id:$(this).attr("rel"), action:"add"},function(msg){
                $(this).text("Remove from favourites"); $(this).removeClass("off"); $(this).addClass("on"); 
            });
            return false; 
        } else if($(this).hasClass("on")) {
            $.get("/include/frontend/favourite.php", {id:$(this).attr("rel"), action:"del"},function(msg){
                $(this).text("Add to favourites"); $(this).removeClass("on"); $(this).addClass("off"); 
            });
            return false; 
        }
    });
    });

    The problem is the two callback functions; none of the commands are executing. Does anyone know what's going on here? Cheers!
    Last edited by SJH; Sep 11, 2008 at 05:30.

  2. #2
    SitePoint Enthusiast stakes's Avatar
    Join Date
    Sep 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you sure the callback functions are not executing? Try adding an alert message inside the callback to see if your script reaches that point. I think there may be a problem using $(this) inside the callback since it's outside the variable scope. Also I'd suggest you format your code to make it more readable and easier to debug i.e:

    Code:
    $(document).ready(function() {
        $(".test").click(function() {
        
            if($(this).hasClass("off")) {
                $.get("/include/frontend/favourite.php", {
                    id:$(this).attr("rel"), 
                    action:"add"
                },
                function(msg){
                    $(this).text("Remove from favourites"); 
                    $(this).removeClass("off"); 
                    $(this).addClass("on");
                });
                return false;
            } 
            else if($(this).hasClass("on"))
                {
                $.get("/include/frontend/favourite.php", {
                    id:$(this).attr("rel"), 
                    action:"del"
                },
                function(msg){
                    $(this).text("Add to favourites"); 
                    $(this).removeClass("on"); 
                    $(this).addClass("off");
                });
                return false;
            }
        });
    });
    Ps. How can i syntax highlight JS code here?
    Last edited by stakes; Sep 11, 2008 at 06:22. Reason: formatting
    webcloud.se - Articles on web development

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, good point - an alert() in the callback does execute, so it must be a problem with using $(this) inside the callback. Can you think of a different way of going about this?

    Edit: syntax-highlighting JavaScript code is done like this, [__highlight="JavaScript"__][__/highlight__] (without the underscores, of course).

  4. #4
    SitePoint Enthusiast stakes's Avatar
    Join Date
    Sep 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd createa a reference to $(this) at the beginning of the script, and pass into the callback function. Like this:

    Code JavaScript:
    $(document).ready(function() {
    	$(".test").click(function() {
     
    		obj = $(this);
     
    		if(obj).hasClass("off")) {
    	        $.get("/include/frontend/favourite.php", {
    				id: obj.attr("rel"), 
    				action:"add"
    			},
    			function(obj){
    	            obj.text("Remove from favourites"); 
    				obj.removeClass("off"); 
    				obj.addClass("on");
    	        });
    	        return false;
    		} 
    		else if(obj).hasClass("on"))
    			{
    	        $.get("/include/frontend/favourite.php", {
    				id: obj.attr("rel"), 
    				action:"del"
    			},
    			function(obj){
    	            obj.text("Add to favourites"); 
    				obj.removeClass("on"); 
    				obj.addClass("off");
    	        });
    	        return false;
    		}
    	});
    });

    I removed the (msg) variable that you were passing into your callback function because im not sure that you were using it?

    I think this should work (I don't have time to test it right now)
    webcloud.se - Articles on web development


Bookmarks

Posting Permissions

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