I like how on the solspace software list, when you click on “buy now” it instantly shows “go to checkout” with a different icon without a refresh. Does anyone have a tutorial outlining how I can do this with jquery or similar? I just want to have a link that says “add to favorites” and once the member clicks that link, it will instantly say “saved as a favorite” with a different icon.

Deron,

You want to start with the jQuery load() function. http://docs.jquery.com/Ajax/load#urldatacallback

You would have code something like this:

You’re telling jQuery to listen for a click on links with a class of ‘save’. Then when that event takes place, load the contents of a url into the div with id ‘somedivid’. The url from which you get the contents will be a template in EE that has the exp:favorites:save function. You need to make sure you pass the entry id at the end of the url after a slash. You can load the entry id into an attribute of the link that gets click. In this case, the ‘alt’ tag.

Super fun to do stuff with jQuery.

mk

Mitchell Kimbrough - 16 March 2008 08:38 PM

Deron,

You want to start with the jQuery load() function. http://docs.jquery.com/Ajax/load#urldatacallback

You would have code something like this:

$("a.save").click( function(event) {
$("div#somedivid").load( "some url to a template with exp:favorites:save and entry id" + "/" + $(this).attr("alt") );
});

You’re telling jQuery to listen for a click on links with a class of ‘save’. Then when that event takes place, load the contents of a url into the div with id ‘somedivid’. The url from which you get the contents will be a template in EE that has the exp:favorites:save function. You need to make sure you pass the entry id at the end of the url after a slash. You can load the entry id into an attribute of the link that gets click. In this case, the ‘alt’ tag.

Super fun to do stuff with jQuery.

mk

Thanks Mitchell, I’ll give it a go once I get the rating module set up on my site. Seems confusing, but may be better once I dig into it.

Just holler.
mk

Mitchell:

I’m trying to accomplish this same thing, but I’m not very adept at this sort of thing, so I’m hoping you can help me. Here’s what I’ve done so far:

1. I’ve added the jquery script line to the head of my template:

2. I’ve added this script to the head of my template:

3. This is what the code for the “Add to favorites” link looks like (this code is surrounded by weblog entries tags which I’ve left out):

4. The site/savefavorites template has the exp:favorites:save function.

With it implemented in this way, clicking on the “Add To My Featured Links” link sends people directly to the site/savefavorites templates - it doesn’t load the “success” message into the somedivid div.

Any thoughts? You can see the “system” in action on this page, but you have to be logged in first. Let me know if you want to see the front end, and I’ll PM you a username and password.

Thanks in advance for any help you can offer - I really appreciate it.

Frank

Just happened across this and was wondering. In the above :

Would work?
.

I followed the steps outlined here: http://www.solspace.com/forums/viewthread/83/#743 to get my favorites module working with some jQuery magic. Hope that helps.