You are not logged in.

  • Login

Dear visitor, welcome to Coder Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Thursday, May 5th 2011, 1:36pm

Brauche Hilfe beim dynamischen nachladen von abhängigen elementen mit AJAX

Hi Leute,

Ich weiß es gibt schon ein Thema dazu aber bei mir liegt das Problem woanders.

Ich wollte den von Torben Brodt im Easy Coding Wiki bereitgestellten Code des Artikels „Select-Auswahl mit AJAX Abhängigkeit“ für ein PHP-Projekt verwenden, ich komme aber nicht dahinter wie ich den Code anpassen muss damit er auf meine Datenbank passt. Es geht darum das die Zuordnung welche Kategorie eine Unterkategorie einer anderen ist, in einer separaten Tabelle nur über ID-nummern gespeichert ist. Auch durch das Tutorial "Select-Auswahl mit AJAX Abhängigkeit und verschiedenen Tabellen" steig ich nicht wirklich durch. Ich hoffe das mir jemand von euch die Tutorials noch mal näher erläutern kann.

Es sieht sozusagen so aus:

kategorietabelle:
Kategorie_ID, Name, Beschreibung, Ersteller

Parent_to_Child_tabelle:

Parent_ID, Child_ID

Die Datenbank ist eine MySQL-datenbank und ich benutze PHP5. Wenn ein Kategorie in einer Selectbox ausgewählt wurde soll in der nächsten Selectbox die Unterkategorien geladen werden (wie im tutorial). gleichzeitig soll aber in einem div-bereich (oder einem anderen passenden container) die beschreibung der Katogire (oder alternativ ein zusammengesetzter text aus mehreren feldern [bin mir noch nicht ganz sicher welche von beiden varianten ich nehmen will]) angezeigt werden welche in der zuletzt geändertet selectbox ausgewählt wurde.
Sprich: "...onchange= unterkategorien nachladen, beschreibung/text in div laden..."

ich danke schon mal im vorraus

2

Thursday, May 5th 2011, 1:45pm

Und wo genau liegt jetzt dein Problem?
Du hast es ziemlich allgemein Beschrieben, nach dem Motto: So ist die Aufgabe, hier sind meine Tabellen und das hier ist das Tutorial.
Hast du schon was probiert?

3

Thursday, May 5th 2011, 1:59pm

Mein problem ist das ich nicht durch die tutorials durchsteige. Mein PHP und MySQL kenntnisse reichen aus um einfache sachen hinzubekommen aber bei dynamischen sachen haperts bei mir noch und wenn dann auch noch ajax dazu kommt raucht mir der kopf und ich komm nicht weiter.
Im groben hab ich ja verstanden was der code in den tutorials macht, aber ich raff nicht wie ich den code anpassen muss, damit er meinem vorhaben dienlich ist.
Ich versteh z.b. nicht wo bei folgendem code die $_REQUEST['id'] herkommt.

PHP Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$id = isset($_REQUEST['id']) ? $_REQUEST['id'] : 0;
 
// (1) example array with four main categories
for($i=0; $i<4; $i++) {
	// four subcategories each
	for($j=($i*10); $j<($i*10)+3; $j++) {
		$idx = $j+1;
		$data[$i][$j] = array(
			'id' => $idx,
			'text' => sprintf('cat %d (parent:%d)', $idx, $i),
		);
 
		// with three childs eiter
		for($k=($idx*10); $k<($idx*10)+3; $k++) {
			$data[$idx][$k] = array(
				'id' => $k,
				'text' => sprintf('subcat %d (parent:%d)', $k, $idx),
			);
		}
	}
}
 
// access the childs with its parent index
$return = $data[$id];
 
echo json_encode($return);


im prinzip brauch ich jemanden der mir die beiden Tutorials die ich im anfangspost genannt habe noch einmal genauer beschreibt, damit ich überhaupt erstmal anfang finde ... bin halt voll der noob was web-programmierung angeht.

4

Friday, May 6th 2011, 11:42am

Hmmm naja, ich hab jetz einfach mal drauf los gearbeitet und rumprobiert... allerdings läuft die sahe nich... wahrscheinlich hab ich den code aus dem tutorial nicht richtig angepasst oder bei der übergabe läuft was falsch...

hier mein ajax.php:

