私のアプリケーションにはお気に入りの機能とお気に入りではない機能があり、jQueryを使用しています。この機能は部分的に機能します。ページが読み込まれ、「お気に入り」ボタン(add_favourite_div要素内にあります)をクリックすると、XHRリクエストが送信され、投稿がお気に入りとして設定されます。次に、「remove_favourite_div」という新しいdivがその場所に置き換わります。ここで、remove favourite(remove_favourite_divの一部)をクリックすると、xhr内で通常のhttpリクエストが送信されます。
ページが最初に読み込まれるときの構造
<div id="favourite">
<div id="add_favourite_div">
<form method="post" id="add_favourite" action="/viewpost/add_favourite">
<div style="margin: 0pt; padding: 0pt; display: inline;">
<input type="hidden"
value="w873BgYHLxQmadUalzMRUC+1ql4AtP3U7f78dT8x9ho="
name="authenticity_token">
</div>
<input type="hidden" value="3" name="Favourite[post_id]"
id="Favourite_place_id">
<input type="hidden" value="2" name="Favourite[user_id]" id="Favourite_user_id">
<input type="submit" value="Favourite" name="commit"><br>
</form>
</div>
</div>
嫌いなボタンをクリックした後のDOM
<div id="favourite">
<div id="remove_favourite_div">
<form method="post" id="remove_favourite" action="/viewpost/remove_favourite">
<div style="margin: 0pt; padding: 0pt; display: inline;">
<input type="hidden" value="w873BgYHLxQmadUalzMRUC+1ql4AtP3U7f78dT8x9ho="
name="authenticity_token">
</div>
<input type="hidden" value="3" name="Favourite[post_id]" id="Favourite_place_id">
<input type="hidden" value="2" name="Favourite[user_id]" id="Favourite_user_id">
<input type="submit" value="UnFavourite" name="commit"><br>
</form>
</div>
</div>
私のapplication.jsには、xhrリクエストをトリガーする2つの関数があります
$("#add_favourite").submit(function(){
alert("add favourite");
action = $(this).attr("action")
$.post(action,$(this).serialize(),null,"script");
return false;
});
$("#remove_favourite").submit(function(){
alert("remove favourite");
action = $(this).attr("action");
$.post(action,$(this).serialize(),null,"script");
return false;
});
ここで、投稿が最初にお気に入りではない場合、お気に入りボタンが表示され、ボタンをクリックすると、$( "#add_favourite")。submitが呼び出され、お気に入り外のフォームが正しく表示されますが、今は、un-をクリックすると表示されます。お気に入りボタン、$( "#remove_favourite")。submitは呼び出されません。
シナリオ全体は両方の点で当てはまります。つまり、お気に入り->お気に入りと嫌い->お気に入りです。
誰かが私がこの感謝を解決するのを手伝ってくれますか