Inhalt bei dynamischen punkten einblenden

litterauspirna · 06.07.2009, 11:32

Hallo Luetz,

ich habe mir den code im Wiki angeschaut und versucht einzusetzen, aber das klappt so gra nicht.

Ich lese aus der DB dynmisch einige Preiskategorien aus und zu jeder gibt es in einer anderen tabelle dann eine Preisliste. Nun soll es so sein das wenn man auf einen Punkt klickt, das dann der dauzugehörige Inhalt auch nur zu diesem Punkt eingeblendet wird.

Ich bin sicher ich ahbe etwas falsch gemacht aber weis nicht was.

JS Code

Code:

function toggleElementDisplay(element)
{
    element = element.style;
    if (element.display == 'block') {
        element.display = 'none';
        return;
    }
    element.display = 'block';
}

PHP - Code

PHP-Code:

  <?php
//auslesen der Kategorien die zur Preisliste gehören
$sqlbefehl ="
   Select
    id_cat,
    cat_name,
    preis_list
   From
    menu
   Where
    preis_list =1
   ";
$erg_pl = mysql_query($sqlbefehl);
if(!$erg_pl)
{
 echo '<pre>';
  die(mysql_error().$sqlbefehl);
 echo '</pre>';
}
else
{
 while($pl = mysql_fetch_assoc($erg_pl))
 {
   echo '<div class="pl_rahm">';
   
   echo "<a href=\"#\" onclick=\"toggleElementDisplay(document.getElementById('pl_text'));\"><h3 class=\"pl_us\">".$pl['cat_name']."</h3></a>";
   
   //asulesen der page zur preisliste
    $sqlbefehl ="
       Select
        id_page,
        cat_id,
        page_context
       From
        pages
       Where
        cat_id =".(int)$pl['id_cat']."
       ";
    $erg_liste = mysql_query($sqlbefehl);
    if(!$erg_liste)
    {
     echo '<pre>';
      die(mysql_error().$sqlbefehl);
     echo '</pre>';
    }
    else
    {
     $liste = mysql_fetch_assoc($erg_liste);
     
     echo '<div id="pl_text">';
      $text = nl2br(htmlspecialchars(stripslashes($liste['page_context'])));
      echo CodeParser($text);
     echo '</div>';
    }
   
  echo '</div>';
  
 }
}
?>

Könnt ihr mir da weiter helfen? Vielen Dank sagt der litter

drsoong · 08.07.2009, 00:36

Hm, bin mir jetzt nicht ganz sicher, was Du da für ein Problem hast. Wie es aussieht, willst Du per Klick auf den Link den Layer pl_text ein- und ausblenden. Deine JavaScript-Notation ist ein wenig ungewöhnlich, scheint aber im Prinzip lauffähig zu sein. Versuch doch einfach mal statt return else einzusetzen und leicht modifiziert folgendes zu schreiben:

Code:

function toggleElementDisplay(element)
{
    if (element.style.display == 'block') {
        element.style.display = 'none';
     } else {
    element.style.display = 'block';
}
}

Ansonsten würde ich das eher über style.visibility = 'none' bzw. 'visible' versuchen.

nikosch · 08.07.2009, 01:03

Was ist daran ungewöhnlich?

early break;

Zitat:

Ansonsten würde ich das eher über style.visibility = 'none' bzw. 'visible' versuchen.

Das ist nicht sehr sinnvoll. Weil visibility den benötigten Platz freihält.

Ich rate immer (wie sollte ich auch anders als Autor) zu der class-Toggle Variante. Weil man damit das Stylesheet unabhängig im nachhinein und extern festlegen kann. Spart ausserdem Code.

element = element.style;

ist natürlich hochgradig Blödsinn, wenn man später noch element Attribute zuweisen will. Fehler im Wiki würde ich sagen

Benutz einfach eine andere Variable.

[edit]
Nee, geht doch. Es wird ja nur noch dem Style etwas zugewiesen. Verwirrend ists trotzdem.

[edit2]
Bei Dir gehts nicht Litter, weil eine ID in HTML natürlich unique sein muss.

