Working with Solspace Favorite Module

#1 / Jan 29, 2009 7:12pm

leadsuccess
408 posts

I am trying to ajax the functions of favorites module, the issue is that though I can update via ajax call I cannot display the updated list on the sidebar. I can get it to show when a favorite has been deleted but the list on the sidebar does not change if I add a favorite. Does anyone know or have this module working in this manner that can give me some help, m jquery skills are weak. I can’t count the hours I have been at it, it would just make me cry:(

I tried posting over at Solspace form but man it’s slow over there. Anyway for as much as the module cost it should include some ajax magic. Here is the example I am using http://www.solspace.com/forums/viewthread/83/#743. Thanks for any help.

#2 / Jan 30, 2009 11:34am

fanderson

899 posts

In general the guys at Solspace are very helpful. I must admit though that the Favorites module is very complex and it took me a long time to figure it out, even though I haven’t perfected it yet.

To begin with I use the following code where I want to add or remove favorites:

{exp:favorites:saved  type="private" entry_id="{entry_id}"}
{if saved}<td class="remove"><a href="http://{path=%27projects/confirm_add/%27}{entry_id}/delete/" rel="external">—</a></td>
{/if}
             
{if not_saved}<td class="add"><a href="http://{path=%27projects/confirm_add/%27}{entry_id}" rel="external">+</a></td>
{/if}
{/exp:favorites:saved}

Then I have the following code in a template called confirm_add:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Editors Choice Music</title>
[removed]
<!--
setTimeout("self.close();",1000)
//-->
[removed] 
</head>
{exp:favorites:save}

<div id="close_btn">
<form>
<input type=button value="Close This Window"></p>
</form>
</div>

<body>
</body>
</html>

This opens in a small pop up window that I have set to close automatically after a few seconds.

This is the code I use to control the window. I place this in the header of the page:

[removed]
$(document).ready( function() {
    $('A[rel="external"]').click( function() {
        window.open( $(this).attr('href'),this,'width=300,height=200' )
        location.reload();
        return false;
    });
});
[removed]

The one weakness with this system is that the page has to refresh in order for the favorites to show up. I too could use some help from an Ajax expert to resolve that, but at least this works.

Let me know how it goes.

#3 / Jan 30, 2009 11:43am

I literally just implemented this… like in the past hour or two. My code is going to be somewhat specific to the site I’m developing, but I’ll paste it here so hopefully you can adapt it to your needs…

mine is showing the list of favorites after deleting one, but it’s roughly the same deal to show it after adding one

html unordered list of favorites with “delete favorite” link:

<ul id="favorite-listings">
    {exp:favorites:entries weblog="listings"}
    <li id="favorite-{entry_id}">
        <a href="http://{title_permalink=%27listings/details%27}" class="favorites-title">{title}</a> »
        <a href="http://{title_permalink=listings/details}#reviews">review</a> | 
        <a href="http://{title_permalink=listings/details}#comments">comment</a> |
        <a href="http://{path=" class="remove_from_favorites">remove</a>
        (saved on {favorites_date format="%l, %F %j, %Y at %g:%i %a"})
    </li>
    {/exp:favorites:entries}
</ul>

javascript (jQuery) to perform ajax call, display message from the callback, remove the correct list item from the display, and update the count of favorites on the tab:

$(document).ready(function() {
    $('.remove_from_favorites').bind('click', function() {
        hideMessage();
        var url = $(this).attr('href');
        $('#page-content-message').load($(this).attr('href'), null, showMessage);
        $('li:has(a[href="'+url+'"])').remove();
        $('a[href="#fav-places"] > span').text('('+$('ul#favorite-listings > li').length+')');
        return false;
    })
});

function hideMessage() {
    $('#page-content-message:visible').hide("slide", {direction: "up"}, 500);
}

function showMessage() {
    $.scrollTo($("#page-content-message"), 500);
    $('#page-content-message').show("slide", {direction: "up"}, 500);
}

hope that helps someone… YMMV

-Ty

#4 / Jan 30, 2009 1:29pm

leadsuccess
408 posts

Thanks Forrest! The example though it’s very helpful not the ajax magic I am looking for, please know I appreciate it:)

