Like Buttons individueel laten werken op ID

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Johnny Test

Johnny Test

14/05/2015 18:05:41
Quote Anchor link
Hallo, ik heb een php bestandje gemaakt waarin ik een aantal statussen/posts uit de database haal en deze posts toon ik allemaal onder elkaar. Hierbij heb ik een like-button gemaakt. Als ik de like button 1x ergens toevoegde werkte deze perfect. Ik heb de likebutton mee in een while-lus gezet omdat ik natuurlijk voor elke post een werkende like-button wil hebben. Hiervoor had ik natuurlijk wel al door dat ik de like buttons via ID moest linken met de posts waar ze bij staan. Ik maak ook gebruik van mijn database om de likes in op te slaan op de correcte manier.
Zo heb ik in de database:
→Een likeID
→Een tijdlijnID (postID)
→Een gebruikersID (om na te kijken of de ingelogde persoon een bepaalde status al geliked heeft)

Het probleem is dat de like buttons niet perfect werken. Wanneer ik op 1 van de buttons klik komt er in de database automatisch te staan:
→tijdlijnID = 1 (de allereerste status wordt dus enkel aangepast, dit is de laatste status in de query omdat ik de nieuwste statussen bovenaan toon)


(mijn fout zit dus bij de "result['tijdlijnID'])


Heeft iemand een idee hoe ik dit zou kunnen oplossen? Bedankt :)

Tijdlijn.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<?php    
//tijdlijn.php

    $result = mysqli_query($con,"SELECT * FROM tijdlijn");
    $row2 = mysqli_fetch_assoc($result);
    $query = mysqli_query($con, "SELECT * FROM tijdlijn INNER JOIN vriendenlijst ON vriendenlijst.user_id='".$_SESSION['gebruikersID']."' AND tijdlijn.gebruikersID = vriendenlijst.friend_id ORDER BY date DESC ");



 while( $result = mysqli_fetch_assoc($query) )
{
        $querylikes = mysqli_query($con, "SELECT likeID FROM likes WHERE tijdlijnID= '".$result['tijdlijnID']."'");    
        $aantallikes = mysqli_num_rows($querylikes);
        
        $queryimage = mysqli_query($con, "SELECT * FROM likes WHERE tijdlijnID= '".$result['tijdlijnID']."'");    
        $row2 = mysqli_fetch_assoc($queryimage);
        
        //STATUS
        echo $result['status']
        echo "<br>";
        if ($row2['gebruikersID']== $_SESSION['gebruikersID'])
        {    
            //afbeelding = like.jpg
            echo
            "<input type='image' src='like.jpg' name='saveForm' class='btTxt submit' style='width:30px;height:30px' id='".$result['tijdlijnID']."' onclick='mijnFunctie();likeBijtellen()'/>  
            <h13><div id='aantallikes'>".$aantallikes."</div></h13>"
        }    
        else
        {
            //afbeelding = unlike.jpg
            echo
            "<input type='image' src='unlike.jpg' name='saveForm' class='btTxt submit' style='width:30px;height:30px' id='".$result['tijdlijnID']."' onclick='mijnFunctie();likeBijtellen()'/>  
            <h13><div id='aantallikes'>".$aantallikes."</div></h13>"
        }
        
        //afbeelding veranderen naar like.jpg of unlike.jpg na de klik
        echo '<script language="javascript">
        function mijnFunctie(){
        if(document.getElementById("'.$result['tijdlijnID'].'").getAttribute("src") == "like.jpg")
        {
        changeImage1()
        }
        else
        {
        changeImage2()
        }
    }

        function changeImage1() {

        if (document.getElementById("'.$result['tijdlijnID'].'").src == "unlike.jpg")
        {
            document.getElementById("'.$result['tijdlijnID'].'").src = "like.jpg";
        }
        else
        {
            document.getElementById("'.$result['tijdlijnID'].'").src = "unlike.jpg";
        }
    }
        </script>

        <script language="javascript">
        function changeImage2() {

        if (document.getElementById("'.$result['tijdlijnID'].'").src == "like.jpg")
        {
            document.getElementById("'.$result['tijdlijnID'].'").src = "unlike.jpg";
        }
        else
        {
            document.getElementById("'.$result['tijdlijnID'].'").src = "like.jpg";
        }
    }    
        </script>';
        
        
    echo '<script>
    function likeBijtellen()
    {
    if(document.getElementById("'.$result['tijdlijnID'].'").getAttribute("src") == "like.jpg")
    {';
        $aantallikes = $aantallikes +1;
        $like = 1;
        echo 'var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("POST","ajax.php",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("aantallikes='.$aantallikes.'  & geliked='.$like.' & tijdlijnid='.$result['tijdlijnID'].'");
    }
        else
        {';
        $aantallikes = $aantallikes -1;
        $like = 0;
        echo 'var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("POST","ajax.php",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("aantallikes='.$aantallikes.'  & geliked='.$like.' & tijdlijnid='.$result['tijdlijnID'].'");
        }
    }
    </script>';    
}            
?>


