Add/remove blog post to "My favorites" page

Question

Hi everyone.

I am not familiar with js and jQuery, but need to create function to add/remove blog post to "My favorites" page and update counter of saved posts. Is any ready solution - plugin or snippet - to it?

There is my html snippet.

<h1><a href="http://www.example.com/add-post-to-my-favorites-page.htm" id="post_0064"><span class="bookmark" title="My Favorites — Add/Remove">Favorites </span>Heading</a></h1>
<p>Body copy.</p>
[...]
<ul class="ul_favs">
[...]
<li id="bookmarks" <a href="http://www.example.com/account/favs.htm"&gt;My Favorites</a><sup><!-- Counter -->46</sup></li>
</ul>

I think that it can be done with $.ajax, but have not idea how. Maybe something like that?

Thanks in advice.

Answer 1

jQuery won't actually delete anything. If you want to really remove items, you'll have to do so at the source of the list. If your list is made up of static-HTML, you'll need a language like PHP that can access the raw-file and make changes. If your list is stored in a database, you'll need a server-side language like PHP or C# to make those changes.

jQuery can post data to server-side scripts that have the ability to remove/add/edit entries in a database. You might have a PHP script like the following:

if ($_POST) {
  $favid = $_POST["favid"];
  remove_favorite($favid);
}

jQuery could pass a favid to this script:

$.post("removefav.php", {favid:121});

This would post a variable to the server-side script, which would then take the value of that posted-variable and delete its corresponding record in the database.

This is a very crude example, but should suffice for getting you a bit more understanding of jQuery's relationship to server-side languages and databases.

Answer 2

function favorites() {
    $(".bookmark").click(function(event) {
     var request = $(this).parent.attr("id");
     var counter = parseInt($("#bookmarks sup").text());
     if ($(this).hasClass("ed")) {
      //Remove bookmark
      $.post("/account/favorites/remove.htm", { favid:request },
        function() {
         $("#bookmarks sup").text(--counter); // Decrease counter
         $(this).toggleClass("ed"); //Toggle class of clicked element
        });
     } else {
      //Add bookmark
      $.post("/account/favorites/add.htm", { favid:request },
        function() {
         $("#bookmarks sup").text(++counter); // Increase counter
         $(this).toggleClass("ed"); //Toggle class of clicked element
        });
     }
    });
}