Duh. Somehow half of my post does not show. I will try again.

Hello (part two),

while there are many JavaScript libraries out there, I thought I’d post how to use the Favorites module with jQuery. Perhaps others can contribute and add their library of choice to the list and how they accomplished it. I’d be very interested in knowing how others apply AJAX to the favorites module.

I’m by no means a JavaScript junkie, so if there is a simpler way of applying jQuery with the Favorites module, do post. My pre-condition was that I wanted to use a proper DOM method and allow for the favorites Module to work with or without Javascript enabled, meaning, leaving all the Javascript goodness out of the HTML.

Here are the requirements (what you need):

1. jQuery
2. jqModal plugin

Step one:

Create a template where you store your success/failure message. I named it favorite-add and placed it in my forms template group.
In your favorite-add template, add this code:

Step two:

Place the favorites link anywhere you want it to appear like so:

Step 3

Upload the jquery.js and jqModal.js and jqModal.css onto your server and link to it in your head (remove the space before script):

Change the CSS as you deem suitable.

Add the required HTML to your template (where you want the modal window to appear):

Example:

In order for this to work, you need to modify the link we created earlier from this:

to this:

And the most important part is the function itself. Place this in the template(s) where you want to use it inside the head area (must be below the jquery.js files)

You can see a working sample I created here (click on “save").

That’s it. Completely unobstrusive so that your visitors with js disabled can perform the task as well. Just not as nicely. =)

Hope this helps someone,

Maleika

pretty cool maleika. i might just utilize your code here. thanks!

it would be nice to have a login screen, though, right in the pop up that reads “You must be logged in before you can...” on your sample site.

otherwise, perfect.

Very nice, thanks for sharing, Maleika.

Thank you! Thank you!  I’m sure you saved me hours and hours of work as I just managed to implement AJAX with the Favorites module in under 10 minutes

One question, how do I make it so the modal window is initially hidden?

Got it - you just have to add “display: none;” to the CSS.

I took a different approach, having decided not to use a modal window. Thus, you only need jQuery and not the plugin code as well. Here’s the basics of my approach. It needs more sprucing up, such as an indicator of what has changed on the page (yellow background fade perhaps?), but it works.

Here is the basic code for the template that was embedded just above post body -
Don’t forget to pass the entryid along to your embedded template ie - {embed="includes/ajax_inline_favorites" myentryid="{entry_id}"}

embedded javascript in head of page

The page the add and remove links point to is a very basic template that activates the favorites module:

Bill,

I love how elegant jQuery is. My team has been climbing all over it lately. Thank you for sharing your code.

mk

Bill, thanks a ton for sharing. Just noting that the particular code Bill shared only works on a unique UL/LI. If you have 3 or 4 LI’s and you click to remove one, the message will show up for all LI’s in the UL. You would need to get the parent item of the one you clicked and replace (or load) the results of the get into that.

NOTE: This post is now obsolete. I more carefully read Mitchell’s post above and tried Prototype’s Ajax.Updater. WORKS! Thanks, MK!

mdesign - 18 December 2007 10:18 PM

Bill, thanks a ton for sharing. Just noting that the particular code Bill shared only works on a unique UL/LI. If you have 3 or 4 LI’s and you click to remove one, the message will show up for all LI’s in the UL. You would need to get the parent item of the one you clicked and replace (or load) the results of the get into that.

So… I’ve been beating my brains out trying to do just this.

I can get this stuff to work as advertised within a UL/LI structure, but the duplicate messages appear in all the LI’s. Plus, a UL/LI structure doesn’t work for me design-wise, as I need to put more than one kind of link on the Save to Favorites line.

So I’ve tried to use spans (divs are too problematic side-by-side), and the basic theory I’ve been working on is that by adding an ID to the link tag and a matching class attribute to the surrounding span (or whatever the parent might be), I could identify the parent node without having to use target or srcElement. Each of these identifying attributes contains something like “favespan” plus the {entry_id} for uniqueness.

Getting the class and id injected is easy. Addressing them is giving me gas-- but that’s expected, since my Javascript skills are… well… not really skills. Here’s a bit of what I’m doing:

With the HTML being something like:

The variable linkSpan is being correctly filled with something like “favespan21”, so it looks like the next line of the js is where the problem is. I’m not concatenating properly, or...?

I’m sure it’s something simple. It always is with me. 

Thanks!