Likeaanpassing.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
//Likeaanpassing.php
include 'connectie.php';
session_start();


$gebruikersID = $_SESSION['gebruikersID']; //gebruikersID van de ingelogde persoon



$geliked = $_POST['geliked']; // 1 of 0
$tijdlijnID = $_POST['tijdlijnid']; // status-id


if ($geliked == 1)
{
    mysqli_query($con, "INSERT INTO likes (gebruikersID, tijdlijnID) VALUES ('$gebruikersID', '$tijdlijnID')");
}
else if ($geliked == 0)
{
    mysqli_query($con, "DELETE FROM likes WHERE tijdlijnID = '".$tijdlijnID."' AND gebruikersID = '".$gebruikersID."'");
}

    //aantal likes opnieuw nakijken
    $querylikes = mysqli_query($con, "SELECT likeID FROM likes WHERE tijdlijnID= '".$tijdlijnID."'");
    $aantallikes = mysqli_num_rows($querylikes);
    //aanpassen aantal likes
    echo $aantallikes;
?>



Ik wist niet goed waar ik dit bericht op het forum moest plaatsten (javascript(ajax) of php) omdat ik van beiden gebruik gemaakt heb.
Gewijzigd op 14/05/2015 18:10:15 door Johnny Test
 
PHP hulp

PHP hulp

29/04/2024 16:05:06
 
Thomas van den Heuvel

Thomas van den Heuvel

14/05/2015 21:25:13
Quote Anchor link
In het eerste fragment haal je maar 1 rij op van $result (regel 4 en 5). Deze sla je op in $row2 (waar verder niets mee gebeurt?!).

Vervolgens ga je met $query uit regel 6 verder.

Op regel 10 wordt $result ineens gebruikt als resultaatrij waarbij je $result uit regel 4 -waar dit een queryresultaat was- overschrijft.

Vervolgens overschrijf je $row2 op regel 16.

Ik denk dat je best wat queries bij elkaar kunt vegen waarbij je gebruik maakt van LEFT JOINs op tijdlijn.


En dan heb je (javascript) functies in een while loop staan... Dat kan nooit goed gaan... Die dingen accepteren toch parameters? Dan doen changeImage1() en changeImage2() volgens mij effectief hetzelfde (ze togglen tussen twee plaatjes).

Vervolgens XMLHttpRequests()? Waar heb je dit vandaan gevist. Gebruik een library zoals jQuery oid.

Tijd om dit stuk code om te schrijven, want er klopt weinig van.
 
Johnny Test

Johnny Test

15/05/2015 14:10:54
Quote Anchor link
$result = mysqli_query($con,"SELECT * FROM tijdlijn");
en
$row2 = mysqli_fetch_assoc($result);
had ik vergeten te verwijderen want die heb ik inderdaad niet nodig.

changeimage1() en changeimage2() werken blijkbaar enkel zo, dus niet als ik 1 functie changeimage() gebruik.

Hoe kan ik mijn javascript functies dan via mijn $result['tijdlijnID'] laten werken als ze niet in de while loop kunnen staan?
 
Thomas van den Heuvel

Thomas van den Heuvel

15/05/2015 14:27:00
Quote Anchor link
Kijk eens naar wat die functie doet (het moet trouwens type="text/javascript" zijn, niet language="javascript" oid):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<?php
echo '<script type="text/javascript">
function changeImage1() {
    if (document.getElementById("'.$result['tijdlijnID'].'").src == "unlike.jpg") {
        document.getElementById("'.$result['tijdlijnID'].'").src = "like.jpg";
    } else {
        document.getElementById("'.$result['tijdlijnID'].'").src = "unlike.jpg";
    }
}';
?>

Wat is het variabele deel hierin? $result['tijdlijnID']. Die zou je toch als parameter aan de functie kunnen voeren in plaats van het continue her-declareren van dezelfde functie?

Er is een verschil tussen declaratie en aanroep.

declaratie
Kan prima in puur Javascript:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
function changeImage(id) {
    var elt = document.getElementById(id);
    if (elt.src == "unlike.jpg") {
        elt.src = "like.jpg";
    } else {
        elt.src = "unlike.jpg";
    }
}
</script>

aanroep
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<script type="text/javascript">
changeImage(<?php echo $result['tijdlijnID'] ?>);
</script>

Daarnaast is een auto-increment id (een getal) geen geldige waarde voor het id van een element. Volgens mij volgen deze waarden dezelfde regels als de naamgeving van variabelen, deze schrijven onder andere voor dat de waarden niet mogen beginnen met / enkel mogen bestaan uit cijfers.

Zoals eerder gezegd: ik raad je (dringend) aan om bovenstaande gribus te refactoren.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.