AJAX und MySQL Scriptvorlage

Beginner

Sunday, November 29th 2009, 9:26pm

Hallo ,

folgendes Script http://www.w3schools.com/PHP/php_ajax_database.asp wolle ich auf einem 1und1 managed server testen, doch leider nach 10 Stunden Google leider noch nicht zum laufen gebracht.

Tabelle mit Inhalten erstellt, Scripte 1zu1 übernommen Datenbankdaten eingetragen auch bei MYSQL5 von 1und1 nicht nur localhost sondern localhost:/tmp/mysql5.sock doch leider liefert die Ausgabe nicht die gewünschten Ergebnisse.

die Seite: http://datacenter.adfinance.de/selector/

Script1 getuser.php

PHP Quellcode

<?php
$q=$_GET["q"];
 
// $con = mysql_connect('localhost', 'peter', 'abc123');
$con = mysql_connect('localhost:/tmp/mysql5.sock', 'dboxxx', 'passxxx');
 
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
 
mysql_select_db("ajax_demo", $con);
 
$sql="SELECT * FROM user WHERE id = '".$q."'";
 
$result = mysql_query($sql);
 
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
 
while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['FirstName'] . "</td>";
  echo "<td>" . $row['LastName'] . "</td>";
  echo "<td>" . $row['Age'] . "</td>";
  echo "<td>" . $row['Hometown'] . "</td>";
  echo "<td>" . $row['Job'] . "</td>";
  echo "</tr>";
  }
echo "</table>";
mysql_close($con);
?>

Script2 selectuser.js

JavaScript Code

var xmlhttp;
 
