jQuery Auswahlliste dynamisch füllen

[Jnnbo]

Guten Morgen,

kennt ihr ein gutes und vielleicht leicht verständliches jQuery Plugin mit dem ich eine Auswahlliste dynamisch abhängig vom gewählten Eintrag der darüberliegenden Auswahlliste befüllen kann?

Meine JS Kenntnisse sind gleich Null :/

[Jnnbo]

Guten Morgen,

hab hier etwas gefunden, mal schauen ob ich dieses bei mir eingesetzt bekomme: https://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes

[BaBa]

eine Auswahlliste dynamisch abhängig vom gewählten Eintrag der darüberliegenden Auswahlliste befüllen

Ich denke, Du musst zunächst festlegen, ob die Auswahloptionen per AJAX nachgeladen werden sollen, oder schon im DOM vorhanden sein sollen und nur ein-/ausgeblendet werden sollen. Das erste macht Sinn, wenn es sich um viele Ebenen und/oder viele Optionen handelt. Wenn es nur zwei Ebenen sind mit wenigen Optionen ist die zweite Variante effizienter und läßt sich mit wenigen Zeilen coden.

Meine JS Kenntnisse sind gleich Null :/

Wie steht's mit jQuerykenntnissen?

Cheers,

BaBa

[Jnnbo]

Hallo BaBa,

Ich denke, Du musst zunächst festlegen, ob die Auswahloptionen per AJAX nachgeladen werden sollen, oder schon im DOM vorhanden sein sollen und nur ein-/ausgeblendet werden sollen.

Es handelt sich um ca. 40.000 Einträge, ich denken da ist das nachladen per AJAX besser, als alle Daten bereits ins HTML zu schreiben?

Meine JS Kenntnisse sind gleich Null :/ Wie steht's mit jQuerykenntnissen?

auch nicht wirklich viel besser, ich schau mir viel bei Google und in Videos an irgendwie bekomme ich alles hin, schön wäre es, wenn es eben schon ein fertige Plugin geben würde.

[BaBa]

Es handelt sich um ca. 40.000 Einträge, ich denken da ist das nachladen per AJAX besser, als alle Daten bereits ins HTML zu schreiben?

100%.

Wie steht's mit jQuerykenntnissen? auch nicht wirklich viel besser, ich schau mir viel bei Google und in Videos an irgendwie bekomme ich alles hin, schön wäre es, wenn es eben schon ein fertige Plugin geben würde.

Insgesamt sind das nicht viele Zeilen Code (js-seitig). Worauf ich bei einem Plugin achten würde ist das die Daten (options) möglichst effizient ausgefliefert werden, was für mich JSON bedeutet. In Deinem Beispiel wird das wohl gemacht, allerdings etwas unschön zusammengebaut:

echo '[' . implode(',', $json) . ']';

Dafür gibts eigentlich json_encode().

Cheers,

BaBa

[Jnnbo]

Hallo BaBa,

Insgesamt sind das nicht viele Zeilen Code (js-seitig). Worauf ich bei einem Plugin achten würde ist das die Daten (options) möglichst effizient ausgefliefert werden, was für mich JSON bedeutet. In Deinem Beispiel wird das wohl gemacht, allerdings etwas unschön zusammengebaut:

bin ich denn damit auf dem richtigen Weg?

<script>
    $(document).ready(function(){
		
		$('#test_auswahl').change(function(){
			$.post(
				'inc/test.php',
				{},
			function(res){
				$('#test_ausgabe').html(res);
			});
		});
	});
</script>

[BaBa]

bin ich denn damit auf dem richtigen Weg?

Soweit ist es ja nur ein jquery-post-ajax request, aber: ja, klar. Gib ihm noch das vierte Argument "json", dann erwartet die Funktion direkt json-formatierte Daten. Schau dir das mal in der Console an.

Happy coding.

Cheers,

BaBa

[Jnnbo]

Hallo BaBa,

