Entwickler-Ecke

Beschreibungssprachen - Wie kann man dynamisch Elemente auf eine Website bringen?


Csharp-programmierer - So 04.12.16 13:27
Titel: Wie kann man dynamisch Elemente auf eine Website bringen?
Hallo,
jetzt möchte ich die Daten aus der Datenbank schön auf der Website präsentieren. Für jeden Datensatz erzeuge ich eine Tabelle, die so ähnlich aussehen soll wie die in der EE bei "Die letzten 10". Also so eine Art Kästchen mit allen Daten. Jetzt gibt es das Problem, dass jede Tabelle eine eigene ID braucht und ich nicht weiß, wie ich die erzeige, da man ja nicht weiß, wie oft diese erzeugt wird. Gibt es jemanden, der mir helfen kann?


Csharp-programmierer - So 04.12.16 20:29
Im Moment sieht der Code so aus:

HTML-Dokument 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
 
<html>
  <head>
  <title>Test</title>
  </head>
  
  <body>
    <script type="text/javascript">
      function SelectTable(Table) {
        var v = document.getElementsByClassName(Table);
        v[0].style.borderStyle = "7px solid #00b1ff";
      }
    </script>
    
    <div onclick="SelectTable('item');" class="item">
    <table>
    <tr>
      <td><label><font color="#818181" face="Calibri" size="+2">Hallo</label></font></td>
    </tr>
    <tr>
      <td><label><font color="#818181" face="Calibri" size="+1">Wie gehts</label></font></td>
    </tr>
    </table>
    </div>
    
    <br>
    <div onclick="SelectTable('item');" class="item">
    <table>
    <tr>
      <td><label><font color="#818181" face="Calibri" size="+2">Hallo</label></font></td>
    </tr>
    <tr>
      <td><label><font color="#818181" face="Calibri" size="+1">Wie gehts</label></font></td>
    </tr>
    </table>
    </div>
  </body>
</html>


Der Code für eine Tabelle wird dann später in eine while Schleife gepackt. So werden die erzeugt, aber wenn jetzt eine Maus über den DIV rüberfährt, soll dieser DIV animiert werden. Dazu braucht JS ja die ID bzw. irgendein Argument, welches Element verändert werden soll. Und auch wenn man auf den DIV klickt, soll etwas passieren. Wie mache ich sowas?


jfheins - So 04.12.16 20:56
Erstmal sind das keine IDs, sondern css Klassen :wink:

Und zu "wie macht man das": Wenn du im Click-Handler thisbenutzt, wird das HTML-Element übergeben. Also z.B.:

HTML-Dokument 
1:
 
<div onclick="SelectTable(this);" class="item">

Dann ist der Parameter der Methode aber bereits das div, auf das geklickt wurde. getElementsByClassName brauchst du dann nicht mehr.

Das gnaze geht natürlich auch mit IDs (also richtigen). Dazu dann einfach sowas generieren:

HTML-Dokument 
1:
 
<div onclick="SelectTable(298);" class="item" id="298">

Und daran denken, dass diese id im gesamten Dokument eindeutig sein muss. Also ne fortlaufen Zahl würde sich eigenen. Eventuell noch mit prefix: "tabelle_298"


Csharp-programmierer - So 04.12.16 21:17
Vielen Dank für die Antwort. Ich habe es jetzt gemacht, dass der DIV über CSS animiert wird. Aber wenn dieser jetzt geklickt wird, muss der Wert eines Labels an eine PHP Datei übergeben werden. Wie macht man sowas?


Csharp-programmierer - Mo 05.12.16 14:41
Jetzt hapert es hier dran:

PHP-Quelltext 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
 
<?php
            $conn = new mysqli($servername, $username, $password, $dbname);
            if ($conn->connect_error) {
              die("Connection failed: " .$conn->connect_error. "Hallo");
            }

            $sql = "SELECT * FROM `MainlysoftBenutzer`";
            $result = $conn->query($sql);
            if ($result->num_rows > 0) {
              while($row = $result->fetch_assoc()) {
                echo "<div class='item' onclick='Animate(this);'>"
                echo "<table>"
                echo "<tr>";
                echo "<td><label><font color='#818181' size='+2' face='calibri'>" .$row["name"]. "</label></font></td>";
                echo "<td><label><font color='#818181' size='+1' face='calibri'>" .$row["email"]. "</label></font></td>";
                echo "</tr>";
                echo "</table></div><br>"
              } 
            } 
            else
            {
              echo "Access danied";
            }
            mysqli_free_result( $db_erg );
            $conn->close();
        ?>


Wenn ich das jetzt so ausführe, dann sieht es so aus:
1


