Tutorial: Using Ajax with Solspace’s Favorites Module for ExpressionEngine

Thank you very much for this.

I could never get the explanations over at SolSpace to work - had your code working in 10 minutes.

Can I be cheeky and ask how I would add a fading to white background color behind clicked links.

AJAX is nice, but it's so easy for people clicking links to think nothing has happened - a bit of subtle visual feedback would be great.

Thanks Ryan.

@Andy, Favorites already works on EE2. http://www.solspace.com/software/detail/favorites/

Thanks, works great on my single entry pages. Listing pages it wants to change the text on all the items. Using it for an on line magazine and we have a page that lists all articles in that issue. Would like to allow users to add favorites from this list page as well as the single entry page.

Thanks, that did get it working. The strange part is it now calls that template 2 times. If I click on the link it will save it as a favorite but I get the 'already saved as favorite' message. If I delete it says 'no such favorite exists'. It happens slow enough that I can see the message change from saved to already exists.

I was able to get around that by just using CSS to hide the messages (using image icons for the links). However I save, delete, then save the same favorite eventually I get both Favorites_Delete and Favorites_Save to be visible. Even weirder is if I click off the browser widow, then back in it does NOT do that.

Mostly there, just some strange bugs to work out.

Another thank you for this. I'm migrating from the design side of things to development and just getting into JQuery and JS. This has helped me learn (tweaked the code in my singe entry page to do some other animations).

tweaked the script a bit more and added it to the head (vs above the html it applied to) and its working now.

Slick tutorial Ryan. I just wrote up a little post on EE Insider linking to this!

I only have one thing I'd consider doing differently, and please don't consider this snarky or critical, because like I said in the EE Insider post, this would have been a godsend to me when I was trying to do this!

That being said, I'd at least think about having jquery insert the various messages and links that are hidden by default. That way screen readers, search engines and the like don't load them in. What do you think?

This is a great tutorial. Very helpful! thank you for sharing.

quick follow up question.
I have a sidebar in my template which displays the list of favorite items. it would be awesome if this list could also refresh when the favorites are added/deleted. Is there a jquery that I could add for that?

Hi Ryan
thanks for the excellent tut. I have implemented your suggestions with different add-ons. (delete and mefu) but have trouble with browser caching. I know its not really related to your example exactly, but what type of debug method are you using to overcome browser cache with ajax (reload and browser back button).

Does your solution work fine in ff3 in regards to caching? I did have trouble with deleting content and by pressing the back button the result re-appeared from the browser cache, but only in FF3. At the moment I am using php header to bypass the issue.

zxczxczxczx

This is just outstanding, honestly!! I'm running into an issue that I think has an easy fix. Basically, I have a weblog, and when I use your code, even though I'm specifying the entry id for the favorites, it displays the message "Saved to your Favorites" for all entries, even though it only really saves the one you want. How can I remove it from displaying across all weblog entries?

If you need access to see what I'm talking about I'd be more than happy to provide it.

Thanks for sharing best topic. I am very much interested in the topic. I am really impressed with your blog post.

Ryan -- Thanks for the tutorial. It helped me get Favorites up and running. Somewhat.

I've encountered the same problem with a list of entries as others have.

So, I edited the javascript to include the (this).siblings modification. Basically the code posted by Doug Dec. 30, 2010.

But now, it's no longer dynamically replacing the status message. It's taking me right to the separate add-favorites page.

I don't know enough JS to know what's going on, so I'm stuck. Doug mentioned tweaking the code, but there was no update reported.

Any thoughts on why the favorites_status is no longer updating (which is was before the modification)?

Any help would be appreciated.

Ryan -- I'll take another look. All I did was add (this).siblings.

All triggers lead to the separate add-favorite template with status message.

Here's the code (note, I did use all lc in my classes)


$(document).ready(function() {
$('a.favorites_save') .click (function() {
var link = $(this).attr('href')
$(this).siblings('.favorites_status').load(link, function() {
$(this).siblings('.favorites_delete').show();
});
$(this).hide();
return false;
});
$('a.favorites_save_full') .click (function() {
var link = $(this).attr('href')
$(this).siblings('.favorites_status').load(link, function() {
$(this)siblings('.favorites_delete').show();
});
$(this).hide();
return false;
});

$('a.favorites_delete') .click (function() {
var link = $(this).attr('href')
$(this).siblings('.favorites_status').load(link, function() {
$(this).siblings('.favorites_save').show();
});
$(this).hide();
return false;
});
});
</pre>

Is the (this).siblings('favorites_status') the wrong syntax for that part? I only want status replacement on the specific entry, but maybe this is messing up the replacement and that's why I get sent to the page instead?

Ideas? Thanks for your attention.

Hmm. Not sure which lines you mean. I have basically copied yours and Doug's code. Punctuation and everything.

Do you mean the var link = $(this).attr('href') lines?

I guess I'll keep trying things and floundering around.

Is it the exact code you pasted above? If not, please post the code that is working for you so that others might be able to use it too. You can wrap the code in [ code ] tags (remove spaces) in order to format it

Thanks for posting! This seems like a common issue, so it's good to have the code sample here for others to use.