Teile eines Formulars neu laden

Tsa

Mitglied
Hey Leute,
Ich habe ein kleines Problem, bei dem ich mich frage ob es überhaupt möglich ist mit Javascript und PHP und wenn ja, wie:

Habe ein Formular.
In diesem Formular gibt es unter anderem ein Auswahlmenu mit einfacher auswahl und ein Auswahlblock, wo man mehrere Sachen auswählen kann.
Der Inhalt des Auswahlblocks soll aber abhängig von dem Inhalt der ersten Auswahl sein.
Am Beispiel:
Ich habe Bereiche und Themen. Ist der Bereich "1" ausgewählt soll bei Themen "5","6","7" auswählbar sein, ist aber "2" ausgewählt, soll bei Themen "1","2","3" auswählbar sein.
Ich hoffe ihr versteht was ich damit meine.
Ist dies mit Hilfe von Javascript möglich? Wenn ja, wie?

Liebe Grüße,
Jens
 
Hey,
also ich hab mich jetzt lange mit beschäftigt, aber ich komme einfach nicht drauf...
Was bedeutet in dem Script:
http://doktormolle.de/temp/xmlhttp_comboboxes/index.php

folgende Zeilen:
Code:
function request_data(objBox) 
{
 if(!req)
  {
   alert('dein Browser kann das nicht :o(');
   return;
  }
        
 if(lock)
  {
   alert('Warte bitte, bis die letzte Anfrage verarbeitet wurde');
   return;
  }
        
   objLayer=objBox.parentNode
   lock = true;
   for(i=objLayer.childNodes.length-1;i>0;--i)
    {
      if(objLayer.childNodes[i]==objBox)break;
      objLayer.removeChild(objLayer.childNodes[i]);
    }
    
   req.onreadystatechange = new Function('f','get_http_response()');
   req.open("GET", 'box.php?box='+ objBox.value + '&' + new Date().getTime(), true);
   req.send(true);
  
}

Also ich weiß, dass dort das HTML durchsucht wird. beginnend beim parent. Jetzt ist für mich aber die Frage: Das ganze wird bei onchange aufgerufen mit dem aktuellen Parameter "this". Ich kenne this aus Java und dort ist es eine Referenz auf die gerade geöffnete Klasse. Hier wohl auf das aktuelle Dokument. Heißt das der ganze <html> <head> krams gehört dazu oder heißt das, erst ab Select?
Wäre cool, wenn jmd kurz ein Kommentar dazu schreiben könnte WOZU diese Zeilen da sind, das würde mir viel beim Verstehen helfen. Ich muss das ganze wohl doch etwas heftiger ändern, als mir lieb ist :(
Liebe Grüße,
Jens
 
Moin,

this ist in dem Fall ein Zeiger auf das auslösende Element, also das <select>
Der Elternknoten dieses Elements enthält nur <select>'s

Beim onchange werden alle select's durchlaufen, und zwar beginnend beim letzten.
Solange es sich bei dem jeweiligen select nicht um das auslösende select handelt, wird es aus dem Dokument entfernt, denn der Request liefert ja eine neue Box anhand des Requests.

Bsp.:
Man hat als Auswahl Drinks->Sprit->Tequila, und wählt nun statt "Drinks"...Essen, dann machen die Boxen mit Sprit und Tequila keinen rechten Sinn mehr, und werden durch diesen Code entfernt.
 
Hey,
thx :) Das macht Sinn, jetzt weiß ich auch wozu der code da ist. ;)
Was ziemlich cool wäre, wenn der ganze Code kommentiert wäre. Grade für JavaScript/Ajax Einsteiger find ich ihn ziemlich kompliziert.
Aber schöne Sache. :) Ich hoffe ich komme jetzt weiter.
Liebe Grüße,
Jens
 
könnte ich machen, aber nicht vor Sonntag Mittag...erinnere mich am Besten per PM daran, weil ichs bis dahin garantiert vergessen hab :-(
 
Ok, cool :)
Also ich bin jetzt auch soweit! Habe für mich eine Lösung gefunden, mit dem ekligen Ajax kram! ;)
Noch eine Frage: Wenn ich jetzt auf den Source gehe, taucht die multiple select Ding nicht auf. Wenn ich dann ein Formular abschick, funktioniert das dann? ;)
Achso, sogar noch etwas *g*
Folgender Code:
PHP:
function make_box($bereichid)
{
	
	$themenManager = new ThemenZuBereicheSQL();
	$unterkategorieManager = new UnterkategorieSQL();
	$returnwert ='';
  	if($bereichid)
  	{
      $themen1 = $themenManager->holeNachBereichsId($bereichid);      
      
      $themen = array();
      
      for($i = 0; $i < count($themen1); $i++)
      {
      	$einThema = $unterkategorieManager->holeNachId($themen1[$i]->id);
      	if(isset($einThema))
      	{
      		$themen[] = $einThema;
      	}
      }
      $returnwert .= "<select name='unterkategorieid' id='unterkategorieid[]' multiple size='5'>";
   	  for($i = 0; $i < count($themen); $i++)
      {
    	$returnwert .="<option value=".$themen[$i]->id.">". $themen[$i]->name ." </option>";
      }
      $returnwert .=" </select>";
   }
   echo $returnwert;
   return $returnwert;
}

Per return wird nichts ausgegeben. Nur mit dem echo. Denke auch damit könnte das mit dem Formular zusammenhängen und hoffe, dass das keine Fehler nach sich trägt. Aber zur Korrektur: Die get_http_request soll ja die Ausgabe regeln oder? Also die sieht bei mir so aus:
Code:
function get_http_response()
{
 //Wenn Anfrage fertig
 if(req.readyState == 4)
  {   
   //Wenn Status OK
   if(req.status == 200)
    {
     //Antwort ausgeben
	 document.getElementById("Ausgabe").innerHTML= req.responseText;  
     //sperre entfernen
     lock=false;
    }
   //Ansonsten
   else
    {
     //Statuscode ausgeben
     alert(req.statusText);
    }
   //Request beenden
   if(document.all && !window.opera)
    {
     req.abort();
    }
   lock = false;
  }
}
und ein <div id="Ausgabe"> existiert auch.

Hoffe ich nerve nicht ;)
Liebe Grüße,
Jens
 
Noch eine Frage: Wenn ich jetzt auf den Source gehe, taucht die multiple select Ding nicht auf. Wenn ich dann ein Formular abschick, funktioniert das dann? ;)
Das sollte nicht so sein, schliiesslich stehts ja da....wenn nichts ausgegeben wird, dürfte die Bedingung
Code:
if($bereichid)
nicht zutreffen.


Per return wird nichts ausgegeben. Nur mit dem echo.

In meinem Code steht ja auch
Code:
print(make_box(0));
,
per print wird der Rückgabewert der Funktion ausgegeben.

Der Code ist jetzt übrigens ausfährlich kommentiert, der Dank dafür gilt Quaese, der dies freundlicherweise getan hat.:)
 
Danke, dass der code kommentiert wurde :)

Ich komme nun absolut nicht drauf. Ich poste hier mal allen Code und hoffe, dass mir einer von euch cracks helfen kann. Die Seite wo der Test läuft geb ich auch dazu. DAnn könnt ihr euch auch anschauen, was funktioniert und was nicht. Ich hoffe ihr kommt drauf :(

index.php
Code:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
 lock = false;//sperre bei laufendem request
 req  = false;//request-objekt
 objLayer=false;//container für die boxen
    
 if(window.XMLHttpRequest) 
  {
   try 
    {
     req = new XMLHttpRequest();
    } 
   catch(e) 
    {
     req = false;
    }
   } 
  else if(window.ActiveXObject) 
   {
    try 
     {
      req = new ActiveXObject("Msxml2.XMLHTTP");
     } 
    catch(e) 
     {
      try 
       {
        req = new ActiveXObject("Microsoft.XMLHTTP");
       } 
      catch(e) 
       {
        req = false;
       }
     }
   }
        
        
function request_data(objBox) 
{
 if(!req)
  {
   alert('dein Browser kann das nicht :o(');
   return;
  }
        
 if(lock)
  {
   alert('Warte bitte, bis die letzte Anfrage verarbeitet wurde');
   return;
  }
   req.onreadystatechange = new Function('f','get_http_response()');
   req.open("GET", 'box.php?gewaehlterBereich='+ objBox.value + '&amp;' + new Date().getTime(), true);
   req.send(true);
  
}

//Antwort verarbeiten
function get_http_response()
{
 //Wenn Anfrage fertig
 if(req.readyState == 4)
  {   
   //Wenn Status OK
   if(req.status == 200)
    {
     //Antwort ausgeben
	 document.getElementById("Ausgabe").innerHTML= req.responseText;  
     //sperre entfernen
     lock=false;
    }
   //Ansonsten
   else
    {
     //Statuscode ausgeben
     alert(req.statusText);
    }
   //Request beenden
   if(document.all && !window.opera)
    {
     req.abort();
    }
   lock = false;
  }
}
//-->
</script>
</head>
<body>
  <form action="ausgabe.php" method="post">
    <span>
<?php
  define('inside',true);
  require_once('box.php');
  print(make_box());
?>

    </span>
    <input type="submit">
  </form>

<div id="Ausgabe"></div>
<?php 
#  @end($_POST['box']);
#  @print($db[$_POST['box'][key($_POST['box'])]][0]);
?>

</body>
</html>

box.php
PHP:
<?php
//box.php
require_once($_SERVER['DOCUMENT_ROOT']."/sql/ThemenZuBereicheSQL.class.php");
require_once($_SERVER['DOCUMENT_ROOT']."/sql/KategorieSQL.class.php");
require_once($_SERVER['DOCUMENT_ROOT']."/sql/UnterkategorieSQL.class.php");


if(isset($_GET['gewaehlterBereich']))
{
	make_box($_GET['gewaehlterBereich']);
}
else
{
	$kategorieManager = new KategorieSQL();

	$kategorien = $kategorieManager->holeAlleKategorien();
	$box ='<select name="thema" onchange="request_data(this) ">
              <option value="-1">Auswahl</option>';
	for($i = 0; $i < count($kategorien); $i++)
	{	
	
		$box .= '<option value="'.$kategorien[$i]->id.'">'.$kategorien[$i]->id.'</option>';
	}
	$box .= '</select>';
	echo $box;
}
function make_box($bereichid = -1)
{
	
	$themenManager = new ThemenZuBereicheSQL();
	$unterkategorieManager = new UnterkategorieSQL();
	$returnwert ='';
  	if($bereichid)
  	{
      $themen1 = $themenManager->holeNachBereichsId($bereichid);      
      
      $themen = array();
      
      for($i = 0; $i < count($themen1); $i++)
      {
      	$einThema = $unterkategorieManager->holeNachId($themen1[$i]->id);
      	if(isset($einThema))
      	{
      		$themen[] = $einThema;
      	}
      }
      $returnwert .= "<select name='unterkategorieid' id='unterkategorieid[]' multiple size='5'>";
   	  for($i = 0; $i < count($themen); $i++)
      {
    	$returnwert .="<option value=".$themen[$i]->id.">". $themen[$i]->name ." </option>";
      }
      $returnwert .=" </select>";
   }
   echo $returnwert;
   return($returnwert);
}
?>

Ich glaube es stimmt was mit dieser ganzen Verzahnung nicht.
Wenn ich das Formular abschicke, werden die Selects der multiple Box nicht übernommen. Die multiple box ist auch nicht im Source, wenn man ihn sich per rechtsklick anzeigen lässt.

Testseite: http://suspicionless.su.funpic.de/Test
 
Zurück