Soweit ist es ja nur ein jquery-post-ajax request, aber: ja, klar. Gib ihm noch das vierte Argument "json", dann erwartet die Funktion direkt json-formatierte Daten. Schau dir das mal in der Console an.

meine Auswahlliste sieht so aus

  <select name="test_auswahl" id="test_auswahl">
    <option value="V1">v1</option>
    <option value="V2">v2</option>
    <option value="V3">v3</option>
  </select> 

Jetzt muss ich meinem JS Code

<script>
    $(document).ready(function(){
		
		$('#test_auswahl').change(function(){
			$.post(
				'inc/test.php',
				{},
			function(res){
				$('#test_ausgabe').html(res);
			});
		});
	});
</script>

irgendwie das value mitgeben? Muss ich hier mit GET oder POST arbeiten und was meinst du mit

Gib ihm noch das vierte Argument "json" ?

[BaBa]

$.post(
  'inc/test.php',
  {},
  function(res){
    $('#test_ausgabe').html(res);
  });
});

Das ist die post-Funktion. Schau Dir doch mal die Doku an. Siehts Du die drei Argumente, die Du Ihr mitgibst?

value mitgeben?

_2. Argument data, z.B. var data = $("form").serialize();

[[Scheiss Markdown Algorithmus: Ich schreibe Hier 2. Argument und die Vorschau macht daraus 1. Argument. Ich habe jetzt _2. geschrieben]]

Gib ihm noch das vierte Argument "json" ?

Siehe 4. Argument dataType, hier "json"

Muss ich hier mit GET oder POST arbeiten

Mit POST. Du musst Dir noch überlegen, welche Parameter Du an das .php-Script übergeben musst. E.g. wieviele Ebenen hast Du? Wie gibts Du diese Information weiter, etc.

Cheers,

BaBa

[Jnnbo]

Hallo BaBa,

ok, ich bin ein Schritt weiter, hab es nun so umgesetzt:

    $(document).ready(function(){
		
		$('#test_auswahl').change(function(){
			$.post(
				'inc/test.php',
				{id:$('#test_auswahl').val()},
			function(res){
				$('#test_ausgabe').html(res);
			});
		});
	});

Die test.php hat folgenden Inhalt:

<?php 
if (isset($_POST['id']) && $_POST['id'] != ""){
	echo $h_id = $_POST['id'];
}
?>

Die Ausgabe im DIV <div id="test_ausgabe"></div> hat dann folgenden Wert z.B. 1 für den ersten Eintrag.

Kann ich denn jetzt in der test.php keine zweite Datenbankabfrage erstellen und das Dropdown dementsprechend füllen? Denn json habe ich noch immer nicht verstanden. Muss hier wohl mal bisschen Google wenn mein Weg nicht richtig ist.

[BaBa]

Ich finde es gut, wie Du Dich voranarbeitest.

Kann ich denn jetzt in der test.php keine zweite Datenbankabfrage erstellen

Die Datenbankabfrage ist das nächste. Doch dafür brauchst Du wohl noch ein paar Zusatzinformationen, um diese korrekt vorzubereiten. Sende Sie auch über den POST request, um für spätere Fälle (mehrere Ebenen, etc) gewappnet zu sein.

und das Dropdown dementsprechend füllen?

Das Dropdownfüllen geschieht aber wieder JS-seitig!

Denn json habe ich noch immer nicht verstanden.

Json ist das Bindeglied. JSON ist nichts weiter als ein Austauschformat für strukturierte Daten, wie XML. Es kommt mit wenig zusätzlichen Zeichen aus, daher ist es für AJAX-Requests gut geeignet. Im Wesentlichen tauscht Du zwischen php und der JS-Funktion immer einen String aus. Die Frage ist nur, in welchem Format. Du kannst in php das fertige html konstruieren und zurücksenden. Das ist aber nicht die beste Praxis, weil das html mehr Speicherplatz verbraucht als JSON.

Cheers,

BaBa

[Jnnbo]

Hallo BaBa,

und das Dropdown dementsprechend füllen? Das Dropdownfüllen geschieht aber wieder JS-seitig!

