Werte aus DB in PHP über javascript bei klick ausgeben

[werhilftmir]

Hallo,
ich programmiere gerade ein Anwendung die hauptsächlich auf PHP und eine Mysqldb setzt.

In der mysqldb habe ich bestimmte Inhalte die ich später in einem Listenfeld zur Auswahl bereitstellen will. zu Jeder Auswahl in dem Listenfeld gibt es auch eine dazugehörige Beschreibung.

Wenn ich jetzt auf einen Eintrag in der Liste klicke dann möchte ich das in einem textfeld die Beschreibung (ohne reload der Seite) ausgegeben wird.
Ich glaube dazu benötige ich Javascript was zuvor mit den Beschreibungs-texten aus der DB gefüllt wird die wiederum zu den Inhalten in dem Listenfeld passen.

Gibt es dazu ein vorgefertigtes Code-Schnipse was ich verwenden kann?
Bin nicht so fit in Javascript

Gruß Jürgen

[T-Rex]

Hoi,

also wenn es nicht viel Text ist, dann kannst du den Text gleich via php ins JS laden. Ansonsten gibt es die möglichkeit einen Reuest mittels JS auszulösen. Das nennt sich dann Ajax. Dazu gibt es massig Tutorials und Erklärungen.

Via php würde das ganze so aussehen:
<script>
<?php
echo "var text = '".$text."';";
?>
<script>

Gruß
The-Rex

[werhilftmir]

Hoi,

also wenn es nicht viel Text ist, dann kannst du den Text gleich via php ins JS laden. Ansonsten gibt es die möglichkeit einen Reuest mittels JS auszulösen. Das nennt sich dann Ajax. Dazu gibt es massig Tutorials und Erklärungen.

Via php würde das ganze so aussehen:
<script>
<?php
echo "var text = '".$text."';";
?>
<script>

Gruß
The-Rex

hört sich zwar gut an, aber verstehe ich nicht

es ist tatsächlich nicht viel text...
es sind ca. 10 Einträge in der DB sozusagen die kurzen Namen
wie
test 1
test 2
test 3

und dann die Beschreibung zu Test 1 etc.
z:b. die Beschreibung von Test 1

"Test 1 ist der erste Test und alles was danach kommt muss besser werden"

usw.

Gruß Jürgen

[molily]

Hallo,

Gibt es dazu ein vorgefertigtes Code-Schnipse was ich verwenden kann?

Das geht mit der Bibliothek jQuery sehr einfach.

HTML:

<ul class="liste">  
<li><a href="beschreibung.php?id=1">Foo</a></li>  
<li><a href="beschreibung.php?id=2">Foo</a></li>  
<li><a href="beschreibung.php?id=3">Foo</a></li>  
<li><a href="beschreibung.php?id=4">Foo</a></li>  
</ul>  
  
<section id="beschreibung"></section>

JavaScript:

$('.liste a').click(function(event) {  
  // [link:http://molily.de/js/event-handling-objekt.html@title=Unterdrücke Standardaktion] (der Browser soll dem Link nicht folgen, wir laden ihn per JS)  
  event.[link:http://api.jquery.com/event.preventdefault/@title=preventDefault]();  
  // href-Attribut des Links auslesen  
  var href = event.target.href;  
  // Die Adresse per XMLHttpRequest laden und die Serverantwort in  
  // das Element mit der ID »beschreibung« füllen  
  $('#beschreibung').[link:http://api.jquery.com/load/@title=load]( href );  
});

Der Server (das PHP-Script beschreibung.php) braucht nur ein HTML-Snippet zurückgeben, kein vollständiges Dokument. Kann also sofort mit <h2>Produkttitel</h2> <p>Beschreibung</p> usw. loslegen. (Zumindest wenn der Aufruf per JavaScript erfolgt; jQuery sendet zur Unterscheidung den HTTP-Header X-Requested-With: XMLHttpRequest).

Das Beispiel geht davon aus, dass die Inhalte bei Bedarf vom Server nachgeladen werden. Das dauert natürlich ein bisschen. Wenn es wichtig ist, dass die Inhalte sofort verfügbar sind, ist es auch möglich, alle Inhalte mit PHP ins Dokument zu rendern und sie nur wahlweise sichtbar zu machen. Dazu ist ebenfalls Event-Handling nötig und ferner DOM-Manipulation.

File Griese
Mathias

[werhilftmir]

Hallo,

Gibt es dazu ein vorgefertigtes Code-Schnipse was ich verwenden kann?

Das geht mit der Bibliothek jQuery sehr einfach.

HTML:

<ul class="liste">

<li><a href="beschreibung.php?id=1">Foo</a></li>
<li><a href="beschreibung.php?id=2">Foo</a></li>
<li><a href="beschreibung.php?id=3">Foo</a></li>
<li><a href="beschreibung.php?id=4">Foo</a></li>
</ul>

<section id="beschreibung"></section>

>   
> JavaScript:  
  
Hallo,  
das war mir jetzt ein bisschen zu arg Fachchinesisch... sorry  
  
ich hatte mich evtl. falsch ausgedrückt  
  
Ich lade bestimmte Werte in ein Option feld  
  
  
also  
<select name="was\_ausgewaehlt\_wird">  
<option value='id'>'inhalt 1 aus der mysqldb'</option>  
<option value='id'>'inhalt 1 aus der mysqldb'</option>  
</select>  
  
<input type=text>'hier steht SPÄTER bei KLICK auf das was in option-feld steht das was zu Inhalt 1,2 oder xvyz gehört.. z.B. die Beschzreibung zu Inhalt 2'</input>  
  
ich dachte mir es so.  
  
die option-felder kann ich ja via While schleife mit den Inhalten aus der DB füllen, dann erhalte ich auch noch die dazugehörige ID  
  
Alles was später bei KLICK dann im textfeld erscheinen soll steht zuvor schon in einem Array was ich mit den Beschreibungsinhalten aus der DB fülle und nur bei klick wird ein passender Inhalt ausgewählt  
  
Gruß Jürgen  
bei Klick auf einer der Einträge

[molily]

Hallo,

Alles was später bei KLICK dann im textfeld erscheinen soll steht zuvor schon in einem Array was ich mit den Beschreibungsinhalten aus der DB fülle und nur bei klick wird ein passender Inhalt ausgewählt

Der Array existiert nur serverseitig, also musst du ihn irgendwie zum Browser übertragen.

Das kannst du machen, indem du den Inhalt als HTML ausgibst und diese Element erst einmal versteckst. Beim Wechsel der select-Auswahl wird dieser Inhalt gelesen und ins Eingabefeld geschrieben.

Oder du kannst die Inhalte als JSON serialisieren und diese ins HTML einbetten. Ein JavaScript auf der Seite kann sie dann lesen.

Beispiel für Variante 1:

<select id="auswahl">  
<option value="123">…</option>  
</select>  
  
<p><input type="text" id="eingabefeld"></p>  
  
<p class="beschreibung" id="beschreibung-123">Beschreibung für ID 123</p>

Die Beschreibung ist unsichtbar (CSS):

.beschreibung { display: none; }

Dann die JavaScript-Logik (jQuery):

// Event-Handling: Überwache Änderungen des select-Elements  
$('#auswahl').change(function(event) {  
  // Ausgewählte ID lesen, daraus basteln wir die ID der Beschreibung zusammen  
  var id = $(event.target).val();  
  // Element mit der Beschreibung heraussuchen und den Textinhalt auslesen  
  var beschreibungstext = $('#beschreibung-' + id).text();  
  // Das Eingabefeld mit dem Text füllen (Wert setzen)  
  $('#eingabefeld').val(beschreibungstext);  
});

Mathias

[werhilftmir]

Hallo,

Alles was später bei KLICK dann im textfeld erscheinen soll steht zuvor schon in einem Array was ich mit den Beschreibungsinhalten aus der DB fülle und nur bei klick wird ein passender Inhalt ausgewählt

Der Array existiert nur serverseitig, also musst du ihn irgendwie zum Browser übertragen.

Das kannst du machen, indem du den Inhalt als HTML ausgibst und diese Element erst einmal versteckst. Beim Wechsel der select-Auswahl wird dieser Inhalt gelesen und ins Eingabefeld geschrieben.

Oder du kannst die Inhalte als JSON serialisieren und diese ins HTML einbetten. Ein JavaScript auf der Seite kann sie dann lesen.

Beispiel für Variante 1:

hallo
ich habe gerade dieses Beispiel gefunden was für mich etwas transparenter und nachvollziehbarer ist... sorry bin total grün wenn es um javascript geht

<script type="text/javascript">  
<!--  
var arrURLs = ["", "50", "90", "30", "25"];  
function changeInput(objSel){  
 objSel.form.txtOut.value = arrURLs[objSel.selectedIndex];  
}  
//-->  
</script>  
</head>  
<body>  
<form method="post" action="">  
  <select onChange="changeInput(this);">  
    <option value="t1">- Arbeit bitte auswaehlen -</option>  
    <option value="t2">Streichen</option>  
    <option value="t3">Tapezieren</option>  
usw...  
  </select>  
  <input type="text" name="txtOut" value="" />  
  
<BR><BR>

wenn ich nun das array so ungefähr fülle

var arrURLs = ["", <?php echo $row->beschreibung_1?>,<?php echo $row->beschreibung_2?>, <?php echo $row->beschreibung_3?>, .....etc. etc];  
function changeInput(objSel){  
 objSel.form.txtOut.value = arrURLs[objSel.selectedIndex];  
}

geht das?

das javascript kann ich ja irgendwo in das php dokument packen oder?
ich meine, es muss ja nicht am anfang stehen im header-bereich der Seite?

Gruß Jürgen

[molily]

Hallo,

ich habe gerade dieses Beispiel gefunden was für mich etwas transparenter und nachvollziehbarer ist...

Okay. Das Prinzip ist dasselbe wie das, was ich beschrieben habe.

Es ist ja schön, dass du dich woanders umsiehst, allerdings mache ich mir nicht die Mühe, Lösungen vorzuschlagen oder gar fertige Lösungen zu posten, wenn du sie dir nicht wirklich ansiehst und von Anfang an eine bestimmte andere Lösung anstrebst.

wenn ich nun das array so ungefähr fülle

var arrURLs = ["", <?php echo $row->beschreibung_1?>,<?php echo $row->beschreibung_2?>, <?php echo $row->beschreibung_3?>, .....etc. etc];

geht das?

Ja.

Wenn du eine beliebig hohe Anzahl an Beschreibungen hast, ist es allerdings nicht praktikabel, sie alle so hinzuschreiben. Deswegen hatte ich JSON und json_encode vorgeschlagen.

Erzeuge in PHP einen Array von Strings und bette ihn als JSON ins JavaScript ein:

<?php  
$arr = array("foo", "bar", "qux");  
?>

<script>  
[code lang=javascript]var arrURLs = <?php echo json_encode($arr); ?>

</script>[/code]

Im generierten HTML steht dann

<script>  
[code lang=javascript]var arrURLs = ["foo", "bar", "qux"];

</script>[/code]

Hier musst du allerdings aufpassen, wenn die Strings HTML enthalten. Dann könnte JavaScript eingeschmuggelt werden.

das javascript kann ich ja irgendwo in das php dokument packen oder?

Es ist in diesem Fall nicht so wichtig. Üblicherweise sollte das Script am Ende stehen.

ich meine, es muss ja nicht am anfang stehen im header-bereich der Seite?

Das muss es hier nicht.

Mathias