Dropdown Felder die aufeinander aufbauen - chained selects

Alles, was in den anderen Foren keinen Platz findet
DieKleine
Member
Beiträge: 55
Registriert: Mo 7. Nov 2016, 18:29

Dropdown Felder die aufeinander aufbauen - chained selects

Beitragvon DieKleine » Di 20. Dez 2016, 10:42

Hallo an alle,

ich möchte ein Kontaktformular erstellen, bei dem es zwei Dropdown Felder gibt und das zweite Feld auf den Daten des ersten beruhen.
Genauer:
Ich habe ein Objekt mit offenen Stellen, diesen Stellen sind Standorte zugewiesen.
Jetzt möchte ich, dass, wenn ich eine Stelle im ersten Dropdown auswähle, im zweiten nur die Standorte erscheinen, die dieser Stelle zugewiesen sind.
Das einlesen und ausgeben der Stellen und auch der kompletten Standort Objetke funktioniert sehr gut, leider will ich, dass die Standorte ja auf den Stellen aufbauen.

Nach ein paar Recherchen bin ich auf chained selects und dependent selects gestoßen. Leider sind mir beide etwas zu hoch und ich verstehe es nicht.

Jetzt meine Hauptfrage: Lässt sich mein Vorhaben einfacher durch irgendwelche we:tags durchführen?
Wenn ja, wie? Und wenn nein, hat dan jemand noch einen Tipp für mich?

Vielen Dank schon mal.

LG
DieKleine

WBTMagnum
webEdition Partner
webEdition Partner
Beiträge: 1825
Registriert: Di 7. Mär 2006, 16:50
Wohnort: Wien
Kontaktdaten:

Re: Dropdown Felder die aufeinander aufbauen - chained selects

Beitragvon WBTMagnum » Di 20. Dez 2016, 16:38

Hey,

Du kannst das schon mit we-Tags lösen, dann wird's allerdings nicht ganz so dynamisch. Einfach das zweite Select nur dann anzeigen, wenn beim ersten etwas ausgewählt ist (das Formular muss halt dazwischen abgeschickt werden). Je nachdem was im ersten Select ausgewählt ist, wird das zweite Select befüllt. Das erste Select sollte dann vermutlich "fixiert" sein, sonst kann es leicht zu unmöglichen Kombinationen kommen.

Die schönere Lösung ist hier natürlich das zweite Select dynamisch zu befüllen. Das kannst du entweder über AJAX-Requests lösen oder du hinterlegst schon alle möglichen Select und blendest diese dynamisch per JavaScript ein. Letzteres würde ich allerdings nur dann machen, wenn die Anzahl der einzubindenden Selects überschaubar ist.


HTH,
Sascha

DieKleine
Member
Beiträge: 55
Registriert: Mo 7. Nov 2016, 18:29

Re: Dropdown Felder die aufeinander aufbauen - chained selects

Beitragvon DieKleine » Do 5. Jan 2017, 14:07

Danke schon mal ^_^

Ich habe mich jetzt dazu entschlossen, das ganze per AJAX-Requests zu lösen, stehe jetzt aber vor einem weiteren Problem.

Ich lese das Mustiopjekt Standorte in Jobs in einer anderen Datei aus und vergleiche dann die Standort id mit den Standort IDs der Standortklasse.
Dann soll die Variable in der die Standorte stehen per GET übergeben werden. Allerdings harkt es genau da.
Ich habe ein paar Test Variablen geschrieben um zu sehen, wo genau es nicht passt, allerdings wird mir gar nichts übergeben und ich weiß nicht genau, wie ich ab jetzt weiter komme.

Hat jemand für mich vielleicht ein passendes Beispiel des Codes?

LG

Die Kleine

WBTMagnum
webEdition Partner
webEdition Partner
Beiträge: 1825
Registriert: Di 7. Mär 2006, 16:50
Wohnort: Wien
Kontaktdaten:

Re: Dropdown Felder die aufeinander aufbauen - chained selects

Beitragvon WBTMagnum » Do 5. Jan 2017, 16:11

Es ist vermutlich einfacher du postest deinen Code, das aktuelle Ergebnis sowie das gewünschte Ergebnis hier. Dann ist es einfacher eine Rückmeldung zu geben.

Cheers,
Sascha

DieKleine
Member
Beiträge: 55
Registriert: Mo 7. Nov 2016, 18:29

Re: Dropdown Felder die aufeinander aufbauen - chained selects

Beitragvon DieKleine » Do 5. Jan 2017, 17:33

Also erst noch mal zum besseren verständnis:
Ich kenne mich mit javascript und ajax überhaupt nicht aus. Ich habe den bisherigen Code soweit wie möglich von meinem Vorgänger übernommen.

Also, hier der Aufruf der Funktion:

Code: Alles auswählen

		$(function(){
			$('#selectjob').on('change', function()
		{
				var inputval = $('#selectjob').find(':selected').val();
				if(inputval.length !== 0){
					$.ajax({
						type: 'GET',
						url: '/***/test/bewerbungsform_json.php',
						data: { id: inputval },
						success: function(result){
						var obj = jQuery.parseJSON(result);

							$('#selectfiliale').html(obj.filiale_standort);
						},					 
					})
				}
			})
		})
Dann hier das select das die Funktion ausführt:

Code: Alles auswählen

<select id="selectjob" name="selectjob" >
	<option value="">Auswählen...</option>
		<we:listview type="object" classid="7" order="job">
		<we:repeat>
		<we:field name="WE_ID" to="global" nameto="jobid" />
		<we:field name="standort" to="global" nameto="job_standort" />
		<we:field name="title" to="global" nameto="job_title"/>
		<we:field name="abteilung" to="global" nameto="job_abteilung"/>
		<?php
			if(empty($job_data['jobid']))$job_data['jobid']=$jobid;
			if(empty($job_data['job_standort']))$job_data['job_standort']=$job_standort;
			if(empty($job_data['job_title']))$job_data['job_title']=$job_title;
			if(empty($job_data['job_abteilung']))$job_data['job_abteilung']=$job_abteilung;
		?>
										
		<?php
			if(!empty($GLOBALS['jobid'])){
				echo '<option value="' .$GLOBALS['jobid'].'">';
				echo $GLOBALS['job_title']; echo ' ('.$GLOBALS['job_abteilung']. ')';	
				echo '</option>';
			}
		?>
		</we:repeat>
		</we:listview>
Und der Code aus der "bewerbungsform_json.php"

Code: Alles auswählen

$selected = $_GET['id'];
	
	if(!isset($selected) && !empty($selected)){
   ?>
	<we:listview type="object" classid="7" order="job">
		<we:repeat>
			<we:field name="WE_ID" to="global" nameto="jobid" />
			<we:field name="standort" to="global" nameto="job_standort" />
			<we:field name="title" to="global" nameto="job_title"/>
			<we:field name="abteilung" to="global" nameto="job_abteilung"/>
				<?php							
					if(empty($job_data['jobid']))$job_data['jobid']=$jobid;
					if(empty($job_data['job_standort']))$job_data['job_standort']=$job_standort;
					if(empty($job_data['job_title']))$job_data['job_title']=$job_title;
					if(empty($job_data['job_abteilung']))$job_data['job_abteilung']=$job_abteilung;
				?>
			<we:listview type="multiobject" name="fili_standort">
				<we:repeat>
					<we:field name="standort" to="global" nameto="job_standort" />
					<?php		
						if(empty($job_data['standort']))$job_data['standort']=$standort;
					?>
				</we:repeat>
			</we:listview>				
		</we:repeat>
	</we:listview>

	<we:listview type="object" classid="1" order="standort">
		<we:repeat>
			<we:field name="WE_ID" to="global" nameto="standortid" />
			<we:field name="standort" to="global" nameto="fili_standort" />
			<we:field name="email1_name" to="global" nameto="fili_title"/>
				<?php							
					if(empty($standort_data['standortid']))$standort_data['standortid']=$standortid;
					if(empty($standort_data['fili_standort']))$standort_data['fili_standort']=$fili_standort;
					if(empty($standort_data['fili_title']))$standort_data['fili_title']=$fili_title;
				?>				
		</we:repeat>
	</we:listview>

	<?php	
		$stellen_id = $_GET['selectjob'];
		echo '<option value="">Auswahl</option>';
		$query = "SELECT standorte FROM Job_Test WHERE WE_ID = '".$stellen_id."' ";
		$rowCount = count($query);
			if($rowCount > 0){
        			echo '<option value="">Auswahl</option>';
        			while($row = $query->fetch_assoc()){
					  $data_standort = '<option value="'.$row['standorte'].'">'.'</option>';
       				}
    			}else{echo '<option value="">Standort ist nicht vorhanden</option>';}
		}	


		$data['filiale_standort'] = $data_standort; 
		echo json_encode($data);
		?>