Warum das denn? Kann ich dieses nicht mit PHP zusammenbauen lassen?

Json ist das Bindeglied. JSON ist nichts weiter als ein Austauschformat für strukturierte Daten, wie XML. Es kommt mit wenig zusätzlichen Zeichen aus, daher ist es für AJAX-Requests gut geeignet. Im Wesentlichen tauscht Du zwischen php und der JS-Funktion immer einen String aus. Die Frage ist nur, in welchem Format. Du kannst in php das fertige html konstruieren und zurücksenden. Das ist aber nicht die beste Praxis, weil das html mehr Speicherplatz verbraucht als JSON.

Ich dachte ich wäre so auf dem richtigen Weg, aber jetzt passiert gar nichts mehr. Bei meiner Version hatte ich immerhin noch etwas gesehen. Benötige ich denn wirklich das JSON?

    $(document).ready(function(){
		
		$('#test_auswahl').change(function(){
			$.ajax({
				url: "inc/test.php",
				type: "post",
				dataType:"json",
				data: "$('#test_auswahl').serialize()",
			})
		})

    });

[BaBa]

Warum das denn?

Ja, lies eben mein Posting.

Ich dachte ich wäre so auf dem richtigen Weg, aber jetzt passiert gar nichts mehr.

Gar nichts mehr? :)

Benötige ich denn wirklich das JSON?

Ich schreibe Dir ja nur, wie man es am besten macht. Ich kann es Dir natürlich nicht vorschreiben. Ich schrieb ja, was die Vorteile sind.

Cheers,

BaBa

[Jnnbo]

Hallo BaBa,

ist jetzt auch egal, ich werde meine Einträge in der Datenbank ändern, dann lass ich einfach alle ausgeben und such den passenden Eintrag in der Auswahlliste. Ich hab ehrlich gesagt kein Nerv jetzt auch noch jQuery usw. zu lernen. Hatte gehofft, dass es etwas fertige gibt.

[Jnnbo]

Hallo BaBa,

ich wollte doch nicht nicht aufgeben. Hab es nun so umgesetzt. Mein jQuery Code sieht so aus:

    $(document).ready(function(){
		
		$('#test').change(function(){
			$.post(
				'inc/test.php',
				{id:$('#test').val()},
			function(res){
				$('#test_ausgabe').html(res);
			});
		});
    });

Meine erste Auswahlliste sieht so aus:

<select name="test" id="test">
    <option>-- Bitte wählen --</option>
    <?php 
    $projekte = projekte($mysqli);
    foreach($projekte as $array){ ?>
    <option value="<?php echo $array['id'];?"><?php echo $array['titel'];?></option>
    <?php } ?>
 </select>

Das DIV in welches meine zweite Auswahlliste geladen werden soll:

<div id="test_ausgabe"></div>

Meine Test Datei sieht so aus:

if (isset($_POST['id']) && $_POST['id'] != ""){
$neu = $_POST['id'];
?>
<label for="test">Zweite Auswahl</label>
<select name="test" id="test">
<?php 
$test123 = test123($mysqli, $neu);
foreach($test123 as $array){ ?>
<option value="<?php echo $array['id'];?>"><?php echo $array['titel'];?></option>
<?php } ?>
</select>
<?php } ?>

Wenn ich es nun teste, werde alle Einträge richtig ausgegeben. Das heißt also eine Auswahlliste muss nicht zwingend mit JS zusammen gebaut werden. Und den Vorteil von JSON habe ich noch immer nicht kapiert, scheint aber hier auch erstmal nicht wichtig zu sein.

Was mich wundert, ich sehe diese Daten nicht in meinem Quelltext, das DIV ist leer, obwohl ich alle Daten sehe :o

[BaBa]

Hallo,

ich wollte doch nicht nicht aufgeben.

Das ist gut und wird Dir für folgende Projekte sehr helfen.

Das heißt also eine Auswahlliste muss nicht zwingend mit JS zusammen gebaut werden. Und den Vorteil von JSON habe ich noch immer nicht kapiert

