Hallo,
ich programmiere mir aktuell ein like/dislike (Daumen hoch/Daumen runter) stand alone MVC modul und habe Schwierigkeiten, wenn es um die Aktualisierung per Ajax geht.
Ich sollte dazu sagen, daß ich mich erst wenige Tage mit JS beschäftige und diesen Schritt (leider) immer gescheut habe.
Derzeit funktioniert die Aktualisierung der Klassen nach einem Click und auch der Aufruf eines Anmeldeformulars, sollte der User nicht angemeldet sein.
Was noch nicht wirklich funktioniert, sind die ACTION Anweisungen und somit die Aktualisierung der Like/Dislike Zahlen.
Anscheinend werden nach einem Click keine Daten per POST gesendet, was zur Folge hat, daß die nötigen Datenbankanweisungen (SWITCH) nicht ausgeführt werden:
Somit scheint mein AJAX fehlerhaft zu sein:
Die index.php meines Moduls wird in einem Bereich einer bestehenden Joomla 4 Seite angezeigt und ist weitesgehend losgelößt von dem Joomla CMS.
Grundlage für meinen Ansatz: https://codewithawa.com/posts/like-d...php-and--mysql
ich programmiere mir aktuell ein like/dislike (Daumen hoch/Daumen runter) stand alone MVC modul und habe Schwierigkeiten, wenn es um die Aktualisierung per Ajax geht.
Ich sollte dazu sagen, daß ich mich erst wenige Tage mit JS beschäftige und diesen Schritt (leider) immer gescheut habe.
Derzeit funktioniert die Aktualisierung der Klassen nach einem Click und auch der Aufruf eines Anmeldeformulars, sollte der User nicht angemeldet sein.
Was noch nicht wirklich funktioniert, sind die ACTION Anweisungen und somit die Aktualisierung der Like/Dislike Zahlen.
PHP-Code:
<?php
$joomla4 = new Joomla4();
$user_id = $joomla4->getUserId();
$toolbox = new Toolbox();
$url = $toolbox->getStringUrl();
$page_id = $toolbox->getGridboxPageId();
$page_alias = $toolbox->getGridboxPageAlias();
$placeholder = $toolbox->getGridboxPlaceholder('');
$view = new GridboxAppVideosRatingView();
$likes = $view->showLikes($page_alias);
$dislikes = $view->showDislikes($page_alias);
$likes_and_dislikes = $view->showLikesAndDislikes($page_alias);
$user_already_liked = $view->showUserAlreadyLiked($user_id, $page_alias);
$user_already_disliked = $view->showUserAlreadyDisliked($user_id, $page_alias);
// if user clicks like or dislike button
if (isset($_POST['action']))
{
echo "action is set to:" . $_POST['action'] . "<br>";
echo "page alias is set to:" . $_POST['page_alias'] . "<br>";
$action = $_POST['action'];
$page_alias = $_POST['page_alias'];
switch ($action)
{
// like
case 'like':
$sql="INSERT INTO custom_app_videos_rating (page_alias, rating) VALUES (?, ?) ON DUPLICATE KEY UPDATE rating = 1";
$stmt = $database_connection->prepare($sql);
$stmt->execute([$page_alias, 1]);
$sql="INSERT INTO custom_app_videos_rating_details (user_id, page_alias, rating) VALUES (?, ?, ?) ON DUPLICATE KEY UPDATE rating = 1";
$stmt = $database_connection->prepare($sql);
$stmt->execute([$user_id, $page_alias, $rating]);
break;
// dislike
case 'dislike':
$sql="INSERT INTO custom_app_videos_rating (page_alias, rating) VALUES (?, ?) ON DUPLICATE KEY UPDATE rating = -1";
$stmt = $database_connection->prepare($sql);
$stmt->execute([$page_alias, -1]);
$sql="INSERT INTO custom_app_videos_rating_details (user_id, page_alias, rating) VALUES (?, ?, ?) ON DUPLICATE KEY UPDATE rating = -1";
$stmt = $database_connection->prepare($sql);
$stmt->execute([$user_id, $page_alias, $rating]);
break;
// unlike
case 'unlike':
$sql="UPDATE custom_app_videos_rating SET rating_likes = rating_likes - 1 WHERE page_alias = ?";
$stmt = $database_connection->prepare($sql);
$stmt->execute([$page_alias]);
$sql="DELETE FROM custom_app_videos_rating_details WHERE user_id = ? AND page_alias = ?";
$stmt = $database_connection->prepare($sql);
$stmt->execute([$user_id, $page_alias]);
break;
// undislike
case 'undislike':
$sql="UPDATE custom_app_videos_rating SET rating_dislikes = rating_dislikes - 1 WHERE page_alias = ?";
$stmt = $database_connection->prepare($sql);
$stmt->execute([$page_alias]);
$sql="DELETE FROM custom_app_videos_rating_details WHERE user_id = ? AND page_alias = ?";
$stmt = $database_connection->prepare($sql);
$stmt->execute([$user_id, $page_alias]);
break;
default:
break;
}
}
?>
<style>
.custom-module-gridbox-app-videos-rating .container.rating
{
display: inline-block;
background: var(--bg-dark);
border-radius: 5px;
font-size: 16px;
}
.custom-module-gridbox-app-videos-rating .container.rating .likebox
{
display: inline-block;
padding: 5px 10px 5px 10px;
}
.custom-module-gridbox-app-videos-rating .container.rating .likebox i
{
margin: 0px 5px 0px 0px;
}
.custom-module-gridbox-app-videos-rating .container.rating .likebox i.login-required
{
color: var(--text);
}
.custom-module-gridbox-app-videos-rating .container.rating .likebox i.login-not-required
{
color: var(--color-1);
}
.custom-module-gridbox-app-videos-rating .container.rating .dislikebox
{
display: inline-block;
padding: 5px 10px 5px 10px;
}
.custom-module-gridbox-app-videos-rating .container.rating .dislikebox i
{
margin: 0px 5px 0px 0px;
}
.custom-module-gridbox-app-videos-rating .container.rating .dislikebox i.login-required
{
color: var(--text);
}
.custom-module-gridbox-app-videos-rating .container.rating .dislikebox i.login-not-required
{
color: var(--color-3);
}
</style>
<div class="custom-module-gridbox-app-videos-rating">
<? if (strpos($url, 'view=gridbox') == true): ?>
<div class="container placeholder">
<?php echo $placeholder; ?>
</div>
<? else: ?>
<div class="container rating">
<?php if($user_id > 0): ?>
<!-- login not required -->
<div class="likebox">
<i <?php if ($user_already_liked): ?>
class="fas fa-thumbs-up like-btn login-not-required" style="cursor: pointer;"
<?php else: ?>
class="far fa-thumbs-up like-btn login-not-required" style="cursor: pointer;"
<?php endif ?>
data-id="<?php echo $page_alias; ?>"></i>
<span class="likes"><?php echo $likes; ?></span>
</div>
<div class="dislikebox">
<i <?php if ($user_already_disliked): ?>
class="fas fa-thumbs-down dislike-btn login-not-required" style="cursor: pointer;"
<?php else: ?>
class="far fa-thumbs-down dislike-btn login-not-required" style="cursor: pointer;"
<?php endif ?>
data-id="<?php echo $page_alias; ?>"></i>
<span class="dislikes"><?php echo $dislikes; ?></span>
</div>
<?php else: ?>
<!-- login required -->
<div class="likebox">
<i <?php if ($user_already_liked): ?>
class="fas fa-thumbs-up like-btn login-required" style="cursor: pointer;"
<?php else: ?>
class="far fa-thumbs-up like-btn login-required" style="cursor: pointer;"
<?php endif ?>
data-id="<?php echo $page_alias; ?>"></i>
<span class="likes"><?php echo $likes; ?></span>
</div>
<div class="dislikebox">
<i <?php if ($user_already_disliked): ?>
class="fas fa-thumbs-down dislike-btn login-required" style="cursor: pointer;"
<?php else: ?>
class="far fa-thumbs-down dislike-btn login-required" style="cursor: pointer;"
<?php endif ?>
data-id="<?php echo $page_alias; ?>"></i>
<span class="dislikes"><?php echo $dislikes; ?></span>
</div>
<? endif; ?>
</div>
<br>
<? endif; ?>
</div>
<script type="text/javascript">
// if user clicks on like
$('.like-btn').on('click', function(){
var page_alias = $(this).data('id');
$clicked_btn = $(this);
if ($clicked_btn.hasClass('login-required')){
$('#item-16551093445430').find('a').trigger('click');
} else if($clicked_btn.hasClass('fas', 'fa-thumbs-up')){
action = 'unlike';
} else if($clicked_btn.hasClass('far', 'fa-thumbs-up')){
action = 'like';
}
$.ajax({
url: 'index.php',
type: 'post',
data: {
'action': action,
'page_alias': page_alias
},
success: function(data){
res = JSON.parse(data);
if (action == "like") {
$clicked_btn.removeClass('far');
$clicked_btn.addClass('fas');
} else if(action == "unlike") {
$clicked_btn.removeClass('fas');
$clicked_btn.addClass('far');
}
}
});
});
// if user clicks on dislike
$('.dislike-btn').on('click', function(){
var page_alias = $(this).data('id');
$clicked_btn = $(this);
if ($clicked_btn.hasClass('login-required')){
$('#item-16551093445430').find('a').trigger('click');
} else if($clicked_btn.hasClass('fas', 'fa-thumbs-down')){
action = 'undislike';
} else if($clicked_btn.hasClass('far', 'fa-thumbs-down')){
action = 'dislike';
}
$.ajax({
url: 'index.php',
type: 'post',
data: {
'action': action,
'page_alias': page_alias
},
success: function(data){
res = JSON.parse(data);
if (action == "like") {
$clicked_btn.removeClass('far');
$clicked_btn.addClass('fas');
} else if(action == "unlike") {
$clicked_btn.removeClass('fas');
$clicked_btn.addClass('far');
}
}
});
});
</script>
PHP-Code:
// if user clicks like or dislike button
if (isset($_POST['action']))
{
echo "action is set to:" . $_POST['action'] . "<br>";
echo "page alias is set to:" . $_POST['page_alias'] . "<br>";
$action = $_POST['action'];
$page_alias = $_POST['page_alias'];
switch ($action)
PHP-Code:
$.ajax({
url: 'index.php',
type: 'post',
data: {
'action': action,
'page_alias': page_alias
},
success: function(data){
res = JSON.parse(data);
if (action == "like") {
$clicked_btn.removeClass('far');
$clicked_btn.addClass('fas');
} else if(action == "unlike") {
$clicked_btn.removeClass('fas');
$clicked_btn.addClass('far');
}
}
Grundlage für meinen Ansatz: https://codewithawa.com/posts/like-d...php-and--mysql
Kommentar