Und in dem Folgenden select soll dann der $data_standort auswähltbar sein:

Code: Alles auswählen

	<select name="selectfiliale" id="selectfiliale">
		<option value="">Wählen Sie zuerst eine Stelle.</option>
      	</select>
Das aktuelle Ergebnis ist, dass nichts passiert.

Das Wunschergenbis ist:
Wenn ich in selectjob einen Job ausgesucht habe, soll in selectfiliale alle Standorte aufgelistet werden, die in dem ausgewählten Job sind.

Ich hoffe das ist soweit verständlich, wenn nicht: Ich habe es auch noch nicht so recht verstanden...

Danke schon mal.

LG
DieKleine

WBTMagnum
webEdition Partner
webEdition Partner
Beiträge: 1825
Registriert: Di 7. Mär 2006, 16:50
Wohnort: Wien
Kontaktdaten:

Re: Dropdown Felder die aufeinander aufbauen - chained selects

Beitragvon WBTMagnum » Do 5. Jan 2017, 22:35

Also ....

Grundsätzlich: Die Datei "bewerbungsform_json.php" erzeugt kein JSON! Du brauchst vermutlich so was in der Art:

Code: Alles auswählen

["Berlin", "Köln", "München", "Bremen"]
Diese Werte kannst du dann verwenden um per JavaScript die Selectbox dynamisch zu befüllen.


Bevor du deine Lösung jetzt aber umschreibst, schau doch mal mit den Entwicklertools deines Browser ob/was da überhaupt übertragen wird. Kommen die AJAX Requests durch? Was beinhalten sie?

Mir ist noch aufgefallen, dass du in den <option> Elementen nur das value Attribut setzt, aber keinen Inhalt festlegst. Vielleicht wird dir deshalb nichts angezeigt.


HTH,
Sascha

mokraemer
Senior Member
Beiträge: 3619
Registriert: So 8. Aug 2010, 01:23
Wohnort: Mainz

Re: Dropdown Felder die aufeinander aufbauen - chained selects

Beitragvon mokraemer » Fr 6. Jan 2017, 13:31

wundert mich auch nicht:

Code: Alles auswählen

 $query = "SELECT standorte FROM Job_Test WHERE WE_ID = '".$stellen_id."' ";
      $rowCount = count($query);
was soll denn hier passieren? $query ist ein String und count eine Array-Funktion.
Es sollte auf keinen Fall

Code: Alles auswählen

$_GET['selectjob']
verwendet werden, wenn man nicht weiß was man tut. So wie der Kode hier steht, ist eine SQL-Injektion direkt möglich.

Bitte benutze dafür die WE-Tags und die Funktionen für das SQL-Escaping und die Datentypen!
webEdition-Kern-Entwickler


Zurück zu „Off-Topic & Smalltalk“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 6 Gäste