| 

.NET C# Java Javascript Exception

2
Hallo,
ich habe ein Problem mit JSON, ich möchte mit einer HTTP-Dropdownbox eine Javascript-Funktion aufrufen, die über JSON in PHP eine Datenbankabfrage macht und die PHP-Datei gibt einen String zurück, der ausgegeben werden soll (bis dahin funktioniert alles) und in eine Javscript-Variable eingespeichert werden soll

Haupt-Datei:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Wahlen</title>
<script src="../amcharts/amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/amcharts/serial.js" type="text/javascript"></script>
<script src="../amcharts/amcharts/pie.js" type="text/javascript"></script>
<script src="jquery.tablesorter/jquery-latest.js"></script>
<script>
function showWahl(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getwahl.php?q="+str,true);
xmlhttp.send();
}
function loadJSON(str) {
if (str=="") {
document.getElementById("chartdiv1").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadstatchanged=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var chartData=xmlhttp.responsetext;
chart.dataProvider = chartData;
chart.categoryField = "party";
chart.labelsEnabled=true;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 0;
categoryAxis.dashLength = 5;
categoryAxis.gridPosition = "start";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.title = "";
valueAxis.dashLength = 5;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = "percent";
graph.colorField = "color";
graph.balloonText = "<span style='font-size:14px'>[[category]]: <b>[[value]] %</b></span>";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false;
chartCursor.categoryBalloonEnabled = false;
chart.addChartCursor(chartCursor);
chart.creditsPosition = "top-right";
// WRITE
chart.write("chartdiv1");
// title of the chart
}
}
};
xmlhttp.open("GET","data.php?q="+str,true);
xmlhttp.send();
};
</script>
</head>
<body>
<?php
function komplement($zahl){
return str_pad(dechex(16777215-$zahl),6,'0',STR_PAD_LEFT);
};
function hexadez($zahl){
return str_pad(dechex($zahl),6,'0',STR_PAD_LEFT);
};
$con = mysqli_connect('localhost','root','***','wahlen');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
$sql="Select wahl.id, concat(wahltyp.name,' ',year(wahl.datum)) as wahl from wahl inner join wahltyp on wahl.wahltypid=wahltyp.id";
$result = mysqli_query($con,$sql);
echo'<form>
<select name="wahl" onchange="wahldiagramm(this.value);showwahl(this.value)">
<option value="">Wähle eine Wahl:</option>';
while($row = mysqli_fetch_array($result)) {
echo'
<option value="' . $row[0] . '">' . $row[1] . '</option>
';
}
echo'</select>
</form>';
?>
<script type="text/javascript">
function wahldiagramm(id){
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
var chartData=loadJSON(id);
}
</script>
<div id="txtHint">Hier sieht man die Infos zur Wahl.</div>
<div id="chartdiv1" style="width: 100%; height: 400px;"></div>
</body>
</html>

php-Datei data.php:
<?php
function komplement($zahl){
return str_pad(dechex(16777215-$zahl),6,'0',STR_PAD_LEFT);
};
function hexadez($zahl){
return str_pad(dechex($zahl),6,'0',STR_PAD_LEFT);
};
$q = intval($_GET['q']);
// Connect to MySQL
$link = mysql_connect( 'localhost', 'root', '***' );
if ( !$link ) {
die( 'Could not connect: ' . mysql_error() );
}

// Select the data base
$db = mysql_select_db( 'wahlen', $link );
if ( !$db ) {
die ( 'Error selecting database \'wahlen\' : ' . mysql_error() );
}
// Fetch the data
$query = "select wahlparteiname.name, wahlpartei.stimmen, wahlpartei.stimmen*100/(wahl.abgegebene-wahl.ungueltige) as prozent, wahlpartei.mandate, farbe.code from wahl, wahlpartei, wahlparteiname, farbe where wahlpartei.wahlid=wahl.id and wahlpartei.wahlparteinameid=wahlparteiname.id and wahlparteiname.farbeid=farbe.id and wahl.id=1 order by stimmen desc";
$result = mysql_query( $query );
// All good?
if ( !$result ) {
// Nope
$message = 'Invalid query: ' . mysql_error() . "\n";
$message .= 'Whole query: ' . $query;
die( $message );
}
// Print out rows
$return="";
$prefix = '';
$return = "[\n";
while ( $row = mysql_fetch_row( $result ) ) {
$return= $return.$prefix . " {\n";
$return=$return. ' "party": "' . $row[0] . '",' . "\n";
$return=$return. ' "percent": ' . $row[2] . ',' . "\n";
$return=$return. ' "color": ' . hexadez($row[4]) . '' . "\n";
$return=$return. " }";
$prefix = ",\n";
}
$return=$return."\n]";
// Close the connection
return $return;
mysql_close($link);
?>