hydemarie - Mo 05.12.16 15:01
Dir fehlen da ein paar Semikolönne nach deinen echos.

Darüberhinaus: Ist das wirklich der vollständige Code? Da scheint irgendwo ein <?php ... ?> zu fehlen.


Csharp-programmierer - Mo 05.12.16 15:45
Das ist der komplette Seitenquelltext:

HTML-Dokument 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
 
<html>
  <head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  
  <body>
  <script>
    function Animate(Control) {
      var x = document.getElementsByClassName("item");
      var i;
      
      for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "#ffffff";
      }
      
      Control.style.backgroundColor = "#c1c1c1";
    }
  </script>
           <?php
            $conn = new mysqli($servername, $username, $password, $dbname);
            if ($conn->connect_error) {
              die("Connection failed: " .$conn->connect_error. "Hallo");
            }

            $sql = "SELECT * FROM `MainlysoftBenutzer`";
            $result = $conn->query($sql);
            if ($result->num_rows > 0) {
              while($row = $result->fetch_assoc()) {
                echo "<div class='item' onclick='Animate(this);'>";
                echo "<table>";
                echo "<tr>";
                echo "<td><label><font color='#818181' size='+2' face='calibri'>" .$row["name"]. "</label></font></td>";
                echo "<td><label><font color='#818181' size='+1' face='calibri'>" .$row["email"]. "</label></font></td>";
                echo "</tr>";
                echo "</table></div><br>";
              } 
            } 
            else
            {
              echo "Access danied";
            }
            mysqli_free_result( $db_erg );
            $conn->close();
        ?> 

    <div class="item" onclick="Animate(this);" >
      <table>
        <tr>
          <td><label class="name_label"><font color="#818181" face="Calibri" size="+2">Hallo</label></font></td>
        </tr>
        <tr>
          <td><label><font color="#818181" face="Calibri" size="+1">Wie gehts</label></font></td>
        </tr>
      </table>
    </div>
    
    <br>
    <div class="item" onclick="Animate(this);">
      <table>
        <tr>
          <td><label><font color="#818181" face="Calibri" size="+2">Hallo</label></font></td>
        </tr>
        <tr>
          <td><label><font color="#818181" face="Calibri" size="+1">Wie gehts</label></font></td>
        </tr>
      </table>
    </div>
  </body>
</html>


Irgendwie scheint ein Tag nicht beendet zu sein, aber ich weiß nicht, welcher :(


hydemarie - Mo 05.12.16 15:49
Irgendwie scheint PHP da einfach nicht zu laufen. 8)


Csharp-programmierer - Mo 05.12.16 15:53
Und wie bringe ich PHP dazu, zu laufen? :shock:


hydemarie - Mo 05.12.16 15:55
Auweia.

Auf welchem Server testest du das denn?


Csharp-programmierer - Mo 05.12.16 15:57
Auf meinem Webhosting Server. Aber der Script an sich funktioniert, der sendet alle Daten an das Admin Programm.
Also der PHP Script greift auf den Webserver zu, die HTML Datei an sich wird aber als Lokaldatei ausgeführt.


hydemarie - Mo 05.12.16 16:00
Eine .html-Datei im Browser zu öffnen führt auf gar keinen Fall einen PHP-Interpreter aus.


Csharp-programmierer - Mo 05.12.16 16:01
Also muss ich eine .php Datei nehmen? Und warum auweia?


hydemarie - Mo 05.12.16 16:03
Du musst dort, wo die HTML-Datei liegt, einen PHP-Interpreter nutzen. Browser können kein PHP. :)


Csharp-programmierer - Mo 05.12.16 16:08
Und wie benutze ich so einen PHP Interpreter? Ich habe den geposteten Quelltext genommen und einfach in eine PHP Datei geschrieben. Es passiert aber immer noch nichts :(


hydemarie - Mo 05.12.16 16:11
Also zur Klarstellung: PHP wird serverseitig interpretiert. Das heißt:



Das bedeutet: PHP-Code geht nicht einfach aus C:\ heraus - es sei denn, du betreibst einen lokalen Webserver, zum Beispiel XAMPP.


Csharp-programmierer - Mo 05.12.16 16:15
Ahh. Aber als ich damals im Forum gefragt habe, ob man PHP Dateien aus C:/ ausführen kann, wurde ja gesagt :/
Aber jetzt funktioniert es :beer:


hydemarie - Mo 05.12.16 16:16
Natürlich kann man, wenn da ein Server läuft...


Csharp-programmierer - Mo 05.12.16 16:23
Stimmt :)
Jetzt werden alle Daten haar genau so dargestellt, wie ich es mir vorgestellt habe. Wenn jetzt auf ein DIV geklickt wird, soll ein Label ausgelesen werden und der Text an eine PHP Datei übergeben werden. Man könnte ja die Elemente des DIVs auswählen und dann das eine Label, welches über eine Class identifiziert ist, auslesen. Aber wie bekomme ich die untergeordneten Elemente eines DIVs?


