Ajax Request mit Übergabe von Datenbankeinträgen

brudsch · 29.12.2011, 11:39

Hallo zusammen,

leider wusste ich nicht ganz genau wie ich diesen Thread benennen soll.

Folgendes Szenario stellt sich mir dar:
Ich habe eine Seite, 2 DIV. In das erste DIV werden per AJAX Daten aus der Datenbank nachgeladen (aktuell gehalten). Die Daten werden mittels einer weiteren Seite eingefügt.

Diese beiden Seiten sehen wie folgt aus:

index:

PHP-Code:

  <?php

$room_id="1";

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Hauptseite</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

 
<body>

<div id="datas"></div>

<div id="toggle" style="display:none; border:#ddd solid dashed 1px; margin-top:20px; padding:10px; width:350px;">

Menu

  <a href="javascript:toggleDiv('toggle');" title="klick mich" style="display:block; padding:10px;">Close</a> </div>

<script type="text/javascript">

//Aktualisieren der geholten Daten

var refreshId = setInterval(function()

{

     $('#datas').load('datas.php?room_id=<?php echo $room_id; ?>')

}, 3000);

</script>

</body>

</html>

Wie man sieht befindet sich auf dieser Seite das DIV "datas", dort werden die Sachen aus der DB reingeladen von dieser Seite:

datas.php

PHP-Code:

  <?php 

require_once('db.php');

 
$roomid=$_GET['room_id'];

 
mysql_select_db($database_ac, $ac);

$query_datas = sprintf("SELECT id, user_id, room_id, user_name FROM ac_users_online WHERE room_id = $roomid");

$datas = mysql_query($query_datas, $ac) or die(mysql_error());

$row_datas = mysql_fetch_assoc($datas);

$totalRows_datas = mysql_num_rows($datas);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>datas</title>

</head>

 
<body>

<table border="0">

  <?php do { ?>

    <tr>

      <td><a href="javascript:toggleDiv('toggle');"><?php echo $row_datas['user_name']; ?></a></td>

      <td><?php echo $row_datas['user_id']; ?></td>

    </tr>

    <?php } while ($row_datas = mysql_fetch_assoc($datas)); ?>

</table>

<script type="text/javascript">

//Div ein- und ausblenden

function toggleDiv(element){

 if(document.getElementById(element).style.display == 'none')

  document.getElementById(element).style.display = 'block';

 else

       document.getElementById(element).style.display = 'none';

}

</script>

</body>

</html>

<?php

mysql_free_result($datas);

?>

Ok soweit alles in Ordnung, das macht es auch wie es soll *g*
Nun mein Problem:
Wie man sieht kommen aus der datas.php Daten, die verlinkt sind (user_name). In der index.php befindet sich ein DIV (toggle) das beim Klick auf den Benutzernamen öffnet.

Da in dem Menu (toggle) dann aber noch weitere Links reinkommen, wo Daten übergeben werden müssen, muß jeder Link aus der datas.php individuell mit der ID des Users übergeben werden.

Also sprich: Ich klicke auf einen Benutzernamen, dort öffnet sich das Menu (toggle), in diesem Menu befinden sich dann Links zu Seiten (z.b. Profil), wo aber vom User die ID mitgegeben werden muß.

Mein Problem liegt darin, daß ich nicht weiß wie ich die ID von der datas.php an die index.php ins Menu übergeben kann.

Ich hatte da 2 Überlegungen... einmal eine weitere Seite, die die ID des Users übergibt oder eben direkt aus der datas.php übergeben wird.
Ich denke fast der Knackpunkt wäre bei der datas.php hier:

PHP-Code:

 
<a href="javascript:toggleDiv('toggle');"><?php echo $row_datas['user_name']; ?></a>

Nur ich weiß nicht wie ich da die ID übergeben kann zum toggle.

Ich füge mal ein Bild an damit man es mal grafisch sehen kann was ich meine.

Nach langem Text hoffe ich nicht, daß ihr mich falsch versteht, ich möchte keine fertige Lösung haben, sondern nur einen Tip wie es am Besten zu lösen wäre und eben vielleicht mit einem Anhaltspunkt zum weiteren Nachdenken.

Es wäre schön wenn mir da jemand helfen könnte.

Vielen Dank und Gruß
brudsch

