probleem php string overbrengen naar javascript
Voeg het volgende toe zodat je formulier niet verstuurd wordt:
Code (php)
1
2
3
4
2
3
4
...
$("#spotifyform").submit(function(e) { // <--- let op de "e"
e.preventDefault(); // zorgt ervoor dat je niet wegnavigeert van deze pagina
...
$("#spotifyform").submit(function(e) { // <--- let op de "e"
e.preventDefault(); // zorgt ervoor dat je niet wegnavigeert van deze pagina
...
EDIT: overigens lijkt die '?callback=?' toch niet nodig omdat JSONP die zelf al automatisch toevoegt blijkbaar.
Gewijzigd op 26/01/2015 17:31:18 door Thomas van den Heuvel
En inderdaad zucht. Als ik een ding ook altijd vergeet is het wel de preventDefault (of de return false)
Nog een dingetje. Als ik het form nu submit krijg ik de juiste informatie.
Echter als ik daarna nog een andere lijst wil zien, doet die dat niet.
Bij de tweede keer submit laadt het form dus niet een andere gewenste lijst.
Dat is natuurlijk een bijeffect van de preventdefault.
Weet je hoe we dat het makkelijkst kunnen fixen?
Hoe ziet je huidige code er uit?
Ik krijg allemaal JSON parse errors. Waarschijnlijk omdat het "ding" wat je terugkrijgt al een JSON object is, en geen string (die geformatteerd is volgens JSON, en geparsed moet worden om als JSON object gebruikt te kunnen worden). Heb je al geprobeerd om het parsen achterwege te laten?
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
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
// deze functie wordt automatisch aangeroepen als de pagina geladen is.
window.onload = function loadJSON()
{
// de HTML-elementen waar we een gebeurtenis van willen registreren of waaraan we iets willen wijzigen.
var country2 = document.getElementById("country");
var chart2 = document.getElementById("chart");
var interval2 = document.getElementById("interval");
var button = document.getElementById("go_button");
// we maken een functie die aangeroepen moet worden als er op de button geklikt wordt
$("#spotifyform").submit(function(e){
e.preventDefault();
// we slaan de gekozen optie van de <select> country op in een variabele met de naam country2
var country = country2.options[country2.selectedIndex].value;
var chart = chart2.options[chart2.selectedIndex].value;
var interval = interval2.options[interval2.selectedIndex].value;
var url = "http://charts.spotify.com/api/tracks/" + chart + "/" + country + "/" + interval + "/latest";
// haal de data op van de url en sla deze op in de variabele data
$.ajax({
'url': url + '?callback=?',
'dataType': 'jsonp',
'error': function(xhr, status, error)
{
alert(error.message);
},
'success': function(json)
{
var html = '<table>';
// traverse tracks
$.each(json.tracks, function() {
// traverse track rows
html += '<tr>';
$.each(this, function(k, v) {
if (k == 'artist_name' || k == 'track_name') {
html += '<td>'+v+'</td>';
}
});
html += '</tr>';
});
html += '</table>';
$('#spotifylist').append(html);
} // succes ajax
}); // $.ajax
}); // form submit
} // window on load
window.onload = function loadJSON()
{
// de HTML-elementen waar we een gebeurtenis van willen registreren of waaraan we iets willen wijzigen.
var country2 = document.getElementById("country");
var chart2 = document.getElementById("chart");
var interval2 = document.getElementById("interval");
var button = document.getElementById("go_button");
// we maken een functie die aangeroepen moet worden als er op de button geklikt wordt
$("#spotifyform").submit(function(e){
e.preventDefault();
// we slaan de gekozen optie van de <select> country op in een variabele met de naam country2
var country = country2.options[country2.selectedIndex].value;
var chart = chart2.options[chart2.selectedIndex].value;
var interval = interval2.options[interval2.selectedIndex].value;
var url = "http://charts.spotify.com/api/tracks/" + chart + "/" + country + "/" + interval + "/latest";
// haal de data op van de url en sla deze op in de variabele data
$.ajax({
'url': url + '?callback=?',
'dataType': 'jsonp',
'error': function(xhr, status, error)
{
alert(error.message);
},
'success': function(json)
{
var html = '<table>';
// traverse tracks
$.each(json.tracks, function() {
// traverse track rows
html += '<tr>';
$.each(this, function(k, v) {
if (k == 'artist_name' || k == 'track_name') {
html += '<td>'+v+'</td>';
}
});
html += '</tr>';
});
html += '</table>';
$('#spotifylist').append(html);
} // succes ajax
}); // $.ajax
}); // form submit
} // window on load
Nog iets, je output alleen track en artiest, maar het nummmer van de combinatie lijkt me ook wel handig ;-)
Toevoeging op 26/01/2015 18:28:09:
Fixed It! Die fout de tweede submit zat waarschijnlijk in het stuk met de k's en v's.
Zo doet die het:
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
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
// deze functie wordt automatisch aangeroepen als de pagina geladen is.
window.onload = function loadJSON()
{
// de HTML-elementen waar we een gebeurtenis van willen registreren of waaraan we iets willen wijzigen.
var country2 = document.getElementById("country");
var chart2 = document.getElementById("chart");
var interval2 = document.getElementById("interval");
var button = document.getElementById("go_button");
// we maken een functie die aangeroepen moet worden als er op de button geklikt wordt
$("#spotifyform").submit(function(e){
e.preventDefault();
// we slaan de gekozen optie van de <select> country op in een variabele met de naam country2
var country = country2.options[country2.selectedIndex].value;
var chart = chart2.options[chart2.selectedIndex].value;
var interval = interval2.options[interval2.selectedIndex].value;
var url = "http://charts.spotify.com/api/tracks/" + chart + "/" + country + "/" + interval + "/latest";
// haal de data op van de url en sla deze op in de variabele data
$.ajax({
'url': url + '?callback=?',
'dataType': 'jsonp',
'error': function(xhr, status, error)
{
alert(error.message);
},
'success': function(json)
{
HTML = "<table id='chart'> <thead><tr id='row2'><th id='dw'></th><th id='song'>Artiest</th><th id='song'>Titel</th></tr></thead><tbody>";
var x=json.tracks;
for (i=0;i<x.length;i++)
{
HTML += "<tr id='row1'><td id='dw'>";
HTML += i+1;
HTML += "</td><td id='song'>";
HTML += x[i].artist_name;
HTML += "</td><td id='song'>";
HTML += x[i].track_name;
HTML += "</td></tr>";
}
HTML += "</tbody></table>";
document.getElementById("spotifylist").innerHTML = HTML;
} // succes ajax
}); // $.ajax
}); // form submit
} // window on load
window.onload = function loadJSON()
{
// de HTML-elementen waar we een gebeurtenis van willen registreren of waaraan we iets willen wijzigen.
var country2 = document.getElementById("country");
var chart2 = document.getElementById("chart");
var interval2 = document.getElementById("interval");
var button = document.getElementById("go_button");
// we maken een functie die aangeroepen moet worden als er op de button geklikt wordt
$("#spotifyform").submit(function(e){
e.preventDefault();
// we slaan de gekozen optie van de <select> country op in een variabele met de naam country2
var country = country2.options[country2.selectedIndex].value;
var chart = chart2.options[chart2.selectedIndex].value;
var interval = interval2.options[interval2.selectedIndex].value;
var url = "http://charts.spotify.com/api/tracks/" + chart + "/" + country + "/" + interval + "/latest";
// haal de data op van de url en sla deze op in de variabele data
$.ajax({
'url': url + '?callback=?',
'dataType': 'jsonp',
'error': function(xhr, status, error)
{
alert(error.message);
},
'success': function(json)
{
HTML = "<table id='chart'> <thead><tr id='row2'><th id='dw'></th><th id='song'>Artiest</th><th id='song'>Titel</th></tr></thead><tbody>";
var x=json.tracks;
for (i=0;i<x.length;i++)
{
HTML += "<tr id='row1'><td id='dw'>";
HTML += i+1;
HTML += "</td><td id='song'>";
HTML += x[i].artist_name;
HTML += "</td><td id='song'>";
HTML += x[i].track_name;
HTML += "</td></tr>";
}
HTML += "</tbody></table>";
document.getElementById("spotifylist").innerHTML = HTML;
} // succes ajax
}); // $.ajax
}); // form submit
} // window on load
Toevoeging op 26/01/2015 18:29:41:
Ik vind trouwens de tabel zo opbouwen zo ook veel intuïtiever.
Toevoeging op 26/01/2015 18:31:41:
Bedankt! Hij werkt goed zo.
Ook bedankt voor de grondige uitleg die je hebt gegeven. Daardoor leer ik er meer van.