drsoong · 08.07.2009, 10:48

Zitat:

Das ist nicht sehr sinnvoll. Weil visibility den benötigten Platz freihält.

Fair comment.

Zitat:

Nee, geht doch. Es wird ja nur noch dem Style etwas zugewiesen. Verwirrend ists trotzdem.

Das meine ich mit "ungewöhnlich". Ansonsten würde ich mich freuen, wenn der liebe litter noch mal eine
Rückmeldung gibt. Als ich ihm das letzte mal ne komplette Lösung hab rüberwachsen lassen, kam auch kein weiterer Kommentar. Es würde mich aber schon interessieren, ob es geholfen hat. Also, funzt dat jetz oder nich.

litterauspirna · 10.07.2009, 12:50

Zitat:

Zitat von nikosch

[edit2]
Bei Dir gehts nicht Litter, weil eine ID in HTML natürlich unique sein muss.

Was muss ich da dann ändern? Die ID dynamisch zusammensetzen und Javascript übergeben? Ich bin leider nicht wirklich fit in Javascript.

nikosch · 10.07.2009, 12:59

Das Javascript ist ja statisch. Richtig, ID dynamisieren, auch beim Aufruf. Passender wäre in dem Falle eine Klasse zu benutzen. Dafür musst DU Dir aber ein getElementsByClass besorgen, das giobts nicht nativ in JS, wurde aber schon vielfach publiziert. Von mir hier: http://www.php.de/tutorials/44167-js...tenmodell.html (JS: Einführung - Javascript im Schichtenmodell)

Code:

// Zugriff auf DOM Element über Klasseneigenschft - Funktion sollte als Core 
// Methode in ein separates externes JS

getElementsByClass = function (sClassName)
  {
  var aReturnElements = [];

  var oRegExpClass = new RegExp ('\\s*\\b' + sClassName + '\\b');
  var oElements = (document.all) 
                    ? document.all 
                    : document.getElementsByTagName ('*');
  for (var i = 0 ; i < oElements.length ; i++)
    {
    if (oRegExpClass.test (oElements[i].className)) aReturnElements.push (oElements[i]);
    }

  return (aReturnElements);
  }

Dort ist auch beschrieben, dass es noch schöner wäre, die gesamte Dynamik nach Javascript auszulagern. Also auch die Auswahl dynamischer Elemente.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] variable auf inhalt prüfen	level31	PHP Tipps 2009	2	23.06.2009 13:00
[Erledigt] jede Seite hat den selben Inhalt...	ocean85	PHP Tipps 2009	14	10.03.2009 11:59
Hilfe, Seite im Internet Explorer Buggy	trowman	HTML, Usability und Barrierefreiheit	4	15.09.2008 08:32
Bild verschafft sich platz		HTML, Usability und Barrierefreiheit	14	11.08.2008 23:45
Variable mit externen Inhalt setzen?	errox	PHP Tipps 2008	7	30.05.2008 21:39
Fileupload - Inhalt wird verändert	wolf1985	PHP Tipps 2008	7	18.05.2008 12:54
Seite mit dynamischen und festen Inhalten erstellen	errox	PHP Tipps 2008	2	04.11.2007 14:01
Textdatei erstellen - Inhalt mit Variablen füllen	DDogg	PHP Tipps 2006	3	25.09.2006 13:44
Inhalt zentrieren trotz Scrolleiste	max-dhom	HTML, Usability und Barrierefreiheit	5	20.05.2006 17:24
innerHTML/document.write und Inhalt in anderen Frame ändern		HTML, Usability und Barrierefreiheit	1	29.01.2006 10:35
Inhalt einer Text-Datei löschen		PHP Tipps 2005-2	3	11.07.2005 23:21
Variablen inhalt verändern (löschen und einfügen)		PHP Tipps 2004	2	16.09.2004 11:57
Inhalt einer .txt-Datei löschen		PHP Tipps 2004	5	28.08.2004 22:16
Inhalt einer Datei einbinden ohne Inhalt anzuzeigen	Corvin	PHP Tipps 2004	4	22.07.2004 09:24

