Ankündigung

Einklappen
Keine Ankündigung bisher.

like dislike mvc modul: wie aktualisiere ich per ajax?

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • like dislike mvc modul: wie aktualisiere ich per ajax?

    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.

    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_alias1]);

                
    $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>
    Anscheinend werden nach einem Click keine Daten per POST gesendet, was zur Folge hat, daß die nötigen Datenbankanweisungen (SWITCH) nicht ausgeführt werden:

    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
    Somit scheint mein AJAX fehlerhaft zu sein:

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

  • #2
    Ich finde den Code nicht, mit dem Du Json zurückschickst.

    Kommentar


    • #3
      Zitat von knuffiwuffi Beitrag anzeigen
      Ich sollte dazu sagen, daß ich mich erst wenige Tage mit JS beschäftige
      Dann solltest du als aller erstes vergessen dass es jQuery mal gab. Wirf das Ding in die Tonne, das braucht es heutzutage nicht mehr: querySelectorAll, addEventListener, fetch-API, dataset und classList existieren.

      PHP-Code:
      $action $_POST['action']; 
      Das habe ich noch nie verstanden wofür das unnötige Umkopieren von Werten gut sein soll …

      HTML-Code:
      <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>
      Warum setzt du nicht nur die unterschiedlichen Klassen in der Bedingung sondern alles? (wobei "fas" und "far" schlechte Namen sind - meinst du dass du in einem halben Jahr noch weist wofür die stehen?) Was macht das style-Attribut da? Das gehört in die CSS-Datei. Und wo ist der Inhalt des i-Elements? Per Sprachausgabe wird da nichts ausgegeben werden (außer der Anzahl der Bewertungen) …

      Ganz davon zu schweigen dass i das völlig falsche Element ist: i ist kein interaktives Element und damit per Tastatur nicht erreichbar - du möchtest ein <button type="button"> verwenden.

      <script type="text/javascript">
      Das type-Attribut ist nicht mehr nötig -> weg damit.

      Code:
      $('.like-btn').on('click', function(){
      […]
      $('.dislike-btn').on('click', function(){
      […]
      Du hast zweimal den gleichen Code das sollte man vermeiden und eine Funktion mit entsprechenden Parametern verwenden (oder mit data-Attributen arbeiten aus denen sich der EventHandler die Info holt was er machen muss).

      Anscheinend werden nach einem Click keine Daten per POST gesendet, was zur Folge hat, daß die nötigen Datenbankanweisungen (SWITCH) nicht ausgeführt werden:
      "Anscheindend" hilft beim Programmieren recht wenig - überprüfe es!

      Also ein Fremdscript - warum fragst du nicht den Autor?

      Kommentar


      • #4
        Du meinst sicher den nachfolgenden Code:

        Code:
        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');
                    }
                }
        Das wäre ja meine Frage...wie sende ich die POST Daten korrekt und aktualisiere zudem die Zahlen $likes + $dislikes?
        Aktuell gehe ich davon aus, daß der Ajax Call die gesamte index.php neu lädt und somit auch die Zahlen aktualisiert werden (nachdem auf Datenbankebene aktualisiert wurde).

        Ich sehe gerade, daß ich dafür die Datenbankanweisungen - SWITCH - wohl ganz an den Anfang der index.php stellen müsste, und danach die Variablen laden sollte.

        Zunächst sollte der POST aber funktionieren, damit die Datenbankanweisungen überhaupt ausgeführt werden.

        Meine Schwierigkeit wird wohl sein, nachfolgenden Code zu verstehen und somit die Daten korrekt zu übergeben.

        Wie gesagt: JS Anfänger und eher Hobby-Programmierer

        Code:
        res = JSON.parse(data);

        Kommentar


        • #5
          Zitat von tk1234 Beitrag anzeigen
          Also ein Fremdscript - warum fragst du nicht den Autor?
          Danke für deinen Input. Werde versuchen, daran zu knabbern und den Code zu verbessern...und schaue mir auch einige AJAX + JS Tutorials an, bevor es weitergeht.

          Ich habe, wie beschrieben, so gut wie keine Ahnung von JS/AJAX/JQuery und lerne, indem ich erstmal mache.
          Das Fremdscript war nur eine Grundlage für einen ersten Erfolg und um eine bereits bestehende Logik nachzuvollziehen.

          Kommentar


          • #6
            Zitat von knuffiwuffi Beitrag anzeigen
            Du meinst sicher den nachfolgenden Code: […]
            Nein, ich nehme mal an dass kaminbausatz den PHP-Code meint der json-Daten an das Javascript zurück schickt die dann von JSON.parse verarbeitet werden können.

            Aktuell gehe ich davon aus, daß der Ajax Call die gesamte index.php neu lädt und somit auch die Zahlen aktualisiert werden (nachdem auf Datenbankebene aktualisiert wurde).
            Ich glaube du hast da ein Verständnisproblem: selbst wenn in der index.php der Ajax-Request bearbeitet wird, heißt das noch lange nicht dass irgendwelche Zahlen auf magische Weise in der aktuellen Seite aktualisiert werden - darum musst du dich schon selbst kümmern … Du kannst natürlich auch den ganzen JS-Kram weglassen und ganz normale Formulare verwenden die eine neue Seite aufrufen auf der die entsprechenden Daten geändert sind - schöner ist es aber wohl mit JS im Hintergrund, dann musst du dich aber selbst darum kümmern dass jegliche Angaben geändert werden.

            Und du darfst immer noch nicht davon ausgehen dass irgendwas bestimmtes passiert, du musst es überprüfen, sonst kommst du nie auf einen grünen Zweig …

            Ich sehe gerade, daß ich dafür die Datenbankanweisungen - SWITCH - wohl ganz an den Anfang der index.php stellen müsste, und danach die Variablen laden sollte.
            Eigentlich gehört der Code zum Aktualisieren der Bewertungen überhaupt nicht in die index.php, das sollte eher eine eigene Datei sein die nur dafür da ist auf die Requests per JS zu reagieren.

            Zitat von knuffiwuffi Beitrag anzeigen
            Ich habe, wie beschrieben, so gut wie keine Ahnung von JS/AJAX/JQuery und lerne, indem ich erstmal mache.
            Deswegen auch der Hinweis: vergiss jQuery! Früher war es notwendig sowas zu verwenden da die Unterschiede in den Browsern recht groß waren, jetzt ist das aber nicht mehr der Fall - und wenn du gerade mit JS anfängst würde ich dir dringend davon abraten mit jQuery zu arbeiten.

            Kommentar


            • #7
              @tk1234

              Danke für deine Tips. Hilft mir dabei, nun in die richtige Richtung zu arbeiten (lernen).

              Werde mich nun mit JS und AJAX beschäftigen + deine Tips aus dem ersten Post nachschauen und dann den gesamten Code überarbeiten.

              Es war ein erster Versuch

              Kommentar


              • #8
                Zitat von tk1234 Beitrag anzeigen
                Nein, ich nehme mal an dass kaminbausatz den PHP-Code meint der json-Daten an das Javascript zurück schickt die dann von JSON.parse verarbeitet werden können.
                Exakt das meinte ich.

                Kommentar


                • #9
                  Über jQuery wird genug gestritten, ich nutze es eher gelegentlich und mag das MethodChaining.

                  Kommentar


                  • #10
                    ...work in progress

                    Kommentar


                    • #11
                      Ich habe es nun tatsächlich hinbekommen, per POST die Daten zu senden und die Datenbankanweisungen abzufeuern.

                      Ich werde noch ein wenig an meiner Baustelle arbeiten und final gerne noch einmal den Code posten.

                      Danke nochmal an tk1234 für die hilfreichen Tips

                      Kommentar

                      Lädt...
                      X