rudygotya · 29.12.2011, 11:48

Damit du in dem nachgeladenen Content kein js brauchst, benutz delegate.

Die id des Benutzers kannst du bspw mit einem data-attribut mitgeben und per $.fn.data auslesen. Oder gleich den kompletten Link profil.php?id=123 in den Link eintragen. Für den Click-Event musst du dann ein preventDefault mitgeben, wenn du per ajax nachladen willst.

do {} while() macht bei dir im Code keinen Sinn, da die Schleife immer mindestens einen Durchlauf hat. Was, wenn nichts in der DB steht?

Grüße

Basti

BlackScorp · 29.12.2011, 11:55

du könntest die data.php so ändern

PHP-Code:

  <?php 
require_once('db.php');

$roomid=mysql_real_escape_string($_GET['room_id']);

mysql_select_db($database_ac, $ac);
$query_datas = sprintf("SELECT id, user_id, room_id, user_name FROM ac_users_online WHERE room_id = $roomid");
$datas = mysql_query($query_datas, $ac) or die(mysql_error());
$result = array();
while($row = mysql_fetch_assoc($datas)){
$result[]= array('id' => $row['user_id'],
'name'=>$row['user_name']);
}
echo json_encode($result);
?>

und dein Ajax request müsste dann so aussehen:

PHP-Code:

 
var refreshId = setInterval(function()
{
    $.getJSON('datas.php',{data:<?php echo $room_id; ?>}, function(data){
var html = '<table class="users" border="0">';
for(var i in data){
if($('#'+data[i].id).lenght == 0){
html += '<tr id="'+data[i].id+'"><td>'+data[i].name+'</td><td>'+data[i].id+'</td></tr>';
}}
html +='</table>';
$('#datas').append(html);
$('.users tr').live('click',function(){$this.slideToggle('slow');}); //Ka ob das jetzt so geht
}, 3000);

auf jedenfall, wenn deine data.php den inhalt in eine index.php lädt, darf diese normalerweise kein html head enthalten.

brudsch · 29.12.2011, 11:59

Basti,

vielen Dank für Deine Antwort. Das ist mir gerade etwas viel Input *g* Da ich noch etwas in den Kinderschuhen stecke was Javascript angeht.

Ich habe mir die Links mal angeschaut und durchgelesen, nun bin ich verwirrter als vorher. Um das mal so zu sagen

Mit den Schleifen zu arbeiten war für mich erst einmal das Leichteste, wollte es aber vielleicht mit Listen lösen, aber da muß ich mich noch etwas dahinter klemmen.

Leider versteh ich Deine anderen Antworten nicht so ganz, muß ich ehrlich zugeben.

BlackScorp · 29.12.2011, 12:08

zum toggeln musst du keine ID übergeben, du verwendest ja jQuery . jQuery hat eine slideToggle funktion. Das einzige was du machen musst, ist deine Tabelle mit den benutzern eine ID zu geben und die tr elemente in der Tabelle auswählen

$('#tabellen_id tr').click(function(){
$this.slideToggle('slow');
});

somit aktivierst du das auf und zu klappen auf allen tr elementen der Tabelle

brudsch · 29.12.2011, 12:13

Hallo black,

danke auch Dir für die Antwort.

Ich habe es jetzt mal so getestet mit Deinem Code. Leider erscheint keine Ausgabe. Ein Fehler kommt:

missing } after function body

Jetzt habe ich am Ende mal }); eingefügt, es erscheint zwar keine Fehlermeldung, aber auch keine Ausgabe (lädt auch nicht nach 3 Sek nach).

Nun steckt der Fehler sicher wieder im kleinsten Detail, und ich finde ihn nicht

rudygotya · 29.12.2011, 12:15

Zitat:

Mit den Schleifen zu arbeiten war für mich erst einmal das Leichteste, wollte es aber vielleicht mit Listen lösen, aber da muß ich mich noch etwas dahinter klemmen.

?? Machs einfach, wies blackscorp gezeigt hat.