function showUser(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="getuser.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
 
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
 
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

Script3 index.html

HTML Code

<html>
<head>
<script type="text/javascript" src="selectuser.js"></script>
</head>
<body>
 
<form>
Select a User:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>
 
</body>
</html>

mit der Datenbank wird anscheinend richtig verbunden, allerdings erhalte ich im Ergebnisfeld keine Ausgabe.

Bin langsam mit meinem (kleinen) Latein am Ende

Gruß Michael

Deadman44

Professional

Posts: 415

2

Sunday, November 29th 2009, 10:14pm

Soweit ich das jetzt mit dem FIrebug Debugger nachverfolgen konnte, liegt der Fehler doch in deiner getuser.php. Diese sendet nichts zurück, wodurch xmlhttp.responseText leer bleibt.Konzentriere dich auf deine getuser.php und schaue mal wo dein fehler liegt mit echos oder einem debugger.
So würde ich mal kontrollieren ob das ergebnis deines queries in zeile 16 überhaupt einen inhalt hat oder vielleicht keinen Treffer in der Datenbank ergeben hat.

michas

Beginner

Posts: 8

3

Monday, November 30th 2009, 9:58pm

Danke - Funzt: in der getuser.php Zeile 12 wurde die ajax_demo ausgewählt, was nicht ging , da die datenbank dbxxx ist und die tabelle die ajax_demo.

auch schon weitergebaut: http://datacenter.adfinance.de/selector2/

dadurch natürlich wieder ein nächstes Hindernis die Ergebnisliste welche mir das script aus der Datenbank liefert würde ich gerne flexibel sortieren lassen. dazu habe ich folgendes Script integriert : http://millstream.com.au/view/code/tablekit - das Ergebnis könnt ihr auf http://datacenter.adfinance.de/selector2/ sehen. zum Test habe ich eine zweite Tabelle eingefügt, auf der es einwandfrei funktioniert, nur mit der generierten hapert es. woran kann dies liegen?

Gruß Michael

die index.php

PHP Quellcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
 
<title>Beispiel</title> 
 
<script type="text/javascript" src="selectuser.js"></script>
 
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/fabtabulous.js"></script>
<script type="text/javascript" src="js/tablekit.js"></script>	
 
 
</head>
<body>
 
 
<form>
Ihr Alter:
<select name="users" onChange="showUser(this.value)">
<option value="">bitte wählen Sie Ihr Alter</option>
<option value="10">10 Jahre</option>
<option value="30" selected>30 Jahre</option>
<option value="31">31 Jahre</option>
<option value="32">32 Jahre</option>
<option value="33">33 Jahre</option>
<option value="34">34 Jahre</option>
<option value="35">35 Jahre</option>
<option value="36">36 Jahre</option>
<option value="37">37 Jahre</option>
</select>
 
</form>
<br />
<div id="txtHint"><b>Die Tarifbeiträge werden nach der Altersauswahl hier angezeigt.</b></div>
<br />
 
<table class='sortable resizable'>	
<thead>
<tr>
<th id='adf_gesellschaft'>Gesellschaft</th>
<th id='adf_tarif'>Tarif</th>
<th id='adf_alter'>Alter</th>
<th id='adf_beitrag'>Beitrag</th>
<th class='sortfirstdesc' id='adf_leistungsstaerke'>Leistungsstaerke</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Gesellschaft</td>
<td>Tarif</td>
<td>Alter</td>
<td>Beitrag</td>
<td>Leistungsstaerke</td>
</tr>
</tfoot>
<tbody>
<tr>
  <td>B-Gesellschaft</td>
  <td>B-Tarif</td>
  <td>20</td>
  <td>15,00 &euro; </td>
  <td>888</td>
</tr>
<tr>
  <td>C-Gesellschaft</td>
  <td>C-Tarif</td>
  <td>30</td>
  <td>20,00</td>
  <td>777</td>
</tr>
<tr>
<td>A-Gesellschaft</td>
<td>A-Tarif</td>
<td>10</td>
<td>10,00 &euro;</td>
<td>999</td>
</tr>
</tbody>
</table>
</body>
</html>

und die getuser.php

PHP Quellcode

<?php
include ("configuration.php");
$q=$_GET["q"];
 
// $con = mysql_connect('localhost', 'peter', 'abc123');
$con = mysql_connect($host, $dbuser, $dbpass);
 
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
 
mysql_select_db($database, $con);
 
$sql="SELECT * FROM $table WHERE adf_alter = '".$q."'";
 
$result = mysql_query($sql);
 
// Tabellen Überschriften und Beschriftungen in der Fußzeile
echo "<table class='sortable editable resizable'>	
<thead>
<tr>
<th class='sortfirstdesc' id='adf_gesellschaft'>Gesellschaft</th>
<th id='adf_tarif'>Tarif</th>
<th id='adf_alter'>Alter</th>
<th id='adf_beitrag'>Beitrag</th>
<th id='adf_leistungsstaerke'>Leistungsstaerke</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Gesellschaft</td>
<td>Tarif</td>
<td>Alter</td>
<td>Beitrag</td>
<td>Leistungsstaerke</td>
</tr>
</tfoot>
";
//
 
// Inhalte in Tabelle einfügen
while($row = mysql_fetch_array($result))
  {
  echo "<tbody>";
  echo "<tr>";
  echo "<td>" . $row['adf_gesellschaft'] . "</td>";
  echo "<td>" . $row['adf_tarif'] . "</td>";
  echo "<td>" . $row['adf_alter'] . "</td>";
  echo "<td>" . $row['adf_beitrag'] . "</td>";
  echo "<td>" . $row['adf_leistungsstaerke'] . "</td>";
  echo "</tr>";
  echo "</tbody>";
  }
echo "</table>";
 
echo "<script type='text/javascript' src='js/prototype.js'></script>";
echo "<script type='text/javascript' src='js/fabtabulous.js'></script>";
echo "<script type='text/javascript' src='js/tablekit.js'></script>";
 
//
 
mysql_close($con);
?>

Torben Brodt

Administrator

Posts: 8,454

4

Monday, November 30th 2009, 10:16pm

Beschäftige dich unbedingt mal mit dem Thema: SQL Injections.
Ohne ein $q = mysql_real_escape_string($q); kann man deine DB hacken.
Nach der Änderung entferne bitte den Passwortschutz, damit man das live testen kann.

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Deadman44

Professional

Posts: 415

5

Monday, November 30th 2009, 10:19pm

Deine Seite verlangt im mom eine Benutuerauthentifizierung mittels .htacess

michas

Beginner

Posts: 8

6

Monday, November 30th 2009, 11:36pm

OK, den Verzeichnisschutz habe ich entfernt. Das mit den SQL- Injection ist doch dachte ich nur ein problem wenn ich eingaben zulasse ?? ich verwende nur auswahlfelder - kann doch dann eigentlich kein prob mehr sein , oder täusche ich mich.

michas

Beginner

Posts: 8

7

Monday, November 30th 2009, 11:58pm

in der getuser.php hab ichs wie folgt geändert:

	PHP Quellcode
1	$sql="SELECT * FROM $table WHERE adf_alter = '".mysql_real_escape_string($q)."'";

reicht das zur sicherung aus? muss man sicherheitstechnisch noch mehr beachten ?

Deadman44

Professional

Posts: 415

8

Tuesday, December 1st 2009, 2:25pm

Einen konkreten Fehler deinerseits konnte ich jetzt auch nicht finden. Ich würde darauf tippen, dass prototpye respektive tablekit nur am anfang die seite nach zu sortierenden Elementen scannt. Da du jedoch deine Tabelle jedoch erst später dynamisch hinzufügst, wird diese nicht mehr erkannt. Aber wie gesagt, nur eine Vermutung. Ich bin kein JS Guru und von JS-Frameworks habe ich auch keine Ahnung.
EDIT:
Eine andere Idee wäre es, wenn du die tabelle schon in dein dokument schreibst und mittels css auf invisible setzt. Dann kannst du die Daten mit Ajax nachladen und setzt die tabelle mittels DOM und CSS auf visible. Vielleicht funktioniert es dann. Dafür müsstest du aber die getuser.php so anpassen, dass sie nur noch den inhalt aus tbody zurückgibt.

This post has been edited 2 times, last edit by "Deadman44" (Dec 1st 2009, 2:38pm)

michas

Beginner

Posts: 8

9

Tuesday, December 1st 2009, 3:37pm

Deine Vermutung wird wohl stimmen. Das habe ich jetzt während meiner Recherche schon mehrfach gelesen. Die Option wäre das Nachladen des JS, wofür ich jetzt allerdings noch keine Lösung habe. Werde mal weiter suchen (so lernt man am besten) - oder jemand hat ne Lösung. :-)

