PHPを使用してページにアイテムのリストがあります。シンプルな AJAX トグルを追加して、ユーザーが閲覧中にリスト内の項目をブックマークできるようにしたいと考えています。
item->bookmark フィールド = 1 の場合、アイテムはブックマークされており、シンプルな画像が表示されます。もう一度クリックすると、mysql で ="0" になり、ブックマークの画像が別のものに戻ります。
ページをリロードせずにこれを行う最善の方法は何ですか?
PHPを使用してページにアイテムのリストがあります。シンプルな AJAX トグルを追加して、ユーザーが閲覧中にリスト内の項目をブックマークできるようにしたいと考えています。
item->bookmark フィールド = 1 の場合、アイテムはブックマークされており、シンプルな画像が表示されます。もう一度クリックすると、mysql で ="0" になり、ブックマークの画像が別のものに戻ります。
ページをリロードせずにこれを行う最善の方法は何ですか?
「jquery ajax example」をグーグルで検索できたような気がしますが、どうぞ...
HTML:
<div class="container">
<div class="item" id="<?php echo $whateverYourIdIs; ?>">Bookmark me!</div>
</div>
jQuery:
$(document).ready(function(){
$('.item', $('.container')).click(function(){
var id = $(this).attr('id');
$.ajax({
type: "POST",
url: "some.php",
data: { id: id }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
});
});
AJAX は、サーバーにデータを保存する方法です。ただし、ページ上でオンザフライでブックマークを追加/削除する場合は、 data-* 属性を使用してブックマークのオンとオフを切り替える関数を使用できます
$(".bookmarkButton").click(function(){
if(! $(this).parent().data('bookmark')){
alert('bookmarked');
$(this).parent().data('bookmark', 1);
// Add image + AJAX call
}
else {
alert('not bookmarked');
$(this).parent().data('bookmark', null);
// Remove image + AJAX call
}
});
これは単純な JSFiddle です: http://jsfiddle.net/YwTuB/