PHP Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
$Child_id_Array=array("0");
     $sql = "SELECT unterkklasse_id
               FROM klasse_zu_unterklasse
              WHERE parent_id = :id";
     $ERG = @mysql_query($sql);
     for($f=0;$f<mysql_num_rows($ERG);$f++){
       $Child_id_Array[$f]= @mysql_result($ERG,$f,'Knd_id');
     }
 
$child_names_array=array("0");
    for($g=0;$g<count($Child_id_Array);$g++)
    {
        $Names_SQL = 'SELECT klassen_id, klassen_name, klassen_beschreibung
                        FROM klassentabelle
                       WHERE klassen_id='$Child_id_Array[$g]'
                         AND klassen_Creator = '.$_SESSION['client_id'].') 
                          OR (klassen_public = 1)';
        $child_names_array[$g]= = @mysql_query($Names_SQL);
    } 
$return = $child_names_array->fetchAll();
 
echo json_encode($return)
?>



meine ajax.js sieht so aus:

JavaScript Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
var url             = "ajax/";
 
function sendRequest(domref, target) {
	// skip if no target specified
	if(!target) return false;
 
	// save reference to next target
	if(domref) domref.followup = target;
 
	var req;
	try {
		req = window.XMLHttpRequest ? new XMLHttpRequest():
			new ActiveXObject("Microsoft.XMLHTTP");
	} catch (e) {
            alert( "Ihr Webbrowser unterstuetzt leider kein Ajax!" );
	}
	req.onreadystatechange = function() {
		if ((req.readyState == 4) && (req.status == 200)) {
			// merge empty line with response
			var data = eval('(' + req.responseText + ')');
			var targetRef = document.getElementById(target);
			var targetSel = targetRef.getElementsByTagName('select')[0];
 
			// make it visible
			targetRef.style.display = 'block';
 
			// clear old data
			clearSelect(targetSel);
 
			// fill with data from json response
			var i=0;
			for(var x in data) {
				targetSel.options[i++] = new Option(
					data[x].klassen_beschreibung,
                                        data[x].klassen_name,
					data[x].klassen_id
				);
			}
 
			// clear all followups
			while(targetSel.followup) {
				targetRef = document.getElementById(targetSel.followup);
 
				// make it hidden
				targetRef.style.display = 'none';
 
				// mark next select
				targetSel = targetRef.getElementsByTagName('select')[0];
 
				// clear old data
				clearSelect(targetSel);
			}
		}
	}
 
	req.open('post', 'ajax.php');
	req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 
	// send empty post with initial load
	req.send(domref !== null ? 'id='+domref.value+'&name='+domref.name : '');
 
	return false; // return false to avoid reload/recentering of the page
}


und hier ist die index.php:

PHP Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php
 
$ausgabe='<form method="post" action="" id="ajaxSelect">
            <table>
                <tr>
                        <td>
                            text
                        </td>
                </tr>
                <tr>
                        <td>
                            &nbsp;
                        </td>
                </tr>
		<tr id="elem1" style="display:none">
			<td>HauptKategorie:</td>
			<td><select name="hauptkategorie" onchange="sendRequest(this, 'elem2')"><option value=""></option></select></td>
		</tr>
		<tr id="elem2" style="display:none">
			<td>UnterKategorie:</td>
			<td><select name="unterkategorie" onchange="sendRequest(this, 'elem3')"><option value=""></option></select></td>
		</tr>
		<tr id="elem3" style="display:none">
			<td>UnterUnterKategorie1:</td>
			<td><select name="unterunterkategorie" onchange="sendRequest(this, 'elem4')"><option value=""></option></select></td>
		</tr>
		<tr id="elem4" style="display:none">
			<td>UnterUnterKategorie2:</td>
			<td><select name="unterunterunterkategorie" "><option value=""></option></select></td>
		</tr>
            </table>
 
            <div>
                <input type="submit" />
            </div>
        </form>
        ';
 
echo $ausgabe;
?>



ich find den fehler nicht... könnt ihr mir weiterhelfen?

5

Friday, May 6th 2011, 4:01pm

Ich hab mir den Code jetzt nicht angeschaut aber was genau läuft denn nicht...?

6

Saturday, May 7th 2011, 10:30am

Also in der index.php hast du einen Syntax Fehler. Achte auf die Anführungszeichen.
Außerdem führst du in der ajax.php ein fetchAll auf einem Array Element aus. Das fetchALl ist eine PDO Methode.

Was hast du denn im JavaScript verändert? Für dein Vorhaben, musst du nur die ajax.php und die Namen der Selectfeder in der index.php ändern.

