Onclick row, show extra database data in div.

Door Fabian W op 07-03-2015 16:24 gewijzigd op 07-03-2015 16:25

4.487 views

Ik heb een database met allerlei hitlijst data over een nummer. Ik wil niet alle data in een tabel zetten, maar de meeste data pas ophalen als er op een bepaald nummer wordt geklikt (tabel row). In een div op de pagina moet dan meer data over dat bepaalde data verschijnen. Hieronder leg ik het met afbeeldingen nog een keer uit.

Huidig: [img]http://s1.postimg.org/c4zw25h63/datatable.png[/img]
Gewenst: [img]http://s1.postimg.org/c69tvkizv/datadyna.png[/img]

Kan iemand me hierbij helpen? Ik vind het behoorlijk lastig om dynamisch data uit de database te halen en dit met een javascript functie (waarschijnlijk) te linken aan de user-interface.

Ik heb een database die uit de volgende twee tabellen bestaat:

songs:
ID (PK, A_I)
Title
Artist
Image

pchart:
ID (PK, A_I)
Rank
Jaar
Week
ID_Songs (komt overeen met songs.ID bij een joint)

Dit is hoe ik nu gegevens uit de database haal, maar zoals gezegd wil ik dus niet alle data in een keer showen:
<?php
$sql = "SELECT c.songid, s.title, s.artist, s.image, c.rank this_week, COALESCE(p.rank, '---') last_week,
COUNT(g.rank) total_weeks, MIN(g.rank) peak_position, (41 * COUNT(g.rank)-SUM(g.rank)) points
FROM pchart c
JOIN songs s
ON c.songid = s.id
LEFT JOIN pchart p
ON c.songid = p.songid AND p.week=".$last_week." AND p.year=".$last_year."
LEFT JOIN pchart g
ON c.songid = g.songid
WHERE
c.week= ".$this_week." AND c.year= ".$this_year."
GROUP BY this_week, c.songid, s.title, s.artist, last_week
ORDER BY this_week";

//$con == connection, $sql = sql query
$mysqli = mysqli_query($con, $sql);

// output the sql table
while($row = mysqli_fetch_array($mysqli)) {
$x++;
$color = ($x%2 == 0)? 'row1': 'row2';
echo "<tr id='$color'>";
echo "<td id='vw'>" . $row['this_week'] . "</td>";
echo "<td id='vw'>" . $row['last_week'] . "</td>";
echo "<td id='pic'><img src='" . $row["image"] . "' width='50px' height='50px'></td>";
echo "<td id='song'>" . $row['artist'] . "</td>";
echo "<td id='song'>" . $row['title'] . "</td>";
echo "<td id='wk'>" . $row['peak_position'] . "</td>";
echo "<td id='wk'>" . $row['total_weeks'] . "</td>";
echo "<td id='wk'>" . $row['points'] . "</td>";
echo "</tr>";
}
echo "</tbody></table>";
}
mysqli_close($con);

?>

Thomas van den Heuvel

18-03-2015 21:01 gewijzigd op 18-03-2015 21:15

Toegegeven, ik heb het voorgaande niet heel grondig doorgenomen, maar ik denk dat je twee dingen verwart.

In het kort: het idee van AJAX-calls is meestal het ophalen of wegschrijven van data op de achtergrond, zonder dat je van de huidige pagina wegnavigeert.

In jouw geval wil je volgens mij twee dingen:
1. enerzijds wil je een lijst met algemene informatie van artiesten/nummers uit een bepaalde periode
2. anderzijds wil je gedetailleerde informatie wanneer je op een artiest/nummer klikt

In het eerste geval ververs je telkens je pagina waarin je periode X toont - dit is een compleet HTML-document dat gegenereerd wordt door een script. Dit op grond van een "normale HTTP request".

In het tweede geval laad je (op de achtergrond, na een klik) een snippet JSON/HTML in die je invoegt in een gefloate div oid in de huidige pagina. Dit is een AJAX request.