Zwingend nicht. Ich habe Dir nur die Vorteile aufgezeigt (z.B. Datenvolumen).

Was mich wundert, ich sehe diese Daten nicht in meinem Quelltext

Im Quelltext (z.B. STRG+U im FF) siehst Du nur den Quelltext unmittelbar vom ersten Request ausgegeben. Alle nachgeladenen Inhalte (und das was Du als Entwickler meistens sehen möchtest) findest Du im Entwicklertool Deiner Wahl (z.B Rechtsklick -> Element untersuchen, oder wie es bei Dir heißt).

Happy Coding...

Cheers,
BaBa

[Jnnbo]

Hallo BaBa,

heute habe ich mein Script etwas erweitert und eigentlich funktioniert es auch nur mich stören persönlich zwei kleine Sachen, vielleicht bekomme ich diese ohne großen Aufwand behoben.

1.) Wenn ich einen Hersteller verändere, dann wird das darunterliegende Feld sofort aktualisiert, die dritte Auswahlliste leider nicht, da bleiben die letzten Einträge vorhanden. Wenn ich also nicht aufpasse, habe ich in diesem verfälschte Daten drin stehen. Ist daher folgendes möglich: Wenn ich das erste Auswahlmenü ändere, dass die darunterliegende Menüs erstmal leer sind bzw. das dritte sollte auf alle Fälle leer sein bis ich im zweiten etwas gewählt habe.

2.) Mein Scripte habe ich im Fuß der Seite stehen. Das erste Script ist dafür da, um wenn ich einen Hersteller gewählt habe die dazugehörigen Einträge geladen werden, klappt auch wunderbar. Nur wenn ich jetzt das zweite Script das für die dritte Ausswahlliste zuständig ist ebenfalls in den Fuß packe, wird es schlicht weg nicht berücksichtig. Ich muss es in die Daten (auslesen-serie.php) packen, warum?

So wollte ich es, klappt aber leider nicht:

    $(document).ready(function(){
		
		$('#hersteller').change(function(){
			$.post(
				'inc/auslesen-serie.php',
				{h_id:$('#hersteller').val()},
			function(res){
				$('#container_serien').html(res);
			});
		});
		
				$('#serien').change(function(){
			$.post(
				'inc/auslesen-geraete.php',
				{s_id:$('#serien').val()},
			function(res){
				$('#container_geraete').html(res);
			});
		});


    });

So muss ich es umsetzten, dass es klappt:

fuss.php

    $(document).ready(function(){
		
		$('#hersteller').change(function(){
			$.post(
				'inc/auslesen-serie.php',
				{h_id:$('#hersteller').val()},
			function(res){
				$('#container_serien').html(res);
			});
		});

    });

auslesen-serie.php

		$('#serien').change(function(){
			$.post(
				'inc/auslesen-geraete.php',
				{s_id:$('#serien').val()},
			function(res){
				$('#container_geraete').html(res);
			});
		});

[BaBa]

1.) (...) Ist daher folgendes möglich: Wenn ich das erste Auswahlmenü ändere, dass die darunterliegende Menüs erstmal leer sind bzw. das dritte sollte auf alle Fälle leer sein bis ich im zweiten etwas gewählt habe.

Das wäre die best practice: Im Event listener change() initial erstmal alles zurücksetzen und dem User durch entsprechende "lädt..."-Texte klarmachen, dass etwas geschieht. Dann im Callback (success() der post-Funktion) Deine Listen wieder befüllen, bzw. im Callback der ersten Liste die change-Funktion der zweiten auslösen. Dazu empfiehlt es sich mal wieder die Funktion, die bei change() ausgeführt werden soll nicht direkt im change() zu notieren.

2.) Mein Scripte habe ich im Fuß der Seite stehen.

Wo du die Scripte stehen hast ist nicht relevant.

Ich muss es in die Daten (auslesen-serie.php) packen, warum?