Nun soll $return an var CharData übergeben werden.
Console.log sagt mir aber zur var CharData unknown.
Was kann ich tun?

Vielen Dank für eure Hilfe.
News:
29.05.2014
Markus92 1 1
3 Antworten
0
Also erst mal: daß es rein technisch möglich ist, in einer Datei HTML, Javascript, PHP und SQL bunt durcheinander zu mischen, heißt noch lange nicht, daß es eine gute Idee ist, davon Gebrauch zu machen. Nicht einmal in der PHP-Welt. Dein Code ist ein schreckliches Chaos, und Deine Frage zeigt m.E., daß Du darin schlicht den Überblick verloren hast.

Aber nun konkret zu Deiner Frage. Folgendes ist mir aufgefallen:

  • Du rufst loadJSON mit 2 Parametern (ein String und eine Funktion), nimmst aber nur einen entgegen.
  • Dein Code führt zum Aufruf der URL "data.php?q=data.php", an deren Sinnhaftigkeit ich zumindest Zweifel habe.
  • Du erwartest chartData als Rückgabe von loadJSON, aber loadJSON gibt gar nichts zurück. Es fehlt schlicht ein "return irgendwas" in Deinem Code. Das ist die unmittelbare Ursache Deines Problems.
  • Die tiefere Ursache aber ist, daß loadJSON gar nicht in der Lage ist, den vom Server geladenen String als Rückgabewert bereitzustellen - weil der Serveraufruf zwingend asynchron erfolgt. Zu dem Zeitpunkt, an dem der Browser den xmlHttp-Request absetzt, hat loadJSON längst die Kontrolle an seinen Aufrufer zurückgegeben.

Lösung: Du mußt an loadJSON eine Callback-Funktion übergeben. (Das tust Du im Prinzip schon, aber sie wird nicht entgegengenommen.) Diesen Callback mußt Du aufrufen, wenn Du das Ergebnis vom Server empfängst, und darin dann jegliche weitere Verarbeitung unterbringen.

Update: Für den Zugriff auf den selected value siehe http://stackoverflow.com/questions/5024056/how-to-pass-parameters-on-onchange-of-html-select . Für die Callback-Funktion: packe alles nach dem loadJSON-Aufruf in einen Block
function(chartData) {...}
Das ist Deine Callback-Funktion, die Du an loadJSON übergibst und im onreadstatechanged-Handler aufrufst.
29.05.2014
Matthias Hlawatsch 13,2k 4 9
0
Hallo,
erstmal danke für deine Antwort, habe die falsche Version der Datei kopiert, ist jetzt ausgebessert. Dabei ist mir ein weiteres Problem aufgefallen: wie bekomme ich das selected value in die javascript-function wahldiagramm()?

Wie erstelle ich eine Callback-Funktion?
29.05.2014
Markus92 1 1
Gerne. Stelle solche Rückfragen bitte als Kommentar - Antworten werden hier nach Bewertung sortiert, so dass irgendwann die Zuordnung verloren gehen könnte, wenn sich noch mehr Leute beteiligen.
Ich habe meine Antwort entsprechend ergänzt.
Matthias Hlawatsch 29.05.2014
0
Habe das ganze nun nochmal angepasst.
Nun kommt als Reaktion gar nichts mehr...
30.05.2014
Markus92 1 1

Stelle deine Javascript-Frage jetzt!