hydemarie - Mo 05.12.16 16:36
Entweder via JavaScript (such' dir die children) oder via Child-Nodes [http://php.net/manual/de/book.dom.php].


jaenicke - Mo 05.12.16 16:41
Ich würde sehr dazu raten mit jQuery zu arbeiten statt das alles händisch mit document.getElementsByClassName usw. zu machen...

Da gibt es auch viel schönere Animationen schon fertig.


hydemarie - Mo 05.12.16 16:46
Ich halte es für fatal, ohne wirklich triftigen Grund ("is weniger zu tippen" ist kein triftiger Grund) ein Framework einzusetzen, das im Wesentlichen nur das Codeverständnis erschwert.


Csharp-programmierer - Mo 05.12.16 18:28
So ganz verstehe ich das noch nicht. Ich habe jetzt ein Item, dass im Quelltext so aussieht:


PHP-Quelltext 
1:
2:
3:
4:
5:
6:
7:
8:
 
echo "<div class='item' onfocus='Animate(this);' onclick='ElementClicked(this);'>";
                echo "<table>";
                echo "<tr>";
                echo "<td><label class='dataclass'><font color='#818181' size='+2' face='calibri'>" .$row["name"]. "</label></font></td>";
                echo "</tr><tr>";
                echo "<td><label><font color='#818181' size='+1' face='calibri'>" .$row["email"]. "</label></font></td>";
                echo "</tr>";
                echo "</table></div><br>";



JavaScript-Quelltext 
1:
2:
3:
4:
5:
6:
 
function ElementClicked(Object) {
      var c = Object.childNodes;
      var v = c.getElementsByClassName("dataclass");
      var text = v[0].innerHTML;
      alert(text);
    }


Also ein Label, was eine Klasse hat, soll ausgelesen werden. Dieses Label befindet sich in jedem Item einzeln. Wenn man auf das Item klickt, dann soll das eine Label von dem ausgewählten Item vom Wert her ausgelesen werden. Aber der Code so funktioniert noch nicht :(


hydemarie - Mo 05.12.16 18:32
Ich finde es etwas schade, dass du "funktioniert so nicht" immer noch für eine sinnvolle Fehlerbeschreibung hältst. Aber gut, das kriegen wir sicher noch hin. Ich rate jetzt also mal blind drauflos, was du für ein Problem hast: Dein Script findet die Elemente nicht?

Könnte daran liegen, dass dein div keinen Kindknoten mit der Klasse "dataclass" hat, sondern ein table mit einem tr mit einem td mit einem Kindknoten mit der Klasse "dataclass"... übrigens sollte so was Ähnliches auch in deiner Fehlerkonsole stehen. Ziemlich nützliches Ding. Guck' mal rein.


Csharp-programmierer - Mo 05.12.16 20:24
Jetzt funktioniert alles, wie ich es will:

JavaScript-Quelltext 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
 
function ElementClicked(Object) {
      var doc = Object;
      var c = doc.getElementsByTagName('span');
      var e = null;
      
      for (var i = 0; i < c.length; i++) {
        if (c[i].className == 'dataclass') {
          e = c[i];
          break;
        }
      }

      if (e != null) {
        alert(e.innerHTML);
      }
    }


hydemarie - Mo 05.12.16 20:26
Seltsam. Hast du irgendwo SPANs eingebaut?


Csharp-programmierer - Mo 05.12.16 20:39
Ich habe jetzt mal richtig recherchiert und bin fündig geworden. Jetzt habe ich auch spans eingebaut :)


Delete - Mo 05.12.16 21:03
- Nachträglich durch die Entwickler-Ecke gelöscht -


Csharp-programmierer - Mo 05.12.16 21:39
Wozu die span Tags gut sind, weiß ich leider nicht, aber in dem Bsp aus dem Netz war das so


Delete - Mo 05.12.16 23:01
- Nachträglich durch die Entwickler-Ecke gelöscht -


Csharp-programmierer - Mo 05.12.16 23:04
Ah also nur um Text zu formatiere. Aber so passt das ja jetzt alles, oder?


hydemarie - Mo 05.12.16 23:14
Passen tut's, wenn du nicht mehr fragen musst.


Csharp-programmierer - Mo 05.12.16 23:19
Naja aber jetzt funktioniert es ja? Jetzt muss ich morgen nur noch die PHP Daten austauschen und den Login, was nochmal schwierig wird Wegerecht der Session Variable.


Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!