Onclick row, show extra database data in div.
Je voert daar een toekenning uit in plaats van een vergelijking.
Er is NIETS speciaals aan een script wat aangeroepen wordt door een AJAX-call, deze is verder 100% hetzelfde als een normaal PHP-script. Zoals Frank in zijn reactie al aangaf kan zo'n standalone script ook rechtstreeks worden aangeroepen.
De PHP-superglobal waarin een array van key-value paren van querystring-parameters zit heet $_GET, niet $_get, $get of wat dan ook.
Je zegt dat je de verschillen wel weet en dat is misschien ook wel zo, maar ik kan dat niet opmaken uit de reacties die je geeft. Je gooit van alles door elkaar en het verhaal wordt steeds verwarrender. Ik doe daarentegen een poging om structuur in deze chaos aan te brengen, maar het lijkt niet echt aan te komen wat ik probeer te doen: het scheiden en afzonderlijk oplossen van de deelproblemen.
Quote:
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
Natuurlijk, ik had je op dag 1 al 10 volledige varianten kunnen voorschotelen, alleen dan had jij in een fractie van de tijd die ik er over deed om een heldere oplossing te geven al om een 11e variant gevraagd, of een toevoeging, of heb je een followup vraag die je hier of in een andere thread stelt.
Wat ik (en hopelijk anderen met mij) hier proberen te doen is het vergroten van je inzicht zodat je dit soort dingen zelf kunt doen. Niet het domweg antwoord geven op je vraag. Je moet uiteindelijk zelf doorhebben WTF je aan het doen bent. Je kunt dan geen beroep doen op "maar dit is wat ik heb geknipt en geplakt van een of ander forum".
Maar goed voorlopig ontstijgt deze thread niet het niveau van een forumpost waarbij de topicstarter door blijft gaan totdat deze een volledig werkende oplossing heeft die deze best zelf had kunnen samenstellen met de informatie in de eerder gegeven reacties als deze wat meer zijn best had gedaan.
Dus hier, voortbordurend op mijn vorige voorbeeld, en eigenlijk tegen beter weten in, een volledig werkend voorbeeld. Ik hoop dat je er iets van opsteekt, maar eerlijk gezegd betwijfel ik dit.
index.php
Code (php)
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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Songs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
div.song { position: relative; width: 200px; }
div.song-details { display: none; position: absolute; top: 0; width: 150px; right: -175px; background-color: #ffcccc; }
</style>
</head>
<body>
<div id="songs">
<!-- lijst van nummers -->
<div class="song">
artiest - nummer <a href="#" class="moreinfo" data-song="1">more info</a>
</div>
<div class="song">
artiest - nummer <a href="#" class="moreinfo" data-song="2">more info</a>
</div>
<div class="song">
artiest - nummer <a href="#" class="moreinfo" data-song="3">more info</a>
</div>
<!-- (verborgen) info div -->
<div class="song-details" id="song_details"></div>
</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
// klikfunctie om info weer te verbergen
$('#songs').on('click', 'a.close-details', function(e) {
// de knop heeft verder geen effect
e.preventDefault();
// verberg omvattende (song_details) div
$(this).parent().hide();
});
$('a.moreinfo').click(function(e) {
// de knop heeft verder geen effect
e.preventDefault();
// peuter data uit knop
var song = $(this).attr('data-song');
// onthoud waar op geklikt werd
var that = this;
// 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) {
if (data.status == 'ok') {
var song = data.data;
$details = $('#song_details');
// vul de details in in de div
$details.html(
'<div>\
<p>song: '+(song.title)+'<\/p>\
<p>artist: '+(song.artist)+'<\/p>\
<p>image: '+(song.image)+'<\/p>\
<a href="#" class="close-details">close<\/a>\
</div>'
);
// hang de info-div aan de div waar op geklikt is, en toon de info-div
$details.appendTo($(that).parent()).show();
}
}
});
});
}); // ready
//]]>
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Songs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
div.song { position: relative; width: 200px; }
div.song-details { display: none; position: absolute; top: 0; width: 150px; right: -175px; background-color: #ffcccc; }
</style>
</head>
<body>
<div id="songs">
<!-- lijst van nummers -->
<div class="song">
artiest - nummer <a href="#" class="moreinfo" data-song="1">more info</a>
</div>
<div class="song">
artiest - nummer <a href="#" class="moreinfo" data-song="2">more info</a>
</div>
<div class="song">
artiest - nummer <a href="#" class="moreinfo" data-song="3">more info</a>
</div>
<!-- (verborgen) info div -->
<div class="song-details" id="song_details"></div>
</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
// klikfunctie om info weer te verbergen
$('#songs').on('click', 'a.close-details', function(e) {
// de knop heeft verder geen effect
e.preventDefault();
// verberg omvattende (song_details) div
$(this).parent().hide();
});
$('a.moreinfo').click(function(e) {
// de knop heeft verder geen effect
e.preventDefault();
// peuter data uit knop
var song = $(this).attr('data-song');
// onthoud waar op geklikt werd
var that = this;
// 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) {
if (data.status == 'ok') {
var song = data.data;
$details = $('#song_details');
// vul de details in in de div
$details.html(
'<div>\
<p>song: '+(song.title)+'<\/p>\
<p>artist: '+(song.artist)+'<\/p>\
<p>image: '+(song.image)+'<\/p>\
<a href="#" class="close-details">close<\/a>\
</div>'
);
// hang de info-div aan de div waar op geklikt is, en toon de info-div
$details.appendTo($(that).parent()).show();
}
}
});
});
}); // ready
//]]>
</script>
</body>
</html>
ajaxGetSong.php
Code (php)
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
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
<?php
// de respons is JSON
header('Content-Type: application/json; charset=UTF-8');
// definieer respons
$response = array(
'status' => 'error',
'data' => array(),
);
// voorbeeld data - komt normaal uit database
$songs = array(
1 => array(
'title' => 'Song 1',
'artist' => 'Artist 1',
'image' => 'test.gif',
),
2 => array(
'title' => 'Song 2',
'artist' => 'Artist 2',
'image' => 'test.gif',
),
3 => array(
'title' => 'Song 3',
'artist' => 'Artist 3',
'image' => 'test.gif',
),
);
// probeer informatie op te halen - $_GET['id'] zou verplicht moeten zijn
// controleer ook meteen of $_GET['id'] een nummer is zodat je deze veilig in een query kunt gebruiken
if (isset($_GET['id']) && preg_match('#^[1-9][0-9]*$#', $_GET['id'])) {
$songId = trim($_GET['id']); // $songId is veilig te gebruiken in een query
// controleer of song bestaat
if (isset($songs[$songId])) {
// definieer nieuwe respons
$response = array(
'status' => 'ok',
'data' => array(
'title' => $songs[$songId]['title'],
'artist' => $songs[$songId]['artist'],
'image' => $songs[$songId]['image'],
),
);
}
}
// stuur repons naar output, wordt opgepikt door de success callback functie van oorspronkelijke AJAX call
echo json_encode($response);
?>
// de respons is JSON
header('Content-Type: application/json; charset=UTF-8');
// definieer respons
$response = array(
'status' => 'error',
'data' => array(),
);
// voorbeeld data - komt normaal uit database
$songs = array(
1 => array(
'title' => 'Song 1',
'artist' => 'Artist 1',
'image' => 'test.gif',
),
2 => array(
'title' => 'Song 2',
'artist' => 'Artist 2',
'image' => 'test.gif',
),
3 => array(
'title' => 'Song 3',
'artist' => 'Artist 3',
'image' => 'test.gif',
),
);
// probeer informatie op te halen - $_GET['id'] zou verplicht moeten zijn
// controleer ook meteen of $_GET['id'] een nummer is zodat je deze veilig in een query kunt gebruiken
if (isset($_GET['id']) && preg_match('#^[1-9][0-9]*$#', $_GET['id'])) {
$songId = trim($_GET['id']); // $songId is veilig te gebruiken in een query
// controleer of song bestaat
if (isset($songs[$songId])) {
// definieer nieuwe respons
$response = array(
'status' => 'ok',
'data' => array(
'title' => $songs[$songId]['title'],
'artist' => $songs[$songId]['artist'],
'image' => $songs[$songId]['image'],
),
);
}
}
// stuur repons naar output, wordt opgepikt door de success callback functie van oorspronkelijke AJAX call
echo json_encode($response);
?>
Vervang de #-hrefs in bovenstaande code door javascript:void(0). Dit kan ik in de codefragmenten niet doen omdat het verwerkscript van dit bericht dan crasht...
Gewijzigd op 21/03/2015 20:44:35 door Thomas van den Heuvel
Ik heb er zeker nog wat aanpassingen aan moeten doen, zoals $songId = trim($_GET['id'] - 1 ) ipv $songId = trim($_GET['id']), omdat json begint met '0' en sql met '1'. Maar goed dan zie je ook een keer dat ik niet elke vraag hier direct post, zonder te googlen of zelf aan het script te sleutelen.
Quote:
Natuurlijk, ik had je op dag 1 al 10 volledige varianten kunnen voorschotelen, alleen dan had jij in een fractie van de tijd die ik er over deed om een heldere oplossing te geven al om een 11e variant gevraagd, of een toevoeging, of heb je een followup vraag die je hier of in een andere thread stelt.
Laten we voor deze keer eens stellen dat je gelijk hebt. Dan nog heb jij gewoon het recht om te zeggen dat ik die 11e variant of followup vraag zelf maar moet uitvogelen. Jij hoeft niet aan de slag op commando van mij. Als ik hier kom hoop ik altijd dat iemand me helpt, maar neem ik dat niet als vanzelfsprekend. Ik waardeer het dan ook altijd als er dan wel iemand de tijd neemt, zoals jij nu. Dus als je een keer geen zin hebt, reageer dan niet op een vraag van mij.
Quote:
Ik hoop dat je er iets van opsteekt, maar eerlijk gezegd betwijfel ik dit.
Je zult nog versteld staan hoeveel ik van het doorlezen van de argumentatie leer. Iedereen leert anders (op school weten ze dat ook niet) en ik heb steeds maar vakken gehaald door voorbeelden en uitwerkingen 'na te doen'. Het uren staren naar iets waar je niet uitkomt wordt maar snel vergeten.