ender that example sharpened up the removal process but have you come up with the way to click on a link on the list of listings and it show up on the side in real time?
#5 / Jan 30, 2009 2:00pm

ender
1644 posts

not really sure what you mean…

so you have a list of favorite entries, you click on one entry, and you want it to show up where?
#6 / Jan 30, 2009 2:07pm

leadsuccess
408 posts

In the main part of the page is the list or listings with an add/remove link. If not added then the add button would show and if added the remove. If they click the add then on the side column of the page the current listings appear and then the listing just added would appear. The issue is they don’t, only if I hard refresh the page after clicking on the add.
#7 / Jan 30, 2009 2:24pm

ender
1644 posts

so the main part of the page holds the list of entries, and the side column holds the favorites… when they click to add an entry to favorites you need the side column to update and show what they just added… right?

assuming that’s the case, there are a number of ways to do this…
the easiest way would be to create a template to call via jquery’s load() function that has the {exp:favorites:save} tag and responds with a regenerated list of the favorites… then just have .load() dump that data into the appropriate DOMElement. don’t even need to deal with the callback if you go that route.

a more elegant way would be to have the template called via ajax return information about the just-added favorite, probably in JSON format… then in the ajax callback in jquery create the necessary DOMElements and insert them into the appropriate place in your favorites list.

a third way would be to leave the ajax template alone and ignore the response from it… do your list update using click events attached to the add_to_favorites link… you should be able to pull enough data out of the surrounding entry display and it to the favorites list in the appropriate place. I view this as a bit of a hack, but it would work.
#8 / Jan 30, 2009 2:40pm

leadsuccess
408 posts

Thanks for the info, it’s a uphill battle at the moment as I am trying to learn JQuery, to say my javascript skills where skills before this is an understatement, “hello world” is all I new:)

Now you explanations I have tried #1 before and could not get it working, maybe I was just doing it wrong. #2 is way beyond my skill set at current and #3 just made my head spin even more.

It seems you know what your doing and I apparently do not. Is there any example even if very rough you could show me, please.
#9 / Jan 30, 2009 2:50pm

ender
1644 posts

do you have a link to the page in question? I could mock something up pretty quick if I could see your html structure.
#10 / Jan 30, 2009 3:23pm

leadsuccess
408 posts

Let me PM you with the username/password. It’s behind a login at the moment, thanks for taking a look:)
#11 / Jan 30, 2009 4:26pm
ender
1644 posts
something like
```
$('.add_to_favorites').bind('click', function() {
    $('#favorite-listings').append($.get($(this).attr('href') li));
    return false;
});
```
the template should save the favorite and then print information about the favorite wrapped as a list item… something like:
```
{exp:favorites:save}
<li>{title} - {address}</li>
```
obviously whatever you want to have displayed about it.

this is just a bit of quick code that I eyeballed for syntax… so that means it probably won’t work, but hopefully it gives you the right idea :D
#12 / Jan 30, 2009 5:03pm

leadsuccess
408 posts

I tried the example and it did not work out of the box like you assumed. It breaks the remove functionality, when I removed it everything was fine. I will mess around a bit more with it and see what can come but I have been at it now going on 12 hours and it’s just not worth it anymore. I don’t think it’s possible since no one has come forward on either solspace or here with a clean working example. Thanks for your help but I just don’t have the desire to learn yet another language, JQuery. Maybe I will post on the job board.
#13 / Jan 31, 2009 4:21am

leadsuccess
408 posts

Ok I got something working now. The append thing I could not figure out and what I have is not perfect but it works. One thing I still need to do is make this work from listings just not a listing. So once I get that working I will post my code here, the now going on 18 hours. I know more about JQuery then I will ever use but since no one here gets it either we are all in the same boat.

Thread

leadsuccess

fanderson

ender

leadsuccess

ender

leadsuccess

ender

leadsuccess

ender

leadsuccess

ender

leadsuccess

leadsuccess

Username

Password

Thread