Basis sollte dieses Tutorial sein, weil es auf die Datenbank ausgelegt ist. Ich habe noch entsprechende Datenbankklassen ergänzt.
Select-Auswahl mit AJAX Abhängigkeit und verschiedenen Tabellen

Schritt1 index.php
<select name="xxx" hier sollte das xxx für etwas eindeutiges wie den Tabellennamen stehen.

Schritt2 ajax.php
Vergleich das mal mit meinem ersten Beitrag von hier: AJAX Select Abhängig
Du kannst anhand des $tablename eine switch/case Anfrage bauen um beliebige Queries zusammenzuschreiben.

Übrigens erleichtert die Arbeit mit Firebug die Aufgabe sehr.

7

Tuesday, May 10th 2011, 9:32am

Danke erstmal für die hilfe leute. Ich werd mal gucken wie ich weiter komme und wenn ich noch hilfe brauche, geb ich bescheid.

8

Wednesday, May 11th 2011, 4:11pm

Soo ich hab versucht die Tips zu beherzigen und glaube die tutorials verstanden zu haben. nun hab ich aber das problem, das der inhalt der selectboxen nicht geladen wird. Die Javafunktion wird garnicht aufgerufen denk ich (hab an verschiedenen stellen textausgaben eingefügt um das zu prüfen).

hier der code an der stelle, an der die ajax.js aufgerufen wird:

PHP Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
echo' <tr>
                    <td>
                        <table>
                            <tr id="hauptkategorie" style="display:block">
                                <td>HauptKategorie:</td>
                                <td><select name="hauptkategorie" size="1" onChange=\'javascript:sendSelBoxRequest(this, document.getElementById("unterkategorie"));\'><option value="">'.$arbmkat_select_option.'</option></select></td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <table>
                            <tr id="unterkategorie" style="display:block">
                            	<td>UnterKategorie:</td>
                                <td><select name="unterkategorie" size="1" onChange=\'javascript:sendSelBoxRequest(this, document.getElementById("unterunterkategorie"));\'><option value=""></option></select></td>
                            </tr>
                        </table>
                    </td>
                </tr>';


und hier meine neue ajax.php

PHP Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
 
$Child_id_Array=array("0");
$f=0;
     $sql = "SELECT unterklasse_id
               FROM klasse_zu_unterklasse
              WHERE parent_id = :id";
     $ERG = @mysql_query($sql, $central_datenbank->central_verbindung);
     while($zeile = mysql_fetch_row($ERG))
       $Child_id_Array[$f]= $zeile[1];
     }
 
$child_array=array("0");
    for($g=0;$g<count($Child_id_Array);$g++)
    {
        $Names_SQL = 'SELECT Klassen_id, Klassen_name
                        FROM Klassentabelle
                       WHERE Klassen_id='$Child_id_Array[$g]'
                         AND Klassen_Creator = '.$_SESSION['client_id'].') 
                          OR (Klassen_public = 1)';
        $child_array[$g]= @mysql_query($Names_SQL);
    }
echo 'Hallo!!! ';
echo json_encode($child_array);
 
?>

This post has been edited 3 times, last edit by "TheMansn" (May 12th 2011, 2:53pm)


9

Wednesday, May 11th 2011, 5:06pm

1. Bitte Quellcode hervorheben ;).
2. Java != JavaScript
3. javascript:funktionsname brauchst du bei Events wie "onchange" nicht. Der Parameter wird automatisch als JavaScript behandelt.
4. Wo ist deine Funktion sendSelBoxRequest? Sonst erstell sie mal und füge nur ein alert('Hello World'); rein, damit siehst du, ob es aufgerufen wird.

10

Thursday, May 12th 2011, 9:34am

1. Bitte Quellcode hervorheben ;).
2. Java != JavaScript
3. javascript:funktionsname brauchst du bei Events wie "onchange" nicht. Der Parameter wird automatisch als JavaScript behandelt.
4. Wo ist deine Funktion sendSelBoxRequest? Sonst erstell sie mal und füge nur ein alert('Hello World'); rein, damit siehst du, ob es aufgerufen wird.


Zu 1. Wie meinst du das? Ich hab den entsprechenden Quellcode bei dem ich Probleme habe schon in meinen Posts eingefügt und abgeteilt.
zu 2. Ich weiß das Java nicht gleich JavaScript ist, hab auch nie behauptet das es so ist. Wenn es doch so aussieht, dann lag es vllt daran das ich mich verschrieben habe.
Zu 3. Danke für den Tipp werde ich beachten.
zu 4. In einem Vorherigen Post is mein "ajax.js" drin. Dort ist die Funktion "sendSelBoxRequest" enthalten. Alles was ich dran geändert hatte war, das ich Zeile 34 rausgenommen habe.
Wie ich schon geschrieben habe, habe ich an mehreren Stellen bereits Ausgaben (echo bei php und alert bei js) eingefügt um zu Testen wie das Programm sich verhält und
ob die Funktion überhaupt aufgerufen wird. Die alerts in der Funktion werden nicht geliefert also muss ich davon ausgehen das die Funktion nicht aufgerufen wird. Dem zu Folge
vermute ich, das entweder ein Fehler bei der Art wie ich die Funktion aufrufe vorliegt oder das die Parameter falsch sind oder das ein Fehler vorhanden ist, von dem ich (als absoluter
Anfänger was web-programmierung angeht) nicht weiß das er da ist.

EDIT: habe noch ma alles durchgeguckt. die "sendSelBoxRequest" wird aufgerufen (warums auf einmal klappt weiß ich nicht). Wenn ihr in meinem code für die ajax.js reinschaut, seht ihr, das wie im tutorial auch eine "req.onreadystatechange = function(){}" sowie eine "req.open('post', 'ajax.php');" vorhanden sind.
Diese werden aus einem mir unbekanten grund nicht ausgeführt.

This post has been edited 1 times, last edit by "TheMansn" (May 12th 2011, 9:48am)


11

Thursday, May 12th 2011, 2:27pm

Hey ;D.

1.: Du kannst die Sachen entweder als normalen Quellcode darstellen, oder mit der konkreten Sprache:

JavaScript Code

1
function javascript() {alert("hallo");}


Dafür siehe unter dem Editor die "Syntax"-Leiste. Ist dann einfacher zu lesen, muss ich in meinem Programm auch dringend einbauen O_o.
/EDIT: BTW so, wie du es im Startpost gemacht hast :D.

3. Ergänzung: Das "javascript:funktionsname" hat man bei alten Browsern benötigt, die kein JS unterstützen, damit diese es ignorieren und keine Fehlermeldungen anzeigen.

4. Hast du mal auf Fehlermeldungen überprüft? Z.B. im FF im Addon "Firebug" in der Konsole. Was gibt in Zeile 17 "alert(req);" aus?
Ansonsten würde ich dir generell empfehlen, später jQuery zu benutzen. Dort gibt es eine schöne AJAX-Funktion , die die ganzen Sachen vereinfacht und automatisch macht ;).

12

Thursday, May 12th 2011, 2:49pm

Hey ;D.

1.: Du kannst die Sachen entweder als normalen Quellcode darstellen, oder mit der konkreten Sprache:

JavaScript Code

1
function javascript() {alert("hallo");}


Dafür siehe unter dem Editor die "Syntax"-Leiste. Ist dann einfacher zu lesen, muss ich in meinem Programm auch dringend einbauen O_o.
/EDIT: BTW so, wie du es im Startpost gemacht hast :D.

3. Ergänzung: Das "javascript:funktionsname" hat man bei alten Browsern benötigt, die kein JS unterstützen, damit diese es ignorieren und keine Fehlermeldungen anzeigen.

4. Hast du mal auf Fehlermeldungen überprüft? Z.B. im FF im Addon "Firebug" in der Konsole. Was gibt in Zeile 17 "alert(req);" aus?
Ansonsten würde ich dir generell empfehlen, später jQuery zu benutzen. Dort gibt es eine schöne AJAX-Funktion , die die ganzen Sachen vereinfacht und automatisch macht ;).


1.: achso meinst du das :D

3.: ich weiß nich warum, aber wenn ich das "javascript:" rausnehme, dann wird die Funktion garnich aufgerufen O_o

4.: alert(req); gibt "[object XMLHttpRequest]" aus, keine ahnung ob das so richtig ist.... und beim überwachunspunkt steht da "ReferenceError: req is not defined"

EDIT: boar lol bin ich doof... mir is grad aufgefallen, ich in der ajax.php einen semikolon vergessen habe... da wird der php code logischer weise nicht ausgeführt. jetz wird zwar die "sendSelBoxRequest" und die "req.onreadystatechange = function()" aufgerufen aber wirklich hinhauen tut sie noch nicht