Ich vermute stark, dass Du die Listener nicht sorgfältig gesetzt hast. Das ist in gefühlten 99% der Fälle die Ursache. Du möchtest die Listener (.change()) immer nach der Einbindung des jeweiligen Elements in's DOM erstellen. Das bedeutet im Normalfall innerhalb document ready. Soweit so gut und funktioniert ja auch im Falle der ersten Liste. Wenn Du aber Elemente dynamisch per AJAX ins DOM (nach-)lädst kann logischerweise der Listener auch nichts machen, da er zum Zeitpunkt seines Aufrufs keine Listen gesehen hat. Du möchtest also

• entweder die Listen von Anfang bis Ende im DOM haben und nur die Elemente (option) austauschen
• oder den Listener ebenfalls im Callback des AJAX request erneuern.

Es ist wichtig, dies zu verstehen. Wenn Du noch dazu fragen hast, melde Dich nochmal.

Cheers,
BaBa

[Jnnbo]

Hallo BaBa,

danke für deine Geduld und deine ausführlichen Erklärungen.

Das wäre die best practice: Im Event listener change() initial erstmal alles zurücksetzen und dem User durch entsprechende "lädt..."-Texte klarmachen, dass etwas geschieht. Dann im Callback (success() der post-Funktion) Deine Listen wieder befüllen, bzw. im Callback der ersten Liste die change-Funktion der zweiten auslösen. Dazu empfiehlt es sich mal wieder die Funktion, die bei change() ausgeführt werden soll nicht direkt im change() zu notieren.

Hört sich sehr kompliziert an :/ Gibt es dafür irgendein Beispiel? Oder nach was soll ich bei Google suchen? So eine Animation oder Hinweis muss nicht wirklich sein, wäre zwar schön, aber ich denke das wird alles noch komplizierter. Mir würde schon reichen, wenn das dritte Dropdown einfach geleert wird. Das zweite passt sich ja sofort dem ersten an, daher geht es wirklich nur um das dritte.

• entweder die Listen von Anfang bis Ende im DOM haben und nur die Elemente (option) austauschen

Ok, ich habe es nun so abgeändert, mein JS Datei sieht so aus:

    $(document).ready(function(){
		
		$('#hersteller').change(function(){
			$.post(
				'inc/auslesen-serie.php',
				{h_id:$('#hersteller').val()},
			function(res){
				$('#serien').html(res);
			});
		});
		
		$('#serien').change(function(){
			$.post(
				'inc/auslesen-geraete.php',
				{s_id:$('#serien').val()},
			function(res){
				$('#container_geraete').html(res);
			});
		});

    });

Und meine auslesen-serie.php so:

if (isset($_POST['h_id']) && $_POST['h_id'] != ""){
$neu = $_POST['h_id'];
?>
<option>-- Bitte wählen --</option>
<?php 
$serien = serien($mysqli, $neu);
foreach($serien as $array){ ?>
<option value="<?php echo $array['s_id'];?>"><?php echo $array['s_titel'];?></option>
<?php } ?>
<?php } ?>

Und in meiner Hauptdatei steht dieses:

<label for="serie">Serie</label>
<select name="serien" id="serien">
</select>

Klappt soweit auch. So meintest du das doch?

[Jnnbo]

Hallo BaBa,

ich hab hier eine Variante die klappt fast:

		$('#hersteller').change(function(){
			$.post(
				'inc/auslesen-serie.php',
				{h_id:$('#hersteller').val()},
			function(res){
				$('#serien').html(res);
				$('#geraete').remove()
			});
		});

jetzt wird die dritte Auswahlliste entfernt, ist ja ein Anfang, aber ich würde gerne nur die Inhalte löschen und nicht gleich das ganze Feld :) Ist das möglich?

[MudGuard]

Hi,

  		$('#geraete').remove()

Wenn Du nicht das Element, sondern dessen Kinder entfernen willst, dann mußt Du das halt auch sagen:
$('#geraete > *')

cu,
Andreas a/k/a MudGuard

[Jnnbo]

Hallo,

