Anzeige einer Lightbox innerhalb und außerhalb eines AJAX-divs

**menschmithut** · 06-06-2011, 12:19

Hallo!
Zunächst einmal, ich bin neu hier, und dies ist meine erste Frage. Ich würde mich freuen, wenn ihr mir weiterhelfen könntet. Meine JavaScript-Kenntnisse sind äußerst rudimentär und beschränken sich hauptsächlich auf Code im Internet suchen, in meine Seiten reinkopieren, und laufen lassen. Nun hat sich bei mir ein Problem ergeben, da ich mich aber so gut wie gar nicht mit der Materie auskenne, weiß ich nicht so recht, wonach ich suchen soll, bzw. wo ich anfangen soll, um die Sache zu lösen.

Hier also meine Beschreibung:
Ich habe auf einer meiner Seiten eine Suchfunktion, die Ergebnisse aus einer SQL-Datenbank ausliest und darstellt. Darunter auch ein Bild des Produkts. Für die Anzeige einer größeren version dieses Bildes benutze ich eine Lightbox-Funktion. Das funktioniert auch einwandfrei.

Nun gibt es aber eine andere Seite, die auf genau die selbe Suche zugreift, und genau dieselbe Ausgabedatei verwendet. Allerdings kann der Nutzer hier die Anzeige der Suchergebnisse über ein DropDown-Menü eingrenzen, das wiederum in einem AJAX-div das Suchergebnis öffnet und die Ausgabedatei mithilfe einer GET-Funktion abruft. Und in dieser Anzeige funktioniert die Lightbox nicht, sondern das größere Bild wird einfach in einem neuen Fenster angezeigt.

Ich vermute, dass sich die GET-Funktion mit der Anzeige der Lightbox beißt, finde aber nicht so recht den wirklichen Grund dafür, geschweige denn eine Lösung.

Ich würde mich schon sehr freuen, wenn ihr mir einen Fingerzeig i die richtige Richtung geben könntet.

Hier ist der Teilcode, der funktioniert:

Code:

<?php
    // Get the current include path settings from php config file
    $path = ini_get('include_path');
 
    // Obtain the path to the root of the web server
    $docRoot = $_SERVER['DOCUMENT_ROOT'];
 
    /* Concatenate all the above values to set the includes
       folder in the path of php parser to find the scripts
       called with the include() function.*/
    ini_set('include_path', $docRoot . $dirName . '/deh/data');

    include ('sucheStatisch.php');
?>

Hier der per AJAX eingebunde Code:

Code:

<script type="text/javascript">
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/deh/data/sucheStatisch.php?quest="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option selected value="">Ausgangsspannung wählen</option>
<option value="singleE3v">3 Volt</option>
<option value="singleE3k3v">3,3 Volt</option>
<option value="singleE5v">5 Volt</option>
<option value="singleE6v">6 Volt</option>

</select>
</form>
<br />
<div id="txtHint"><b>Suchergebnis wird hier ausgegeben</b></div>

</body>
</html>

Hier die Ausgabedatei:

Code:

<tbody>
	<tr style="height: 100px;">

		<td  align="center"><a href='<?= $pspicbig ?>' rel="lytebox" title="<?= $array['modelname']; ?>"><img src="<?= $pspic ?>" height="50" border="0"></a></td>

		<td align="center"><?= $array['modelname']; ?></td>

		<td align="center"><?= $array['modeltype']; ?></td>

Den Code der Lightbox (lytebox) habe ich als txt-Datei angehängt.

Vielen Dank für eure Hilfe,
Uli

**kkapsner** · 07-06-2011, 00:24

Mal ein Schnellschuss:

Code:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    initLytebox();
    }
  }

**menschmithut** · 07-06-2011, 08:32

Herzlichen Dank für die schnelle Hilfe. Das war's.
Ich war schon auf dem richtigen Pfad, wusste nur nicht genau, wohin mit dem initLytebox().
Dann bis zu meiner nächsten Frage