This post has been edited 1 times, last edit by "TheMansn" (May 12th 2011, 2:58pm)


13

Thursday, May 12th 2011, 2:54pm

Sehr gut, damit sind wir ja schonmal ein Stück weiter ;D.
Ich hoffe, du verwendest beim Testen mindestens FF 3.6? Nur so nebenbei.

[object XMLHttpRequest] ist richtig: "object" bedeutet, dass wir ein Objekt, also eine Instanz einer Klasse erstellt haben- und das hast du ja in Zeile 12/13 gemacht. Stichwort: "new"
"XMLHttpRequest" ist der Name der Klasse, von der du ein Objekt erzeigt hast. Das ist auch soweit korrekt, da du in Zeile 12 ja "new XMLHttpRequest()" ausführst.

Wo ist dein Breakpoint?

14

Thursday, May 12th 2011, 3:14pm

ich hab mir letzten firefox 4 installiert.

ich hab in der ajax.js breakpoints in zeile 17, 56 und 57 gesetzt

15

Thursday, May 12th 2011, 3:18pm

Und in welcher von denen kommt die Fehlermeldung?

16

Thursday, May 12th 2011, 3:22pm

nachdem mir der fehlende semikolon aufgefallen ist und ich das geändert habe, kommt wird die variable req gefüllt und es kommt keine fehlermeldung mehr.
das programm lädt aber immernoch nicht die nächste selectbox nach. Kann das vllt daran liegen, das bei req etwas falsches gespeichert ist oder das im target etwas stehen könnte?

17

Thursday, May 12th 2011, 4:18pm

Gut möglich, deswegen gib dir den HTML-Context erstmal per alert() aus, bevor du ihn veröffentlichst.
Möglicherweise liegts auch daran, dass du erst den onreadystatechange-Handler festlegst, bevor du die Request startest. Einfach mal ausprobieren ;). Hab lange keine normalen AJAX-Anfragen mehr gemacht.

18

Thursday, May 12th 2011, 4:51pm

also den html code über alert ausgeben bekomm ich irgendwie nich hin -.-" und den req.readystatechange weiter nach unten packen haut auch nich hin....

19

Thursday, May 12th 2011, 6:56pm

Dann gib mal in Zeile 19 ein

JavaScript Code

1
alert("Fertig!");

rein. Wird das alert nicht ausgegeben, so weisst du schonmal, dass in der Verbindung iwo ein Fehler drin liegt- readyState wird nie 4, oder status wird nie 200. Status = 404 weist übrigens darauf hin, dass die gesuchte Datei nicht gefunden werden kann.
Andernfalls fügst du dahinter noch ein

JavaScript Code

1
alert(req.responseText);
ein. Damit bekommst du zumindest eine verkürzte Form des HTML-Codes angezeigt ;).

Nebnbei: Pack sonst mal das eval() (Zeile 20, ca) weg. Eval is evil, deswegen könnte es dort mglw Probleme geben.

20

Friday, May 13th 2011, 9:25am

hmmm also wies aussieht wird "if ((req.readyState == 4) && (req.status == 200))" nie erfüllt. ich finds aber seltsam weil bis auf die anpassung der variablennamen hab ich die ajax.js 1-zu-1 aus dem tutorial "Select-Auswahl mit AJAX Abhängigkeit" aus dem easy-coding wiki.

EDIT: ich hab noch ma mit firebug drüber geschaut. readyState wird 4 und geht dann wieder auf 1 aber der status wird 404 also "nicht gefunden" oder wie?
im tutorial wird ja von einer bestimten anzahl an kategorie und unterkategorien ausgegangen. bei mir ist es aber so, dass
die anzahl an kategorien und untekategorien unteschiedlich ist. ich müsste das also dynamisch machen oder?
wie bekomm ich das hin bzw. wie müsste ich den code in der ajax.js ändern??

hier der verlauf der beiden variablen:
req.readystate req.status
1 -
2 -
1 404
1 -
3 -
1 404
1 -
4 -
1 404
1 404

der - bedeutet, das bei dem jeweiligen durchlauf für diese variable garnichts geliefert wurde.
ich werd ma noch n bißchen rumprobieren

This post has been edited 5 times, last edit by "TheMansn" (May 13th 2011, 3:13pm)


Social bookmarks