PHP-Code:

  while($row = mysql_fetch_assoc($datas)){ // ...

Zahlen braucht man nicht escapen:

PHP-Code:

  $sql = sprintf("SELECT id, user_id, room_id, user_name FROM ac_users_online WHERE room_id = %d", intval( $roomId ));

Nicht falsch verstehen, aber wenn bei deiner Selbsteinschätzung Fortgeschrittener steht, bekommst du auch fortgeschrittenere Antworten

Zeig uns doch mal ein Online-Beispiel.

BlackScorp · 29.12.2011, 12:18

müsste klappen

Code:

var refreshId = setInterval(function(){
    $.getJSON('datas.php',{data:<?php echo $room_id; ?>}, function(data){
        var html = '<table class="users" border="0">';
        for(var i in data){
            if($('#'+data[i].id).lenght == 0){
                html += '<tr id="'+data[i].id+'"><td>'+data[i].name+'</td><td>'+data[i].id+'</td></tr>';
            }
        }
        html +='</table>';
        $('#datas').append(html);
        $('.users tr').live('click',function(){$this.slideToggle('slow');}); //Ka ob das jetzt so geht
    });
}, 3000);

EDIT: online demo wäre von vorteil und YAY 2k beiträge genau!!

brudsch · 29.12.2011, 12:32

Zitat:

Nicht falsch verstehen, aber wenn bei deiner Selbsteinschätzung Fortgeschrittener steht, bekommst du auch fortgeschrittenere Antworten

Das stimmt wohl, gebe ich Dir Recht! An sich klappt es auch gut mit PHP, aber warum da Fortgeschritten stand (hab es geändert) weiß ich leider nicht. Ich bin nun wieder Anfänger

Mit den Schleifen hatte ich schon abgewählt und scorps Beispiel genommen. Die Antwort hatte sich überschnitten.

@scorp
Der Code funktioniert nun, danke dir. Aber ich habe leider immer noch keine Ausgabe im DIV. Er scheint die room_id nicht zu übergeben, die kommt auf jeden Fall nicht in der datas.php an.
Undefined index: room_id in in datas.php on line 4 ($roomid=$_GET['room_id']

Nun, ich denke es kann dann nur an dieser Zeile liegen

$.getJSON('datas.php',{data:<?php echo $room_id; ?>}, function(data){

Hab da jetzt schon versucht die irgendwie anderweitig zu übergeben, aber so ganz versteh ich das noch nicht.

edit: ich teste es gerade lokal, werde es aber gleich mal online bereit stellen.

BlackScorp · 29.12.2011, 12:40

achso, ja sorry

PHP-Code:

 
$.getJSON('datas.php',{room_id:<?php echo $room_id; ?>}, function(data){ ..}

wäre richtig

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit MVC und Ajax Request, responseText kommt als gesamtes Layout zurück	litterauspirna	PHP Einsteiger	39	30.12.2011 20:12
Läuft der Ajax Request weiter auch wenn der Browser geschlossen wird?	<Hotte>	JavaScript, Ajax und mehr	2	15.11.2011 08:25
[Erledigt] jquery ajax request ist immer null	taurus	JavaScript, Ajax und mehr	3	29.08.2011 00:00
AJAX Problem beim IE bei Übergabe gleicher Parameter	ernesto	PHP Einsteiger	7	28.04.2011 17:44
SEDO Ajax Post Request mit PHP curl	Lightware	PHP Einsteiger	2	31.03.2011 12:34
[Erledigt] Jquery AJAX request wird erst am Ende ausgeführt	PiXeL1337	JavaScript, Ajax und mehr	10	24.02.2011 09:02
[Erledigt] AJAX Request funktioniert nicht	Nickstar	JavaScript, Ajax und mehr	6	10.11.2010 20:21
[Erledigt] Ajax Request mit PHP Registry?	tarian	JavaScript, Ajax und mehr	12	16.09.2010 13:17
[Erledigt] leeres request trotz übergebenen Daten AJAX	mupilz	JavaScript, Ajax und mehr	6	06.04.2010 06:55
Ajax, Variablenweitergabe	saduccm	JavaScript, Ajax und mehr	1	08.03.2010 19:50
[Erledigt] AJAX interpretRequest läuft nur mit alert()	Buschdieb	JavaScript, Ajax und mehr	14	26.08.2009 14:04
Lauftext nach ajax request ?!?!	8eww	JavaScript, Ajax und mehr	11	25.04.2009 12:41
[Erledigt] Ajax Request Datei nicht direkt öffnen	Heinerlutscher	JavaScript, Ajax und mehr	5	02.03.2009 18:10
Ajax: POST Übergabe eines Arrays	obi	HTML, Usability und Barrierefreiheit	4	27.07.2007 17:02
innerHTML funktioniert nicht bei AJAX request	Plague	HTML, Usability und Barrierefreiheit	1	21.12.2006 14:30

29.12.2011, 11:39
brudsch Benutzer Registriert seit: 12.10.2010 Beiträge: 33 PHP-Kenntnisse: Anfänger	Ajax Request mit Übergabe von Datenbankeinträgen Hallo zusammen, leider wusste ich nicht ganz genau wie ich diesen Thread benennen soll. Folgendes Szenario stellt sich mir dar: Ich habe eine Seite, 2 DIV. In das erste DIV werden per AJAX Daten aus der Datenbank nachgeladen (aktuell gehalten). Die Daten werden mittels einer weiteren Seite eingefügt. Diese beiden Seiten sehen wie folgt aus: index: PHP-Code: <?php $room_id="1"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hauptseite</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div id="datas"></div> <div id="toggle" style="display:none; border:#ddd solid dashed 1px; margin-top:20px; padding:10px; width:350px;"> Menu <a href="javascript:toggleDiv('toggle');" title="klick mich" style="display:block; padding:10px;">Close</a> </div> <script type="text/javascript"> //Aktualisieren der geholten Daten var refreshId = setInterval(function() { $('#datas').load('datas.php?room_id=<?php echo $room_id; ?>') }, 3000); </script> </body> </html> Wie man sieht befindet sich auf dieser Seite das DIV "datas", dort werden die Sachen aus der DB reingeladen von dieser Seite: datas.php PHP-Code: <?php require_once('db.php'); $roomid=$_GET['room_id']; mysql_select_db($database_ac, $ac); $query_datas = sprintf("SELECT id, user_id, room_id, user_name FROM ac_users_online WHERE room_id = $roomid"); $datas = mysql_query($query_datas, $ac) or die(mysql_error()); $row_datas = mysql_fetch_assoc($datas); $totalRows_datas = mysql_num_rows($datas); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>datas</title> </head> <body> <table border="0"> <?php do { ?> <tr> <td><a href="javascript:toggleDiv('toggle');"><?php echo $row_datas['user_name']; ?></a></td> <td><?php echo $row_datas['user_id']; ?></td> </tr> <?php } while ($row_datas = mysql_fetch_assoc($datas)); ?> </table> <script type="text/javascript"> //Div ein- und ausblenden function toggleDiv(element){ if(document.getElementById(element).style.display == 'none') document.getElementById(element).style.display = 'block'; else document.getElementById(element).style.display = 'none'; } </script> </body> </html> <?php mysql_free_result($datas); ?> Ok soweit alles in Ordnung, das macht es auch wie es soll g Nun mein Problem: Wie man sieht kommen aus der datas.php Daten, die verlinkt sind (user_name). In der index.php befindet sich ein DIV (toggle) das beim Klick auf den Benutzernamen öffnet. Da in dem Menu (toggle) dann aber noch weitere Links reinkommen, wo Daten übergeben werden müssen, muß jeder Link aus der datas.php individuell mit der ID des Users übergeben werden. Also sprich: Ich klicke auf einen Benutzernamen, dort öffnet sich das Menu (toggle), in diesem Menu befinden sich dann Links zu Seiten (z.b. Profil), wo aber vom User die ID mitgegeben werden muß. Mein Problem liegt darin, daß ich nicht weiß wie ich die ID von der datas.php an die index.php ins Menu übergeben kann. Ich hatte da 2 Überlegungen... einmal eine weitere Seite, die die ID des Users übergibt oder eben direkt aus der datas.php übergeben wird. Ich denke fast der Knackpunkt wäre bei der datas.php hier: PHP-Code: `<a href="javascript:toggleDiv('toggle');"><?php echo $row_datas['user_name']; ?></a>` Nur ich weiß nicht wie ich da die ID übergeben kann zum toggle. Ich füge mal ein Bild an damit man es mal grafisch sehen kann was ich meine. Nach langem Text hoffe ich nicht, daß ihr mich falsch versteht, ich möchte keine fertige Lösung haben, sondern nur einen Tip wie es am Besten zu lösen wäre und eben vielleicht mit einem Anhaltspunkt zum weiteren Nachdenken. Es wäre schön wenn mir da jemand helfen könnte. Vielen Dank und Gruß brudsch


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

29.12.2011, 11:48
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Damit du in dem nachgeladenen Content kein js brauchst, benutz delegate. Die id des Benutzers kannst du bspw mit einem data-attribut mitgeben und per $.fn.data auslesen. Oder gleich den kompletten Link profil.php?id=123 in den Link eintragen. Für den Click-Event musst du dann ein preventDefault mitgeben, wenn du per ajax nachladen willst. do {} while() macht bei dir im Code keinen Sinn, da die Schleife immer mindestens einen Durchlauf hat. Was, wenn nichts in der DB steht? Grüße Basti __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

29.12.2011, 11:55
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	du könntest die data.php so ändern PHP-Code: `<?php require_once('db.php'); $roomid=mysql_real_escape_string($_GET['room_id']); mysql_select_db($database_ac, $ac); $query_datas = sprintf("SELECT id, user_id, room_id, user_name FROM ac_users_online WHERE room_id = $roomid"); $datas = mysql_query($query_datas, $ac) or die(mysql_error()); $result = array(); while($row = mysql_fetch_assoc($datas)){ $result[]= array('id' => $row['user_id'], 'name'=>$row['user_name']); } echo json_encode($result); ?>` und dein Ajax request müsste dann so aussehen: PHP-Code: `var refreshId = setInterval(function() { $.getJSON('datas.php',{data:<?php echo $room_id; ?>}, function(data){ var html = '<table class="users" border="0">'; for(var i in data){ if($('#'+data[i].id).lenght == 0){ html += '<tr id="'+data[i].id+'"><td>'+data[i].name+'</td><td>'+data[i].id+'</td></tr>'; }} html +='</table>'; $('#datas').append(html); $('.users tr').live('click',function(){$this.slideToggle('slow');}); //Ka ob das jetzt so geht }, 3000);` auf jedenfall, wenn deine data.php den inhalt in eine index.php lädt, darf diese normalerweise kein html head enthalten. __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen Geändert von BlackScorp (29.12.2011 um 12:10 Uhr).

29.12.2011, 11:59
brudsch Benutzer Registriert seit: 12.10.2010 Beiträge: 33 PHP-Kenntnisse: Anfänger	Basti, vielen Dank für Deine Antwort. Das ist mir gerade etwas viel Input g Da ich noch etwas in den Kinderschuhen stecke was Javascript angeht. Ich habe mir die Links mal angeschaut und durchgelesen, nun bin ich verwirrter als vorher. Um das mal so zu sagen Mit den Schleifen zu arbeiten war für mich erst einmal das Leichteste, wollte es aber vielleicht mit Listen lösen, aber da muß ich mich noch etwas dahinter klemmen. Leider versteh ich Deine anderen Antworten nicht so ganz, muß ich ehrlich zugeben.

29.12.2011, 12:08
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	zum toggeln musst du keine ID übergeben, du verwendest ja jQuery . jQuery hat eine slideToggle funktion. Das einzige was du machen musst, ist deine Tabelle mit den benutzern eine ID zu geben und die tr elemente in der Tabelle auswählen $('#tabellen_id tr').click(function(){ $this.slideToggle('slow'); }); somit aktivierst du das auf und zu klappen auf allen tr elementen der Tabelle __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

29.12.2011, 12:13
brudsch Benutzer Registriert seit: 12.10.2010 Beiträge: 33 PHP-Kenntnisse: Anfänger	Hallo black, danke auch Dir für die Antwort. Ich habe es jetzt mal so getestet mit Deinem Code. Leider erscheint keine Ausgabe. Ein Fehler kommt: missing } after function body Jetzt habe ich am Ende mal }); eingefügt, es erscheint zwar keine Fehlermeldung, aber auch keine Ausgabe (lädt auch nicht nach 3 Sek nach). Nun steckt der Fehler sicher wieder im kleinsten Detail, und ich finde ihn nicht

29.12.2011, 12:40
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	achso, ja sorry PHP-Code: `$.getJSON('datas.php',{room_id:<?php echo $room_id; ?>}, function(data){ ..}` wäre richtig __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen