Announcement

Collapse
No announcement yet.

Dynamische Seite lädt HTML Seiten nach, die aber nur ein Sekunde angezeigt werden.

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Dynamische Seite lädt HTML Seiten nach, die aber nur ein Sekunde angezeigt werden.

    Hallo,

    Ich wollte ein einfaches Menü erstellt das durch eine Ordnerstruktur erweitert bzw. verringert wird.
    Also wenn ich ein Ordner erstelle und darin ist eine HTML Seite, dann soll automatisch das Menü um ein Button erweitert werden.

    Das funktioniert soweit auch schon, jedoch wenn ich auf ein Button klicke, dann soll die Seite nachgeladen werden und das passiert auch,
    aber nur für eine Sekunde und dann wird die Seite nicht mehr angezeigt.

    Seite.jpg

    Hier mein Code:
    index.php
    HTML Code:
    <!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Medieninformatik 02</title>
    <!--CSS - Stylesheet-->
    <link rel="stylesheet" type="text/css" href="CSS%20-%20Stylesheet/index.css">
	<!--JS - JavaScript-->
</head>
<body>
    <!-- Kopf -->
    <div id="kopf">
        Medieninformatik 02
    </div>

    <!-- Steuerung -->
    <div id="steuerung">
	<ul>
		<?php
			include("PHP - Hypertext Preprocessor/Steuerung.php");
			include("PHP - Hypertext Preprocessor/LadeInhalt.php");
			echo steuerung();
		?>
	</ul>
    </div>

    <!-- Inhalt -->
    <div id="inhalt">
        <span class="ueberschrift">Inhalt<br></span>
        <div id="ladeInhalt"></div>
    </div>

    <!-- Fuß -->
    <div id="fuss">
        <span class="ueberschrift">Fuß<br></span>
    </div>


</body>
</html>
    Steuerung.php
    PHP Code:
    <?php
    function steuerung(){
            $verzeichnisname = "Labor";
            $verzeichnis = openDir("$verzeichnisname");
        while (    $ordner = readDir($verzeichnis)){
            if (    $ordner != "." && $ordner != ".."){
                echo     "
                <li>
                    <span class=\"liste\">    $verzeichnisname $ordner</span>
                    <ul>
                "    ;
                            $pfad = openDir("$verzeichnisname/$ordner");
                        while (    $datei = readDir($pfad)){
                                $dateiname = substr($datei,0,-5);
                            if (    $datei != "." && $datei != "..") {
                                echo     "<li> <a href=\"?$verzeichnisname/$ordner/$datei\" onclick=\"ladeInhalt()\" class=\"button\">$dateiname</a> </li>";
                            }
                        }
                echo     "
                    </ul>
                </li>
                "    ;
            }
        }
            closeDir($verzeichnis);
            closeDir($pfad);
    }
         ?>
    LadeInhalt.php
    PHP Code:
    <script type="text/javascript">
     function ladeInhalt(){
        <?php
                //Ausgabepuffer aktivieren
            //alles was jetzt kommt, wird in den Puffer geschrieben, anstatt es an den Browser zu senden
                ob_start();
                //Datei einbinden
                $url = $_SERVER["REQUEST_URI"];
                $inhalt = explode("?", $url);
                //echo $inhalt[0]."<br>";
            //echo $inhalt[1]."<br>";
                include($inhalt[1]);
                //Die im Puffer gespeicherte Ausgabe der Datei in einer Variablen Speichern
            //Und Pufferung beenden
                $txt=rawurlencode(ob_get_clean());
            ?>
        //Verarbeitung der PHP-Variablen per JS
        document.getElementById('ladeInhalt').innerHTML = unescape('<?php echo $txt;?>');
     }
    </script>
    Tags: None
  • #2
    PHP wird nur auf dem Server ausgeführt. Einmal, wenn die Seite angefordert wird. Also wird, wenn die index.php angefordert wird, der PHP-Code der komplette Code aus der index.php, der ladeinhalt.php und der steuerung.php in "einem Rutsch" bei dieser Anforderung ausgeführt.So wie du das benutzt, im Javascript, macht das keinen Sinn.

    Du hättest auch alle Inhalte statisch in die Seite aufnehmen können und nur mit CSS visible/nicht visible ändern können. Hier wird nichts nachgeladen, nur eine extrem unständlich Art die Seite aufzubauen. Schau dir den erzeugten Quelltext an.
    Nutze AJAX um die Inhalte dynamisch nachzuladen.

    Das das ganze nur eine Sekunde angezeigt wird, liegt vermutlich an deinem

    href=\"?$verzeichnisname/$ordner/$datei\"

    Das wird nicht existieren (wenn das eine PHP-Ausgabe sein soll, fehlt das Tag und das echo; ein href mit einem ?) und die Seite wird neu geladen
    Zuletzt editiert von Christian Marquardt; 14.04.2016, 12:09.
    Christian

    Comment

    • #3
      Hallo,
      danke für dein Tipp mit AJAX, damit hat es funktioniert. Jetzt hab ich nur noch ein Problem.

      Die HTML Seite die nachgeladen wird enthält CSS und JS Dateien, die eingebunden werden.
      Jedoch steht in der Konsole, dass die Dateien nicht gefunden werden können.
      Anscheint hab' ich ein falschen Pfad angegeben, aber das kann eigentlich nicht sein.



      Meine Ordnerstruktur:
      Code:
      # htdocs(localhost)
     # Medieninformatik 2
          # CSS - Stylesheet
               - Canvas.css
               - index.css
          # IMG - Image
               - HTML - Tabelle.PNG
               - JS - Priorität von Operatoren.PNG
          # JS - JavaScript
               - ajax.js
               - ...
          # Labor
              # 01
               - Aufgabe01.html
               - ...
              # 02
               - ...
          # PHP - Hypertext Preprocessor
               - Steuerung.php
           - 404.html
           - index.php
           - Startseite.html
      Ajax.js
      Code:
      /**
 *	@param id: Wohin soll die Daten eingefügt werden.
 *	@param seite: Von wo wir die Daten bekommen.
 */
function ladeInhaltNach(id, seite){
	var xml = new XMLHttpRequest();
	xml.open("GET", seite, true);
	xml.send();
	
	xml.onreadystatechange = function() {
		if(xml.readyState == 4 && xml.status == 200) {
			document.getElementById(id).innerHTML = xml.responseText;
		} else if(xml.status == 404) {
			document.getElementById(id).innerHTML = "404.html";
		}
	}
}
      EDIT's in Steuerung.php
      PHP Code:
      echo "<li> <a onclick=\"ladeInhaltNach('nachgeladenerInhalt', '$verzeichnisname/$ordner/$datei')\" class=\"button\">$dateiname</a> </li>"; 
      EDIT's in index.php
      PHP Code:
      <head>
            ...
            <!--JS - JavaScript-->
            <script text="JavaScript" src="JS%20-%20JavaScript/ajax.js"></script>
      </head>
      <body>
         ...
          <!-- Steuerung -->
          <div id="steuerung">
              <a onclick="ladeInhaltNach('nachgeladenerInhalt', 'Startseite.html')" class="start-button">Startseite</a>
              <?php
                        include("PHP - Hypertext Preprocessor/Steuerung.php");
                  echo       steuerung();
                    ?>
          </div>

          <!-- Inhalt -->
          <div id="inhalt">
              <span class="ueberschrift">Inhalt<br></span>
              <div id="nachgeladenerInhalt"></div>
          </div>
         ...
      </body>
      LadeInhalt.php wurde gelöscht.

      Hier eine Beispielaufgabe:
      Aufgabe05.html
      Note: Ich hab' bei der CSS und JS Datei, die eingebunden sind, mehrere Pfade getestet!
      HTML Code:
      <!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Aufgabe 05</title>
    <!--CSS - Stylesheet-->
    <link rel="stylesheet" type="text/css" href="Medieninformatik%202/CSS%20-%20Stylesheet/Canvas.css">
    <!--JS - JavaScript-->
    <script text="JavaScript" src="Medieninformatik%202/JS%20-%20JavaScript/QuadratzahlenTabelle.js"></script>
</head>
<body>

    <div>
        <canvas id="myCanvas"> <!-- Styles niemals an dieser Stelle! -->
            Kein Canvas Support! O_o
        </canvas>
    </div>

</body>
</html>

      Comment

      • #4
        Beim nachladen per AJAX muss das HTML (und nur das) zurückgegeben werden, was genau an die Stelle kommt die du mit

        document.getElementById(id).innerHTML = xml.responseText;

        spezifiziert hast.

        Schau dir JQUERY an, welches das Handling mit AJAX und ändern im DOM erleichtert
        Christian

        Comment

        Previous template Next
        Working...
        X