Onclick row, show extra database data in div.
Huidig:
Gewenst:
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:
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
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
<?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);
?>
$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);
?>
Gewijzigd op 07/03/2015 16:25:12 door Fabian W
Als je ergens overheen hovert (misschien met een bepaalde timeout) moet er extra informatie opgehaald worden. Dit kan JSON zijn, of HTML, of wat dan ook. Wat belangrijk is, is dat je op een of andere manier kunt bepalen *welke* informatie je precies op wilt halen.
Hierbij hoef je het wiel niet (helemaal) opnieuw uit te vinden. Je kunt bijvoorbeeld jQuery gebruiken om het volgende te maken: indien je over een (collectie van) element(en) hovert, pluk je informatie uit dit element (bijvoobeeld een song-id), en deze gebruik je om hier via een AJAX-call een scriptje aan te spreken dat je meer informatie teruggeeft over dit song-id. Vervolgens kun je deze informatie (zoals eerder aangegeven, dit kan van alles zijn) ergens neerplakken of tonen. Ik denk dat het meeste werk nog zit in de grafische afwerking van dit alles.
Het klinkt alleen niet alsof je al veel met jQuery gewerkt hebt.
Eerste stap die ik maak is het verzamelen van de data in arrays.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?php
while($row = mysqli_fetch_array($mysqli)) {
$x++;
$this_week[$x] = $row['this_week'];
$last_week[$x] = $row['last_week'];
$artist[$x] = $row['artist'];
$title[$x] = $row['title'];
$image[$x] = $row['image'];
$peak_position[$x] = $row['peak_position'];
$total_weeks[$x] = $row['total_weeks'];
$points[$x] = $row['points'];
}
?>
while($row = mysqli_fetch_array($mysqli)) {
$x++;
$this_week[$x] = $row['this_week'];
$last_week[$x] = $row['last_week'];
$artist[$x] = $row['artist'];
$title[$x] = $row['title'];
$image[$x] = $row['image'];
$peak_position[$x] = $row['peak_position'];
$total_weeks[$x] = $row['total_weeks'];
$points[$x] = $row['points'];
}
?>
Tweede stap die ik maak is het omzetten van php data naar javascript.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
var this_week = <?php echo json_encode($this_week) ?>;
var last_week = <?php echo json_encode($last_week) ?>;
var artist = <?php echo json_encode($artist) ?>;
var title = <?php echo json_encode($title) ?>;
var image = <?php echo json_encode($image) ?>;
var peak_position = <?php echo json_encode($peak_position) ?>;
var total_weeks = <?php echo json_encode($total_weeks) ?>;
var points = <?php echo json_encode($points) ?>;
alert(title[16]);
alert(this_week[16]);
</script>
var this_week = <?php echo json_encode($this_week) ?>;
var last_week = <?php echo json_encode($last_week) ?>;
var artist = <?php echo json_encode($artist) ?>;
var title = <?php echo json_encode($title) ?>;
var image = <?php echo json_encode($image) ?>;
var peak_position = <?php echo json_encode($peak_position) ?>;
var total_weeks = <?php echo json_encode($total_weeks) ?>;
var points = <?php echo json_encode($points) ?>;
alert(title[16]);
alert(this_week[16]);
</script>
In stap 2 zie ik meteen dat er een probleem opgetreden is al bij stap 1. Waar de title nog prima wordt opgeslagen, wordt this_week[16] opgeslagen als "1" ipv "16". 32 wordt bijvoorbeeld opgeslagen als 3. Wat is de oorzaak hiervan?
Gewijzigd op 07/03/2015 23:08:39 door Fabian W
Stel dat je via je AJAX call script.php aanroept (met een aantal parameters die aangeven welke informatie je nodig hebt uiteraard), dan moet je op de volgende manier je response opstellen:
Code (php)
Wat je ook zou kunnen doen is de HTML-output rechtstreeks genereren als "response". In je dataType parameter vul je dan 'html' in. Dat lijkt mij in dit geval een stuk makkelijker? Anders moet je met die JSON via JavaScript allerlei HTML gaan opbouwen ofzo? Dat kan ook direct. En in je AJAX-call geef je vervolgens aan waar je de HTML moet neerploppen.
index.php (of wat dan ook)
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
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX met JSON</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button type="button" id="knop">Haal de data op</button>
<div id="resultaat"></div>
<script>
$( document ).ready(function() {
$('#knop').click(function(e) {
$.ajax({
type: "GET",
url: "artist-json.php",
data: { id: 3 },
dataType: "json"
})
.done(function( data ) {
if(data.status == 'error')
alert(data.error);
else
$('#resultaat').append(data.artist + '<br>' + data.title + '<br><br>');
});
});
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX met JSON</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button type="button" id="knop">Haal de data op</button>
<div id="resultaat"></div>
<script>
$( document ).ready(function() {
$('#knop').click(function(e) {
$.ajax({
type: "GET",
url: "artist-json.php",
data: { id: 3 },
dataType: "json"
})
.done(function( data ) {
if(data.status == 'error')
alert(data.error);
else
$('#resultaat').append(data.artist + '<br>' + data.title + '<br><br>');
});
});
});
</script>
</body>
</html>
artist-json.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
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
<?php
// Laat de browser netjes weten dat het JSON is
header('Content-Type: application/json');
// enige verplichte GET variabele is id.
if(isset($_GET['id']) === FALSE)
{
echo json_encode(array( 'status' => 'error',
'error' => 'Geen GET variabele met id gekregen.'));
exit;
}
// default antwoord
$data = array(
'status' => 'error',
'error' => 'niet gevonden.'
);
// Als id=3 dan hebben we een track gevonden
if($_GET['id'] == 3)
{
$data = array(
'status' => 'ok',
'id' => 3,
'artist' => 'Jan Smit',
'title' => 'Als je lacht'
);
}
// echo de json string
echo json_encode($data);
?>
// Laat de browser netjes weten dat het JSON is
header('Content-Type: application/json');
// enige verplichte GET variabele is id.
if(isset($_GET['id']) === FALSE)
{
echo json_encode(array( 'status' => 'error',
'error' => 'Geen GET variabele met id gekregen.'));
exit;
}
// default antwoord
$data = array(
'status' => 'error',
'error' => 'niet gevonden.'
);
// Als id=3 dan hebben we een track gevonden
if($_GET['id'] == 3)
{
$data = array(
'status' => 'ok',
'id' => 3,
'artist' => 'Jan Smit',
'title' => 'Als je lacht'
);
}
// echo de json string
echo json_encode($data);
?>
je kunt ook proberen te bekijken in je browser:
artist-json.php
artist-json.php?id=2
artist-json.php?id=3
index.php:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
while($row = mysqli_fetch_array($mysqli)) {
$x++;
$this_week[$x] = $row['this_week'];
$last_week[$x] = $row['last_week'];
$artist[$x] = $row['artist'];
$title[$x] = $row['title'];
$image[$x] = $row['image'];
$peak_position[$x] = $row['peak_position'];
$total_weeks[$x] = $row['total_weeks'];
$points[$x] = $row['points'];
}
$data = array($this_week, $last_week, $artist, $title, $image, $peak_position, $total_weeks, $points);
echo $data[3][16];
?>
while($row = mysqli_fetch_array($mysqli)) {
$x++;
$this_week[$x] = $row['this_week'];
$last_week[$x] = $row['last_week'];
$artist[$x] = $row['artist'];
$title[$x] = $row['title'];
$image[$x] = $row['image'];
$peak_position[$x] = $row['peak_position'];
$total_weeks[$x] = $row['total_weeks'];
$points[$x] = $row['points'];
}
$data = array($this_week, $last_week, $artist, $title, $image, $peak_position, $total_weeks, $points);
echo $data[3][16];
?>
Code (php)
Even een vraagje: Wil je met de json één hit teruggeven of een lijst met hits?
Toevoeging op 10/03/2015 19:52:59:
Als je alle hits wil teruggeven doe je zoiets:
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
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
<?php
// Laat de browser netjes weten dat het JSON is
header('Content-Type: application/json');
// default antwoord
$data = array(
'status' => 'error',
'error' => 'niets gevonden.'
);
$list = array();
// vergeet niet mysql_connect() aan te roepen!
$sql = "SELECT * FROM hits";
$result = mysqli_query($con, $sql);
if($result) {
while($row = mysqli_fetch_assoc($result))
{
$list[] = $row;
}
}
// Als er items in de array 'list' staan
if(count($list))
{
$data = array(
'status' => 'ok',
'list' => $list
);
}
// echo de json string
echo json_encode($data);
?>
// Laat de browser netjes weten dat het JSON is
header('Content-Type: application/json');
// default antwoord
$data = array(
'status' => 'error',
'error' => 'niets gevonden.'
);
$list = array();
// vergeet niet mysql_connect() aan te roepen!
$sql = "SELECT * FROM hits";
$result = mysqli_query($con, $sql);
if($result) {
while($row = mysqli_fetch_assoc($result))
{
$list[] = $row;
}
}
// Als er items in de array 'list' staan
if(count($list))
{
$data = array(
'status' => 'ok',
'list' => $list
);
}
// echo de json string
echo json_encode($data);
?>
en stukje javascript:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
// ....
.done(function( data ) {
if(data.status == 'error')
alert(data.error);
else {
for(var i = 0 ; i < data.list.length ; i++) {
$('#resultaat').append(data.list[i].artist + '<br>' + data.list[i].title + '<br><br>');
}
}
});
.done(function( data ) {
if(data.status == 'error')
alert(data.error);
else {
for(var i = 0 ; i < data.list.length ; i++) {
$('#resultaat').append(data.list[i].artist + '<br>' + data.list[i].title + '<br><br>');
}
}
});
Gewijzigd op 10/03/2015 19:54:05 door Frank Nietbelangrijk
Ik weet niet hoever we al in de richting komen, maar dit is zo'n beetje wat ik nu dan heb:
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
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
<div id="content_changing_select_tag">
<form id="access_database" method="POST" action="artist-json.php">
<select id="week1" name="week1"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option></select>
<select id="year1" name="year1"><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option></select>
<input id="go_button" name="formsubmit" type="submit" value="Go"/>
</form>
</div>
<div id="container">
<div id="chartlist"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#go_button').click(function(e) {
$.ajax({
'type': "GET",
'url': "artist-json.php",
'dataType': "json",
'error': function(xhr, status, error){ alert(error.message); },
'success': jsonParser1 // call function
}); // $.ajax
})
});
function jsonParser1(json)
{
HTML = "<table id='chart'> <thead> <tr id='row1'> <th id='vw'>dw</th> <th id='vw'>vw</th> <th id='pic'></th> <th id='song'>artiest</th> <th id='song'>titel</th> <th id='wk'>hp</th> <th id='wk'>wk</th> <th id='wk'>pts</th> </tr> </thead> <tbody>";
var x=json.list;
for (i=0;i<x.length;i++)
{
HTML += "<tr id='row1'><td id='vw'>";
HTML += x[i].this_week;
HTML += "</td><td id='vw'>";
HTML += x[i].last_name;
HTML += "</td><td id='pic'><img src='";
HTML += x[i].image;
HTML += "' width='50px' height='50px'></td><td id='song'>";
HTML += x[i].artist;
HTML += "</td><td id='song'>";
HTML += x[i].title;
HTML += "</td><td id='wk'>";
HTML += x[i].peak_position;
HTML += "</td><td id='wk'>";
HTML += x[i].total_weeks;
HTML += "</td><td id='wk'>";
HTML += x[i].points;
HTML += "</td></tr>";
}
HTML += "</tbody></table>";
document.getElementById("chartlist").innerHTML = HTML;
}
</script>
<form id="access_database" method="POST" action="artist-json.php">
<select id="week1" name="week1"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option></select>
<select id="year1" name="year1"><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option></select>
<input id="go_button" name="formsubmit" type="submit" value="Go"/>
</form>
</div>
<div id="container">
<div id="chartlist"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#go_button').click(function(e) {
$.ajax({
'type': "GET",
'url': "artist-json.php",
'dataType': "json",
'error': function(xhr, status, error){ alert(error.message); },
'success': jsonParser1 // call function
}); // $.ajax
})
});
function jsonParser1(json)
{
HTML = "<table id='chart'> <thead> <tr id='row1'> <th id='vw'>dw</th> <th id='vw'>vw</th> <th id='pic'></th> <th id='song'>artiest</th> <th id='song'>titel</th> <th id='wk'>hp</th> <th id='wk'>wk</th> <th id='wk'>pts</th> </tr> </thead> <tbody>";
var x=json.list;
for (i=0;i<x.length;i++)
{
HTML += "<tr id='row1'><td id='vw'>";
HTML += x[i].this_week;
HTML += "</td><td id='vw'>";
HTML += x[i].last_name;
HTML += "</td><td id='pic'><img src='";
HTML += x[i].image;
HTML += "' width='50px' height='50px'></td><td id='song'>";
HTML += x[i].artist;
HTML += "</td><td id='song'>";
HTML += x[i].title;
HTML += "</td><td id='wk'>";
HTML += x[i].peak_position;
HTML += "</td><td id='wk'>";
HTML += x[i].total_weeks;
HTML += "</td><td id='wk'>";
HTML += x[i].points;
HTML += "</td></tr>";
}
HTML += "</tbody></table>";
document.getElementById("chartlist").innerHTML = HTML;
}
</script>
artist-json.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
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
<?php
// Laat de browser netjes weten dat het JSON is
header('Content-Type: application/json');
// if form is submitted
if($_POST['formsubmit'] == "Go") {
// form variables
$this_year = $_POST['year1'];
$this_week = $_POST['week1'];
if ($_POST['week1'] == 1) {
$last_year = $_POST['year1'] - 1;
$last_week = '(SELECT MAX(week) FROM pchart WHERE year = ' . $last_year . ')';
}
else {
$last_year = $_POST['year1'];
$last_week = $_POST['week1'] - 1;
}
// sql query
$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";
// Create connection
$con = mysqli_connect("lalalalala");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
//$con == connection, $sql = sql query
$mysqli = mysqli_query($con, $sql);
// save query in array 'data'
while($row = mysqli_fetch_array($mysqli)) {
$data[] = $row;
}
mysqli_close($con);
}
// Als er items in de array 'data' staan
if(count($data)){
$list = array(
'status' => 'ok',
'list' => $data
);
}
else {
$list = array(
'status' => 'error',
'error' => 'niets gevonden.'
);
}
// echo de json string
echo json_encode($list);
?>
// Laat de browser netjes weten dat het JSON is
header('Content-Type: application/json');
// if form is submitted
if($_POST['formsubmit'] == "Go") {
// form variables
$this_year = $_POST['year1'];
$this_week = $_POST['week1'];
if ($_POST['week1'] == 1) {
$last_year = $_POST['year1'] - 1;
$last_week = '(SELECT MAX(week) FROM pchart WHERE year = ' . $last_year . ')';
}
else {
$last_year = $_POST['year1'];
$last_week = $_POST['week1'] - 1;
}
// sql query
$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";
// Create connection
$con = mysqli_connect("lalalalala");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
//$con == connection, $sql = sql query
$mysqli = mysqli_query($con, $sql);
// save query in array 'data'
while($row = mysqli_fetch_array($mysqli)) {
$data[] = $row;
}
mysqli_close($con);
}
// Als er items in de array 'data' staan
if(count($data)){
$list = array(
'status' => 'ok',
'list' => $data
);
}
else {
$list = array(
'status' => 'error',
'error' => 'niets gevonden.'
);
}
// echo de json string
echo json_encode($list);
?>
Wat ik krijg te zien als ik op 'go' druk is het json file (ipv een html table) en daarvoor nog een alert met 'undefined'. Verder geeft de console aan dat hij een ander MIME type verwacht dan application/json.
Waar zit de fout?
Verder vind ik je korte stukje van het maken van de data array wel heel leuk eigenlijk. :-)
Gewijzigd op 11/03/2015 22:56:01 door Fabian W
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
Gewijzigd op 18/03/2015 21:15:41 door Thomas van den Heuvel
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.
Gewijzigd op 18/03/2015 21:17:07 door Fabian W
(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.
Gewijzigd op 18/03/2015 21:38:31 door Thomas van den Heuvel
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.
Heel kort door de bocht:
Code (php)
1
2
3
4
5
2
3
4
5
...
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>
...
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:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
//<![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.
Dit is mijn succes functie:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
}
{
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
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.
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.
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.
Gewijzigd op 21/03/2015 01:12:41 door Thomas van den Heuvel
Kun je alsjeblieft iets meer concreet zijn?