Ansätze hätte ich ein paar: beim protoype das evalScripts als Lösungsoption, wobei hier nur der im response enthaltene JS-code ausgeführt wird - läd aber keine scripte nach

Deadman44

Professional

Posts: 415

10

Tuesday, December 1st 2009, 4:56pm

Könntest du mir mal einen mysqldump deiner Tabelle mit den Daten für getuser.php schicken? Ich hätte eine Idee, wie es vielleicht funktionieren könnte, bräuchte dafür aber Testdaten.

michas

Beginner

Posts: 8

11

Wednesday, December 2nd 2009, 12:25am

den Lösungsweg nur den tbody zurückzugeben habe ich schon getestet, da gehts aber auch nicht. das js wird in dem div in dem der ajax request reinkommt nicht verwendet. Bei meiner uche ist immer das evalScripts als Lösung verwendet worden, allerdings keine Ahnung wie ich das einbaue...... :-(

vince

Master

Posts: 1,103

12

Wednesday, December 2nd 2009, 12:19pm

Hi,

du kannst versuchen bei deiner Response einfach eval() zu nutzen ... also eval(response).

Ansonsten kannst auch die Ajaxfuntkion von Prototype nutzen, dann brauchst du dir um die Verarbeitung der Response keine Gedanken mehr zu machen. (Sollte automatisch erkannt werden)
http://api.prototypejs.org/ajax/ajax/request.html

Quoted

Bei meiner uche ist immer das evalScripts als Lösung verwendet worden, allerdings keine Ahnung wie ich das einbaue...... :-(

Das ist keine Funtkion die du einbauen kannst, sondern eine Eigenschaft der Ajax Funktion von PT.

Quoted

If you use evalScripts: true, any inline <script> block will be evaluated. This does not mean it will be evaluated in the global scope

michas

Beginner

Posts: 8

13

Monday, December 7th 2009, 5:27pm

Statusupdate: also ich hab jetzt in der selectuser.js folgendes geändert:

JavaScript Code

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
TableKit.load('adf_tabelle1');
}
}

also das TableKit.load('adf_tabelle1'); eingefügt, damit er nach dem request die Tabelle mit der ID adf_tabelle1 läd.

Funktioniert soweit auch ganz gut - beim ersten mal :-( und auch nur in der ersten Zeile der Tabelle. Wenn ich einen anderen Eintrag auswähle funktionierts gar nicht mehr.

Woran kann dies liegen ?

Torben Brodt

Administrator

Posts: 8,454

14

Monday, December 7th 2009, 9:36pm

naja.. TableKit ist einfach nicht dafür gedacht einen Container mehrfach zu beladen.
Ein möglicher Workaround der mir einfällt ist einen zweiten DIV Container zu befüllen. Und die alte Tabelle anschließend zu löschen.

Ich möchte nicht zu schnell ein Urteil übe TableKit fällen, aber auf den ersten Blick sieht es nicht nach AJAX aus.
Die meisten Scripte schreiben zwar AJAX auf ihre Webseiten, arbeiten aber nur mit JavaScript - sortieren also nur das um, was in der Tabelle ist.

Ein schönes Script für Mootools ist OmniGrid: http://www.omnisdata.com/omnigrid/
Für Jquery ist es FlexiGrid: http://www.flexigrid.info/
Für Prototype habe ich leider nichts gefunden.

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung