Question

will do my best to explain. Very new to jQuery so hope makes sense.

I am using a Favourites add-on for Expression Engine that allows me to mark an entry as a favourite, or a private favourite. (one or the other) so I’m utilising the private function as a mean to bookmark.
You mark items as favourites by means of a hyperlink which registers it when clicked and similarly when removing.

I am displaying these links and making them show/hide the other links with the help of jQuery.

Heres is my current jQuery code:

// favourites adding and removing
jQuery(function(jQuery) { // Shorthand for jQuery(document).ready(function($) {
  jQuery('a.mark').live('click', function() {
        var self = this;
        jQuery.get(self.href, {theID: self.id.substring(3)}, function(data) {
              jQuery(self).html('A Favorite').toggleClass('mark marked').
                    closest('li').prevAll('li:has(a.bookmarks)').hide(300);
        });
        return false;
  });
  jQuery('a.marked').live('mouseover', function() {
        jQuery(this).html('Remove Favourite');
  }).live('mouseout', function() {
        jQuery(this).html('A Favourite');
  }).live('click', function() {
        var self = this;
        jQuery.get(self.href, {theID: self.id.substring(3)}, function(data) {
              jQuery(self).html('Save as a Favourite').toggleClass('marked mark').
                    closest('li').prevAll('li:has(a.bookmarks)').show(300);
        });
        return false;
  });
});

// bookmarks adding and removing
jQuery(function(jQuery) { // Shorthand for jQuery(document).ready(function($) {
  jQuery('a.bookmarks').live('click', function() {
        var self = this;
        jQuery.get(self.href, {theID: self.id.substring(3)}, function(data) {
              jQuery(self).html('A Bookmark').toggleClass('bookmark bookmarks').
               closest('li').nextAll('li:has(a.mark)').hide(300); // Or .hide(300);
        });
        return false;
  });
  jQuery('a.bookmark').live('mouseover', function() {
        jQuery(this).html('Remove Bookmark');
  }).live('mouseout', function() {
        jQuery(this).html('A Bookmark');
  }).live('click', function() {
        var self = this;
        jQuery.get(self.href, {theID: self.id.substring(3)}, function(data) {
              jQuery(self).html('Save as a Bookmark').toggleClass('bookmark bookmarks').
                    closest('li').nextAll('li:has(a.mark)').show(300); // Or .hide(300);
        });
        return false;
  });
});

Now this works almost exactly as it should do, except I have to refresh the page once a “add” link is clicked, in order for it to generate the correct delete links.

The type of behaviour I need is basically to refresh the section once the link has been clicked, making everything register as if the page had been refreshed.

Does that make sense? i hope so! Thanks!

Answer 1

Right just thought i’d finish this one up. Finally got it working!

The jist of it is….

In order to change the href as well as the class, I had to manually add a delete link to my code

// favourites adding and removing
jQuery(function (jQuery) {
jQuery('a.fav_me').live('click', function () {
    var self = this;
    jQuery.get(self.href, {
        theID: self.id.substring(3)
    }, function (data) {
        jQuery(self).html('A Favourite').toggleClass('fav_me fav_delete');
    });
    return false;
});
jQuery('a.fav_delete').live('mouseover', function () {
    var entryID = jQuery(this).attr("rel");
    jQuery(this).html('Remove Favourite').attr('href',     'http://domain.com/forms/favourite-add/' + entryID + '/delete/');
}).live('mouseout', function () {
    jQuery(this).html('A Favourite');
}).live('click', function () {
    var entryID = jQuery(this).attr("rel");
    var self = this;
    jQuery.get(self.href, {
        theID: self.id.substring(3)
    }, function (data) {
        jQuery(self).html('Save as a Favourite').toggleClass('fav_delete fav_me').attr('href', 'http://domain.com/forms/favourite-add/' + entryID);
    });
    return false;
});
});

and then my template looked like this…

{if not_saved}
                        <li><a class="fav_me" id="{entry_id}" href="{path=forms/favourite-add}/{entry_id}" rel="{entry_id}">Save as a Favourite</a></li>
                        {/if}<!--not saved-->
                        {if saved}
                        <li><a class="fav_delete" id="{entry_id}" href="{path=forms/favourite-add}/{entry_id}/delete/" rel="{entry_id}" >A Favourite</a></li>
                        {/if}

Thats what I had to put in order to get it to work. I also decided against having fav and bookmarks, so i then had no need to show or hide the other bookmark/fav. Thanks for the help.