06.07.2009, 11:32
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Inhalt bei dynamischen punkten einblenden Hallo Luetz, ich habe mir den code im Wiki angeschaut und versucht einzusetzen, aber das klappt so gra nicht. Ich lese aus der DB dynmisch einige Preiskategorien aus und zu jeder gibt es in einer anderen tabelle dann eine Preisliste. Nun soll es so sein das wenn man auf einen Punkt klickt, das dann der dauzugehörige Inhalt auch nur zu diesem Punkt eingeblendet wird. Ich bin sicher ich ahbe etwas falsch gemacht aber weis nicht was. JS Code Code: function toggleElementDisplay(element) { element = element.style; if (element.display == 'block') { element.display = 'none'; return; } element.display = 'block'; } PHP - Code PHP-Code: <?php //auslesen der Kategorien die zur Preisliste gehören $sqlbefehl =" Select id_cat, cat_name, preis_list From menu Where preis_list =1 "; $erg_pl = mysql_query($sqlbefehl); if(!$erg_pl) { echo '<pre>'; die(mysql_error().$sqlbefehl); echo '</pre>'; } else { while($pl = mysql_fetch_assoc($erg_pl)) { echo '<div class="pl_rahm">'; echo "<a href=\"#\" onclick=\"toggleElementDisplay(document.getElementById('pl_text'));\"><h3 class=\"pl_us\">".$pl['cat_name']."</h3></a>"; //asulesen der page zur preisliste $sqlbefehl =" Select id_page, cat_id, page_context From pages Where cat_id =".(int)$pl['id_cat']." "; $erg_liste = mysql_query($sqlbefehl); if(!$erg_liste) { echo '<pre>'; die(mysql_error().$sqlbefehl); echo '</pre>'; } else { $liste = mysql_fetch_assoc($erg_liste); echo '<div id="pl_text">'; $text = nl2br(htmlspecialchars(stripslashes($liste['page_context']))); echo CodeParser($text); echo '</div>'; } echo '</div>'; } } ?> Könnt ihr mir da weiter helfen? Vielen Dank sagt der litter __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

08.07.2009, 00:36
drsoong Erfahrener Benutzer Registriert seit: 05.08.2008 Beiträge: 1.127	Hm, bin mir jetzt nicht ganz sicher, was Du da für ein Problem hast. Wie es aussieht, willst Du per Klick auf den Link den Layer pl_text ein- und ausblenden. Deine JavaScript-Notation ist ein wenig ungewöhnlich, scheint aber im Prinzip lauffähig zu sein. Versuch doch einfach mal statt return else einzusetzen und leicht modifiziert folgendes zu schreiben: Code: function toggleElementDisplay(element) { if (element.style.display == 'block') { element.style.display = 'none'; } else { element.style.display = 'block'; } } Ansonsten würde ich das eher über style.visibility = 'none' bzw. 'visible' versuchen.

10.07.2009, 12:59
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Das Javascript ist ja statisch. Richtig, ID dynamisieren, auch beim Aufruf. Passender wäre in dem Falle eine Klasse zu benutzen. Dafür musst DU Dir aber ein getElementsByClass besorgen, das giobts nicht nativ in JS, wurde aber schon vielfach publiziert. Von mir hier: http://www.php.de/tutorials/44167-js...tenmodell.html (JS: Einführung - Javascript im Schichtenmodell) Code: // Zugriff auf DOM Element über Klasseneigenschft - Funktion sollte als Core // Methode in ein separates externes JS getElementsByClass = function (sClassName) { var aReturnElements = []; var oRegExpClass = new RegExp ('\\s\\b' + sClassName + '\\b'); var oElements = (document.all) ? document.all : document.getElementsByTagName (''); for (var i = 0 ; i < oElements.length ; i++) { if (oRegExpClass.test (oElements[i].className)) aReturnElements.push (oElements[i]); } return (aReturnElements); } Dort ist auch beschrieben, dass es noch schöner wäre, die gesamte Dynamik nach Javascript auszulagern. Also auch die Auswahl dynamischer Elemente. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --