probleem php string overbrengen naar javascript

Door Fabian W op 25-01-2015 17:42

2.778 views

Met een form genereer ik een spotify json url.
Op submit wil ik twee dingen doen:
- met file_get_contents de content van deze url ophalen
- deze content als input gebruiken voor een javascript functie die vervolgens de json data output in een html table.

Deze twee handelingen lopen niet synchroon. D.w.z. Op submit neemt het javascript niet de gegevens mee die in php bewerkt zijn.
Ik heb geprobeerd om dit probleem op te lossen met json_encode of $_ajax, maar kom hier niet uit. Zou iemand me hiermee kunnen helpen? De code staat hieronder.

html:


<script type="text/javascript" src="spotify.js"></script>
<form id="spotifyform" action="spotifylist.php" method="post">
      <select id="country" name="country">
        <option value="GB">UK</option>
        <option value="US">USA</option>
      </select>
      <select id="interval" name="interval">
        <option value="daily">Daglijst</option>
        <option value="weekly">Weeklijst</option>
      </select>
      <select id="chart" name="chart">
        <option value="most_streamed">Meest gestreamd</option>
        <option value="most_viral">Meest gedeeld</option>
      </select>
      <input type="submit" name="formSubmit" value="Submit"/>
</form>
<div id="spotifylist"></div>

spotify.js:


function loadJSON()
{
    var http_request = new XMLHttpRequest();
    try{
      // Opera 8.0+, Firefox, Chrome, Safari
      http_request = new XMLHttpRequest();
    }catch (e){
      // Internet Explorer Browsers
      try{
         http_request = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
         try{
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
    }

   http_request.open("GET", "spotifylist.php", true);
   http_request.send();
   http_request.onreadystatechange  = function(){
      if (http_request.readyState == 4  )
      {
        // Javascript function JSON.parse to parse JSON data
        var jsonObj = JSON.parse(http_request.responseText);

        // jsonObj variable now contains the data structure and can
        // be accessed as jsonObj.artist_name and jsonObj.track_name.

        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=jsonObj.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.artist_name;
        HTML += "</td><td id='song'>";
        HTML += x.track_name;
        HTML += "</td></tr>";
          }
        HTML += "</tbody></table>";

        document.getElementById("spotifylist").innerHTML = HTML; 

      }
    }
 }

$("#spotifyform").submit(function(){
    loadJSON();
    return false;
});

spotifylist.php
[code]
<?php
if($_POST['formSubmit'] == "Submit")
{
$chart = $_POST['chart'];
$country = $_POST['country'];
$interval = $_POST['interval'];
}

$data_file="http://charts.spotify.com/api/tracks/".$chart."/".$country."/".$interval."/latest";
$url = file_get_contents ($data_file);
echo $url;
?>

Thomas van den Heuvel

26-01-2015 17:29 gewijzigd op 26-01-2015 17:31

Zucht, je submit het form, dus je pagina ververst...

Voeg het volgende toe zodat je formulier niet verstuurd wordt:

...
$("#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.

Fabian W

26-01-2015 18:00

Hij doet het nu. Bedankt!
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?

Thomas van den Heuvel

26-01-2015 18:14

Hm, dat zou eigenlijk gewoon moeten werken lijkt mij.

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?

Fabian W

26-01-2015 18:17


// 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

Nog iets, je output alleen track en artiest, maar het nummmer van de combinatie lijkt me ook wel handig ;-)

[size=xsmall]Toevoeging op 26/01/2015 18:28:09:[/size]

Fixed It! Die fout de tweede submit zat waarschijnlijk in het stuk met de k's en v's.
Zo doet die het:


// 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

[size=xsmall]Toevoeging op 26/01/2015 18:29:41:[/size]

Ik vind trouwens de tabel zo opbouwen zo ook veel intuïtiever.

[size=xsmall]Toevoeging op 26/01/2015 18:31:41:[/size]

Bedankt! Hij werkt goed zo.
Ook bedankt voor de grondige uitleg die je hebt gegeven. Daardoor leer ik er meer van.

Thomas van den Heuvel

26-01-2015 19:55

Euhm, "append" voegt een element toe aan het einde van de inhoud een HTML-tag, hij plakt dus de tweede lijst aan de eerste vast, dat was het waarschijnlijk.

Reageren

Inloggen om te reageren