Добавить/удалить сообщение в блоге на странице «Мои избранные»

Question

Я не знаком с JavaScript или jQuery, но мне нужно создать функцию для добавления и удаления сообщений в блоге на странице «Мои избранные» и обновления счетчика сохраненных сообщений. Есть ли готовое решение - плагин или фрагмент - что можно сделать?

Вот мой фрагмент HTML.

<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">My Favorites</a> 
     <sup><!-- Counter -->46</sup> 
    </li> 
</ul> 

Я думаю, что это может быть сделано с $.ajax, но я понятия не имею, как это сделать. Может быть, что-то like this?

Answer 1

jQuery на самом деле ничего не удалит. Если вы хотите действительно удалите предметы, вам нужно будет сделать это у источника списка. Если ваш список составлен из static-HTML, вам понадобится такой язык, как PHP, который может получить доступ к необработанному файлу и внести изменения. Если ваш список хранится в базе данных, для этих изменений вам понадобится серверный язык, например PHP или C#.

jQuery может отправлять данные на серверные скрипты, которые имеют возможность удалять/добавлять/редактировать записи в базе данных. Вы можете иметь PHP скрипт вроде следующего:

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

JQuery может пройти favid к этому сценарию:

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

Это размещать переменную в серверный скрипт, который будет затем взять значение этой опубликованной переменной и удалить ее соответствующую запись в базе данных.

Это очень грубый пример, но он должен быть достаточным для того, чтобы получить немного больше понимания отношения jQuery к серверным языкам и базам данных.

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 
        }); 
     } 
    }); 
}