ich habe es nun so umgesetzt, scheint auch zu funktionieren, aber ist dieses die beste Option?

		$('#hersteller').change(function(){
			$.post(
				'inc/auslesen-serie.php',
				{h_id:$('#hersteller').val()},
			function(res){
				$('#serien').html(res);
			});
			
			$('#geraete')
				.find('option')
				.remove()
				.end()
				.append('<option value="0">Bitte wählen</option>')
				.val('0');
		});
		
		$('#serien').change(function(){
			$.post(
				'inc/auslesen-geraete.php',
				{s_id:$('#serien').val()},
			function(res){
				$('#container_geraete').html(res);
			});
		});

[BaBa]

Sieht doch gut aus.

Ich würde, wie gesagt, die Funktionen auslagern und im Jquery-Teil als Referenz übergeben, aber ansonsten gut.

Noch einmal betont: es ist wirklich wichtig zu wissen, was der Callback ist. In Deinem Fall die Funktion bei function(res){...}, bei Dir das dritte Argumentder Funktion $.post. Manchmal in jQuery auch als success: function angegeben. Der Callback ist immer die Funktion, die "zurück"-gerufen wird, wenn irgendein Prozess fertig ist. Oft wird dabei auch noch unterschieden, wie denn der Prozess verlaufen ist (fehlerlos, fehlerhaft, in jedem Fall, etc.), siehe success(), error() und done() des normalen AJAX requests.

Cheers,
BaBa

[Jnnbo]

Hallo BaBa,

ich habe in den letzten Tagen bisschen Videos auf Youtube geschaut und hab nun folgendes dabei erstellt:

$.fn.searchHersteller = function(){
	$this = $(this);
	
	$.ajax({
		type: "POST",
		url: '/inc/get.hersteller.php',
		data: $(this).serializeArray(),
		dataType: "json",
		beforeSend: function(){$('#show_response_hersteller').html('<img src=img/icons/loading.gif alt=loader />'); },
		success: function(json){
			if(json.result){
				$('#show_response_hersteller').html(json.build);
			}else{
				alert('Es ist ein Fehler aufgetreten!');
				return false;
			}
		}
	});
}

Leider ist der letzte Teil, der für mich am wichtigsten ist nicht mehr weiter gemacht, daher weiß ich leider nicht was in der Datei get.hersteller.php passiert? Ich tippe auf eine Datenbankabfrage? Aber wie kommen die Daten "dataType: "json"" in der Datei an? Nicht als normales GET oder POST, wie ich es kenne?

Meine Ckeckbox sieht so aus:

<form name="searchHersteller" method="post" action="javascript:;" onsubmit="$(this).searchHersteller()">
<input onchange="$('form[name=searchHersteller]').submit()" name="searchFormHersteller[]" type="checkbox" value="Dell" />

[BaBa]

Hallo, erstmal möchte ich Dir sagen, dass ich es beeindruckend finde, wie Du an dem Thema dranbleibst.

Leider ist der letzte Teil, der für mich am wichtigsten ist nicht mehr weiter gemacht, daher weiß ich leider nicht was in der Datei get.hersteller.php passiert?

Was meinst Du damit? Ich war der Annahme, dass Du alles kontrollieren kannst. Im Endeffekt sollte get.hersteller.php einen String erzeugen, der Daten repräsentiert. Aufbereitet als JSON. Wie ein multidimensionales Array.

Aber wie kommen die Daten "dataType: "json"" in der Datei an? Nicht als normales GET oder POST, wie ich es kenne?

Unterscheidung: "data" von Jquery's $.ajax() bezeichnet die Methode, wie Daten an get.hersteller.php gesendet werden. "dataType" was als Rückgabe erwartet wird! Wenn du mit der "Datei" die get.hersteller.php meinst ist der Satz inkosistent (wie kommen die Daten "dataType: "json"" in der Datei an). Richtig ist, die Daten werden serialisiert per POST an die get.hersteller.php gesendet. Darauf hat dataType keinen Einfluss, sondern type und data. Oder meinst Du mit "der Datei" die aufrufende Seite". Nun, sie kommen dort als String an, der als JSON interpretiert wird. Genaugenommen in der Funktion "success". Ich kenne die Funktion json.build nicht, aber ich vermute es ist etwas wenig, um aus den JSON Daten deine options zu bauen.

Sehr schön benutzt Du jetzt auch die Methoden beforeSend und success.

Meine Ckeckbox sieht so aus:

Checkbox? Ich war mental noch bei Auswahllisten (<select>).

<form name="searchHersteller" method="post" action="javascript:;" onsubmit="$(this).searchHersteller()">
<input onchange="$('form[name=searchHersteller]').submit()" name="searchFormHersteller[]" type="checkbox" value="Dell" />

Ich persönlich bevorzuge Listener (korrekt) zu setzen, anstatt den Elementen onchange Attribute mitzugeben (Trennung von html und JS). Lass das action attribute weg, wenn Du die Form rein in JS evaluieren möchtest. Jquery bietet ein preventDefault() an, damit Deine Seite nicht neugeladen wird, bei e.g. Drücken der Entertaste. Nutze es.

Was war mit meinem letzten Einwand

Ich würde, wie gesagt, die Funktionen auslagern und im Jquery-Teil als Referenz übergeben, aber ansonsten gut.

Hast Du es bewußt zugunsten einer besseren Idee weggelassen oder nicht genau verstanden, was ich damit meine? Nur so gefragt.

Cheers,
BaBa

[Gunnar Bittersmann]

@@BaBa

Lass das action attribute weg, wenn Du die Form rein in JS evaluieren möchtest.

Möchte man das?

Progressive enhancement ist, die serverseitige Verarbeitung des Formulars sicherzustellen und nur bei Verfügbarkeit von JavaScript das Formular clientseitig zu verarbeiten.

Jquery bietet ein preventDefault() an

Eben. Vanilla JavaScript übrigens auch.

LLAP

[dedlfix]

Tach!

Leider ist der letzte Teil, der für mich am wichtigsten ist nicht mehr weiter gemacht, daher weiß ich leider nicht was in der Datei get.hersteller.php passiert? Ich tippe auf eine Datenbankabfrage?

  success: function(json){
  	if(json.result){
  		$('#show_response_hersteller').html(json.build);

Das Ergebnis soll offensichtlich ein Json-Objekt sein, mit den Beiden Eigenschaften result und build. In result steht irgendwas boolesches. in build etwas, das man der jQuery-Methode html() übergeben kann, also ein Stück HTML-Code.

Aber wie kommen die Daten "dataType: "json"" in der Datei an? Nicht als normales GET oder POST, wie ich es kenne?

Schau es dir doch an. Gib aus, was in $_GET und $_POST steht. Das wird zwar an den Ajax-Aufruf zurückgesendet, aber du kannst dir ja im Browser einen Breakpoint in die success-Methode setzen (und noch einen in den noch nicht vorhandenen Error-Handler) und dann untersuchen, was dir da im Parameter json übergeben wird.

dedlfix.

[dedlfix]

Tach!

  		$('#geraete').remove()

Wenn Du nicht das Element, sondern dessen Kinder entfernen willst, dann mußt Du das halt auch sagen:
$('#geraete > *')

Alle Kinder kann man auch mit .empty() entsorgen.

dedlfix.

[Matthias Apsel]

Hallo BaBa,

_2. Argument data, z.B. var data = $("form").serialize();

[[Scheiss Markdown Algorithmus: Ich schreibe Hier 2. Argument und die Vorschau macht daraus 1. Argument. Ich habe jetzt _2. geschrieben]]

In solchen Fällen muss der Punkt maskiert werden oder statt einer Leerzeile ein Zeilenumbruch gemacht werden.

2. Argument data, z.B. var data = $("form").serialize();

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

In solchen Fällen muss der Punkt maskiert werden oder statt einer Leerzeile ein Zeilenumbruch gemacht werden.

Ich würde sagen: Es muss die Entscheidung für Kramdown infrage gestellt werden.

LLAP