dynamische Likefunktion

Dragonas · 5. Februar 2012, 22:12

Guten Tag,

derzeit entwickel ich eine Seite wo ich eine Likefunktion benötige, wie man sie halt von Facebook kennt. Zudem soll diese dynamisch sein und den neuen Wert an die Datenbank übermitteln. Da ich keine so große Ahnung mit JavaSkript in Verbindung mit PHP habe und Google auch keine brauchbaren Informationen liefert, stelle ich meine Frage nun hier.

Gruß
Dragonas

NurPech · 5. Februar 2012, 22:41

inwiefern dynamisch?

Dragonas · 5. Februar 2012, 22:47

Ich versuche es mal zu erklären:

Immoment sind in der Datenbank 50 Likes, diese werden auf der Website ja auch angezeigt, wenn jemand jetzt auf "Like" drückt dann soll sich die Seite nicht erst erneut laden sondern sofort 51 anzeigt werden und der neue Wert in die Datenbank übermittelt werden.

NurPech · 5. Februar 2012, 22:57

Naja. Dafür bäruchtest du Ajax.

Kannst dir ja das Tutorial von Maddin durchlesen:

[HTML/JQUERY] Dynamischer Content durch hashchanges

Dragonas · 5. Februar 2012, 23:14

Danke NurPech, falls es Fragen gibt stelle ich sie hier dann ;-)

Gruß
Dragonas

Maddin · 6. Februar 2012, 13:40

Wenn du den html code ein wenig änderst kannst du es so machen:

HTML-Quellcode

<div class="like" id="3">
<a href="like.php?id=3" id="likeButton">
<img title="Klicke hier um das Bild zu liken." src="images/like.png">
</a>
<font style="float:right;" size="2">Likes: <span id="likeCount">172</span></font>
</div>

JavaScript-Quellcode

$('.like #likeButton').click(function(e) {
//Script mit dem href link des geklickten like Buttons aufrufen
$.ajax($(this).attr('href'));
//ID herausfinden
var id = $(this).parent('.like').attr('id');
//Counter = counter+1 setzen
$('.like#' + id + ' #likeCount').html(
$('.like#' + id + ' likeCount').html()+1
);
//Href event deaktivieren (Damit dem Brwoser nicht den Link aufruft)
e.preventDefault();
});

Alles anzeigen

Ist ein bisschen länger geworden, dafür ist es aber "dynamisch"

Musst nur den code entsprechend ändern, wegen den ID's usw. Und halt daran denken sowohl im Link als auch im div die ID immer entsprechend zu ändern.

HTML-Quellcode

JavaScript-Quellcode

Teilen