Maar nu heb je nummertje #1 deels overgeheveld naar een AJAX-request. Wil je je hele applicatie opzetten middels AJAX-calls, of alleen het ophalen van extra info waar je het in je oorspronkelijke bericht over hebt want ik denk dus dat er nu wat dingen door elkaar gaan lopen.

EDIT: en als je het eerste wilt (alles via AJAX calls) dan moet je zorgen dat:
- je niet wegnavigeert van de huidige pagina, zoals je nu wel doet
- je alle informatie doorgeeft aan het script wat de AJAX call afhandelt, op dit moment geef je geen data door via de AJAX-call (het "data" attribuut ontbreekt volledig in je AJAX call, je vraagt dus informatie op zonder dat je aangeeft wat je zoekt)
- de methode in overeenstemming is met wat het afhandelscript verwacht te ontvangen, de methode in je call is GET, terwijl het afhandelscript POST verwacht

Fabian W

18-03-2015 21:14 gewijzigd op 18-03-2015 21:17

Het belangrijkste voor mij is gewoon dat het geheel werkt. Kortaf gezegd: maakt niet uit hoe.
Ik wil iig uitvogelen hoe ik data onclick kan ophalen.

Edit: Als ik niet wil weg navigeren van de pagina kan ik dus geen json_encode gebruiken.

Thomas van den Heuvel

18-03-2015 21:23 gewijzigd op 18-03-2015 21:38

Het klinkt misschien flauw, maar ik denk dat het eerst zaak is dat je een aanpak kiest, voor zowel (1) het genereren van de lijsten en (2) voor het ophalen van de details. Dit zijn twee verschillende dingen die je hier probeert te combineren.

(1) kan prima zonder AJAX/jQuery / de hele rataplan
(2) is AJAX beter geschikt

Ik weet op dit moment niet wat je wilt, en kan je dus ook niet helpen.

Besluit WAT je wilt doen, dan kunnen we helpen met het HOE.

EDIT: naar mijn mening gaf Frank hierboven best een aardige voorzet. Vervolgens zul je de eindjes een beetje aan elkaar moeten knopen. Je zou bijvoorbeeld je buttons kunnen voorzien van een data-attribuut die een artiest-id bevat. Vervolgens geef je die knoppen een klasse en definieer je een onclick-event voor wanneer er op knoppen van die klasse geklikt wordt waarbij het artiest-id uit de knop gevist wordt om de gewenste informatie op te halen.

Fabian W

18-03-2015 21:35

Je hebt daar een goed punt.
Het plan is om de basistabel zo te laten als die eerst was (bovenaan de pagina).
De sidebar met extra info gaan we via Ajax ophalen.

Thomas van den Heuvel

18-03-2015 21:54

Kun je iets met de bovenstaande edit? Je moet als je op een "meer info" knop drukt op een of andere manier de benodigde informatie doorsluizen naar het script dat de AJAX-request afhandelt. Deze informatie kun je "in" de knop stoppen met data-... attributen.

Heel kort door de bocht:

...
artiest - nummer <button type="button" class="moreinfo" data-song="1">info</button>
artiest - nummer <button type="button" class="moreinfo" data-song="2">info</button>
artiest - nummer <button type="button" class="moreinfo" data-song="3">info</button>
...

En vervolgens een click-event wat hierop acteert:

<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    $('button.moreinfo').click(function(e) {
        // de knop heeft verder geen effect
        e.preventDefault();
        // peuter data uit knop
        var song = $(this).attr('data-song');
        // paas deze data door aan je AJAX-call
        $.ajax({
            'method': 'GET', // controleer in het script dus op $_GET
            'url': 'ajaxGetSong.php', // naam van script voor afhandeling verzoek
            'data': {'id': song }, // controleer dus op $_GET['id']
            'dataType': 'json', // vertel wat voor datatype je terugverwacht
            'success': function(data) {
                // code die (in dit geval) JSON-data verder verwerkt
                // ...
            }
        });
    });
});
//]]>
</script>

Noot: deze code verder niet getest, maar dit is het idee. En bijna een kopie van wat Frank al had denk ik.

Fabian W

18-03-2015 23:12

Hoe geef ik het juiste ID mee?

Dit is mijn succes functie:


function jsonParser1(data) 
{
    HTML = "<img src='";
	HTML += data.list.image;
	HTML += "' width='50px' height='50px'><br>Artiest: ";
	HTML += data.list.artist;
	HTML += "<br>Titel: ";
	HTML += data.list.title;
	HTML += "<br>Hoogste plaats: ";
	HTML += data.list.peak_position;
	HTML += "<br>Aantal weken: ";
	HTML += data.list.total_weeks;
	HTML += "<br>Aantal punten: ";
	HTML += data.list.points;
    
	document.getElementById("sidebar").innerHTML = HTML; 
}

Wat html als output geeft is:
Artiest: undefined
Titel: undefined
etc

Thomas van den Heuvel

18-03-2015 23:41

Dat beschrijf ik hierboven... lees de reacties in deze thread nog eens goed door zodat je een beter beeld krijgt van hoe PHP-scripts onderling communiceren (data uitwisselen) via AJAX-requests...

Het juiste id geef je mee... door het juiste id op te geven... en het juiste id uit te lezen...

Hierboven staat (wederom) haast stap voor stap uitgelegd hoe dit moet.

Het enige wat jij hoeft te doen is die laatste paar denkstappen volgen en dan ben je er.

Fabian W

20-03-2015 22:34

Je geeft een aantal hints als 'controleer dus op $_GET['id']'

Maar hoe komt ajaxGetSong.php er dan uit te zien?
Iets als dit? Ik heb letterlijk 0 ervaring met het meegeven van data via ajax.

<?php
if ($_get['id'] = $song){
$list = array(
'status' => 'ok',
'list' => $song
);
}
else {
$list = array(
'status' => 'error',
'error' => 'niets gevonden.'
);
}

// echo de json string
echo json_encode($list);
?>

Thomas van den Heuvel

21-03-2015 00:59 gewijzigd op 21-03-2015 01:12

Via de "data" parameter geef je informatie door in de AJAX-call.

De data is bijvoorbeeld: {'id': <een getal>}

In combinatie met de "method" GET en de "url" "ajaxGetSong.php" wordt de uiteindelijke aanroep dus:
ajaxGetSong.php?id=<een getal>

GET geeft aan dat de parameters in de URL worden doorgegeven.

Daarna is het in dit script "business as usual": je leest het id weer uit via $_GET['id'] zoals je in een normaal PHP-script zou doen. Het enige waar je bij dit "AJAX script" op moet letten is dat je informatie in het formaat teruggeeft wat je in de "dataType" parameter definieert.

Is je dataType 'json', retourneer dan JSON. Concreet output je JSON-geencodeerde data in je AJAX-script die de AJAX-call weer als input voert aan je "success" functie.

Is je dataType 'html', zorg dan dat je in je AJAX-script HTML naar het scherm stuurt. Deze HTML pikt je AJAX-call weer op als input in je "success" functie.

In beide gevallen wordt de "reactie" (de output van het AJAX-script) uitgelezen en weer teruggekoppeld aan de AJAX-call. Deze "response" is beschikbaar middels de "data" parameter in je success functie, die vervolgens binnen deze "callback" functie deze reactie weer verder kan verwerken.

En als je 'method' POST is dan lees je op soortgelijke manier data in je AJAX-script uit via... $_POST.

Ik hoop dat het zo een beetje duidelijk is.

Fabian W

21-03-2015 11:47

We zijn nu al twee weken bezig met dit scriptje en volgens mij weet jij vanaf dag 1 al hoe het php- en javascript file er uit moeten komen te zien. Ik vind het prima dat je niet meteen het antwoord geeft en mij er zelf op probeert te laten komen. Maar je hoeft van mij echt niet meer het verschil tussen json & html of get & post uit te leggen hoor. ;-) Uiteindelijk schiet ik weinig op met je laatste reactie, want ik heb nog steeds geen idee wat ik fout doe in mijn laatste scriptjes. klopt deze regel?: $_get['id'] = $song. Is de variabele die je meegeeft met ajax een php variabele $song of $id of wat anders?
Kun je alsjeblieft iets meer concreet zijn?

Reageren

Inloggen om te reageren