PHP PHP Datei in div laden via jQuery

cardinal · 13. November 2014

Wie der Titel schon sagt versuche ich eine PHP Datei mit jQuery in einen Bereich meiner Webpage zu laden. Dies soll in einem bestimmten Intervall immer wieder geschehen.

Dazu versuche ich folgenden Code umzuändern (welcher so auch wunderbar funktioniert):

Code:

<script>
    $(document).ready(
            function() {
                setInterval(function() {
                    var randomnumber = Math.floor(Math.random() * 100);
                    $('#show').text(
                            'I am getting refreshed every 3 seconds..! Random Number ==> '
                                    + randomnumber);
                }, 3000);
            });
</script>

Der Text erscheint alle drei Sekunden mit neuer zufülliger Nummer. Nun möchte ich, dass anstatt des Textes eine PHP-Datei die eine Tabelle enthält immer wieder aktualisiert wird, um alle neu hinzugefügten Einträge zu sehen.
Mein Gedanke war die .load() Funktion von jQuery zu nutzen.
Also ungefähr so:

Code:

<script>
             $(document).ready(
                        function() {
                            setInterval(function() {
                                $('#tabelle').load('tabelle.php')
                            }, 3000);
                        });
</script>

Wie ihr euch denken könnt, wird nichts angezeigt

Das hängt möglicherweise damit zusammen, dass tabelle.php nicht gefunden wird, sicher bin ich mir aber nicht. Ich weiß momentan nicht was falsch läuft.

Für jegliche Tips/Hinweise bin ich dankbar,
Lui

Lawnmower · 13. November 2014

Du suchst das hier: http://api.jquery.com/jQuery.ajax/
Das anstelle das was Du da im 2. Listing bei Zeile 5 geschrieben hast.

Madman1209 · 13. November 2014

Hi,

AJAX Aufruf machen und die Antwort deiner "tabelle.php" entsprechend verarbeitet einfügen. Im Normalfall macht man das mit JSON.

VG,
Mad

cardinal · 13. November 2014

Vielen Dank schon mal

Das Prinzip habe ich verstanden, an der Umsetzung hapert es noch etwas. Ist ein leichter Krampf xD

Gruß,
Lui

Nase · 13. November 2014

Du kannst auch bei load() bleiben. Aber wenn der Pfad zur Datei nicht stimmt, dann stimmt der halt nicht und das wird sich auch nicht ändern, wenn du ajax() benutzt. Außerdem auch hier wieder der Hinweis: Vernünftigen Browser benutzen, der mit guten Entwicklerwerkzeugen ausgeliefert wird oder nachgerüstet werden kann und dann in der (JavaScript-)Konsole schauen, was dort für Fehler gemeldet werden. Ist der Pfad wirklich falsch, würde das dort auftauchen.

Madman1209 · 13. November 2014

Hi,

ganz pseudo-codig gesprochen: dein AJAX aufruf macht es wie ein Browser und ruft einfach die Seite auf. Alles, was auf der Seite steht (also wirklich: Text) wird als Antwort interpretiert. Wenn du also ein JSON formatiertes Objekt ausgibst ist das deine Antwort. Das Ding nimmst du auf jQuery Seite an und dann kannst du ganz regulär damit alles machen, was du damit vorhast.

VG,
Mad

cardinal · 13. November 2014

Nase schrieb:
Du kannst auch bei load() bleiben. Aber wenn der Pfad zur Datei nicht stimmt, dann stimmt der halt nicht und das wird sich auch nicht ändern, wenn du ajax() benutzt. Außerdem auch hier wieder der Hinweis: Vernünftigen Browser benutzen, der mit guten Entwicklerwerkzeugen ausgeliefert wird oder nachgerüstet werden kann und dann in der (JavaScript-)Konsole schauen, was dort für Fehler gemeldet werden. Ist der Pfad wirklich falsch, würde das dort auftauchen.

Also ist es im Prinzip möglich mit load() eine php datei anzeigen zu lassen? nutze ich bspw require() wird die datei zwar angezeigt, aber nicht aktualisiert. Wie würde eine richtige Pfadangabe aussehen?

Madman1209 schrieb:
Hi,

ganz pseudo-codig gesprochen: dein AJAX aufruf macht es wie ein Browser und ruft einfach die Seite auf. Alles, was auf der Seite steht (also wirklich: Text) wird als Antwort interpretiert. Wenn du also ein JSON formatiertes Objekt ausgibst ist das deine Antwort. Das Ding nimmst du auf jQuery Seite an und dann kannst du ganz regulär damit alles machen, was du damit vorhast.

VG,
Mad

Als pseudo-code verstehe ich es auch, die praktische umsetzung ist für mich momentan noch recht schwierig. Aber eure Tips helfen auf jeden Fall! Vielen Dank

Nase · 13. November 2014

_Lui_ schrieb:
Wie würde eine richtige Pfadangabe aussehen?

Wat? Z.B. so "https://www.computerbase.de/forum/showthread.php", oder relativ nur "/forum/showthread.php". Guck in die Konsole, um überhaupt zu klären, was bei dir nicht funktioniert. Außerdem hat die load()-Funktion auch noch die Möglichkeit, sich den Status der Operation anzeigen zu lassen.

Code:

$( "#tabelle" ).load( "ajax/tabelle.php", function(responseText, textStatus, jqXHR) {
  console.log(textStatus);
});

cardinal · 17. November 2014

Also ich habe mich ein wenig mit dem Thema beschäftigt und die, meiner Meinung nach, beste Möglichkeit dies zu verwirklichen wäre das jQuery Plugin dynatable.

Im Beispiel ist die Form der Tabelle per HTML vorgegeben und die eigentlichen Daten werden per AJAX/JSON übergeben und in der Tabelle eingefügt. Soweit so klar. Im Beispiel geschieht dies direkt aus einer statischen JSON Datei.

Ich lese meine Tabelle per PHP aus einer DB, die Tabelle funktioniert.

PHP:

    <table id="main-table">
        <thead>
        <tr>
            <th>Spalte1</th>
            <th>Spalte2</th>
            <th>Spalte3</th>
            <th>Spalte4</th>
            <th>Spalte5</th>
            <th>Spalte6</th>
        </tr>
        </thead>
        <tfoot>
        <tr>
        </tfoot>
        <tbody>

        <!-- DB Ausgabe -->
        <?php

       //Verbindung mit der DB und Auswahl der Daten habe ich rausgenommen, ist ja nicht notwendig

        while ($zeile = mysqli_fetch_array( $db_erg, MYSQL_ASSOC)){
                echo "<tr>";
                echo "<td>". $zeile['w'] . "</td>";
                echo "<td>". $zeile['wa'] . "</td>";
                echo "<td>". $zeile['was'] . "</td>";
                echo "<td>". $zeile['wasd'] . "</td>";
                echo "<td>". $zeile['wasdf'] . "</td>";
                echo "<td>". $zeile['wasdfg'] . "</td>";
                echo "</tr>";
        }
        ?>
        </tbody>
    </table>

Wie schaffe ich es jetzt, dass daraus JSON Daten werden um diese dann mit AJAX weiter zu verarbeiten?

Hiermit lese ich die Daten aus und müsste nur die ajaxUrl ändern um die Daten aus der richtigen Datei auszulesen. Geht dies nur mit einer statischen Datei wie im Beispiel?

HTML:

<script>
$('#main-table').dynatable({
  dataset: {
    ajax: true,
    ajaxUrl: '/dynatable-ajax.json',
    ajaxOnLoad: true,
    records: []
  }
});
</script>

Vielen Dank schon mal für die Hilfe oder Hinweise auf Denkfehler etc,
Lui

Nase · 17. November 2014

JSON beinhaltet üblicherweise keine Formatierung oder Gliederung der Daten, sondern nur den reinen Inhalt. In deinem Fall halt die Daten, die in den Tabellenzellen stehen sollen. Diese Daten holt sich der Browser vom Server und verarbeitet die zu einer Tabelle in deiner Webseite. Dieses dynatable-Plugin nimmt dir auf Clientseite lediglich das Erstellen der Tabelle ab und bringt direkt ein paar Themes mit. Ob du das brauchst, musst du selber wissen. Eben eine Tabelle mit Javascript zu erstellen sind nur ein paar Zeilen Code, dafür braucht es nicht extra ein Plugin.

JSON erstellst du in PHP aus einem Array, das du der Funktion json_encode() übergibst. Den Rückgabewert der Funktion gibst du aus (echo). Der Ajax-Aufruf geht direkt an die PHP-Datei. Dein Array muss so aufgebaut sein, wie es in deinem verlinkten Beispiel aufgeführt wird.

cardinal · 18. November 2014

Danke für die Antwort Nase, ich versuche es einfach mal mit dynatable. Sieht schöner aus und liefert noch ein paar Features

Ich habe mich rangesetzt und es teilweise auch geschafft Daten zu versenden, komme aber momentan nicht weiter.
Wie im Beispiel habe ich versucht die Daten in "records" einzubetten und die beiden Werte "queryRecordCount" bzw. "totalRecordCount". Leider wird nichts angezeigt und ich bekomme folgende Fehlermeldung: "TypeError: $(...).dynatable is not a function". Irgendeine Idee was da los sein könnte? Google hilft mir da nicht soo weiter

Hier mal mein bisheriger Code:

PHP:

                $arr = array(

                    "records"    => [
                    "Spalte1"    => $zeile['w'],
                    "Spalte2"    => $zeile['wa'],
                    "Spalte3"    => $zeile['was'],
                    "Spalte4"    => $zeile['wasd'],
                    "Spalte5"    => $zeile['wasdf'],
                    "Spalte6"    => $zeile['wasdfg'],
                    ],
                    "queryRecordCount"  => $queryRecord,
                    "totalRecordCount"  => $totalRecord

                );
                echo json_encode($arr);

Hier die Tabelle:

HTML:

                <table id="main-table">
                    <thead>
                    <tr>
                        <th>Spalte1</th>
                        <th>Spalte2</th>
                        <th>Spalte3</th>
                        <th>Spalte4</th>
                        <th>Spalte5</th>
                        <th>Spalte6</th>
                    </tr>
                    </thead>
                    <tfoot>
                    <tr>
                    </tfoot>
                    <tbody>
                    </tbody>
                    </table>


                <script>
                        $.ajax({
                            url: 'myData.php',
                            success: function (data) {
                                console.log(data);
                                $('#main-table').dynatable({
                                    dataset: {
                                        records: data
                                    }
                                });
                            }
                        });
                </script>

console.log() zeigt folgendes:

HTML:

"{"records":{"Spalte1":"Wert1","Spalte2":"Wert2","Spalte3":"Wert3","Spalte4":"Wert4","Spalte5":"Wert5","Spalte6":"Wert6"},"queryRecordCount":"1","totalRecordCount":"1"}"

Anstatt der geschwungenen Klammern fehlen mir also die eckigen Klammern. Irgendeine Idee wie ich die da rein bekomme?

Danke für die Hilfe!!

Nase · 18. November 2014

Ok, auf die Schnelle:

HTML+JS

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>dynatable</title>
    <link rel="stylesheet" href="jquery.dynatable.css" type="text/css" media="screen">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.dynatable.js" charset="utf-8"></script>
  </head>
  <body>

    <script>

      $(document).ready(function() {

        $.ajax({

          url: "test.php",
          success: function(data) {

            myRecords = $.parseJSON(data);
            $("#dynatable").dynatable({

              dataset: {
                records: myRecords
              }

            });

          }

        });

      });

    </script>

    <table id="dynatable">
      <thead>
        <th>Spalte1</th>
        <th>Spalte2</th>
      </thead>
      <tbody>
      </tbody>
    </table>

  </body>
</html>

PHP:

Code:

<?php
    
  $response = array(array("spalte1" => "Test", "spalte2" => "Test2"), array("spalte1" => "Test", "spalte2" => "Test2"));
  echo json_encode($response);

cardinal · 20. November 2014

Was ein Krampf!

Also erstmal vielen Dank für deinen Code, der hat mich sehr weitergebracht!

Nase schrieb:

Ok, auf die Schnelle:
HTML+JS

Code:

<!DOCTYPE html>
    <script>

      $(document).ready(function() {

        $.ajax({

          url: "test.php",
          success: function(data) {

            myRecords = $.parseJSON(data);
            $("#dynatable").dynatable({

              dataset: {
                records: myRecords
              }

            });

          }

        });

      });

    </script>

Vorab mal eine Verständnisfrage: Wieso parseJSON? Die Daten kommen doch schon als JSON an, oder nicht?

Leider wird bei dir und auch bei mir die Tabelle ohne Formatierung ausgegeben und ich kriege einfach nicht raus wieso?
Die einzelnen Überschriften der Spalten sind weiß und obwohl die .js und .css Datei richtig eingebunden sind, sieht es immer gleich aus.

Bei mir hängt es jetzt noch daran, die Daten richtig formatiert an die Tabelle zu versenden. Gebe ich die Daten wie bei dir richtig vor, läuft alles ordentlich. Da ich die Werte jedoch aus einer DB auslese, klappt dies nur, wenn die Datenbank mit nur einem bestimmten Datensatz gefüllt ist. Sind es mehr als einer, klappt das Zusammenfügen der "Zeilen" nicht.

Hier mal mein Code:

PHP:

while ($zeile = mysqli_fetch_array($db_erg, MYSQL_ASSOC)) {

                    $arr1 = array(
                            "Spalte1" => $zeile['w'],
                            "Spalte2" => $zeile['wa'],
                            "Spalte3" => $zeile['was'],
                            "Spalte4" => $zeile['wasd'],
                            "Spalte5" => $zeile['wasdf'],
                            "Spalte6" => $zeile['wasdfg']
                    );

                    $arr2 = $arr1;
                    $arr3 = $arr1 += $arr2;
                    $response = array($arr3);

                    echo json_encode($response);

Komischerweise kommt in der Konsole folgendes raus:

HTML:

<!-- Ist jetzt verkürzt um nur zu veranschaulichen wie es aufgebaut ist-->

[{"Spalte1":"Wert1","Spalte2":"Wert2"}][{"Spalte1":"Wert1","Spalte2":"Wert2"}]

Ich dachte, so werden die Arrays einem weiteren Array als Werte hinzgefügt. Wo ist mein Denkfehler? Oder der Fehler im Allgemeinen?

Vielen Dank für die Mühe!!

Nase · 20. November 2014

parseJSON macht aus einem JSON-formatierten String wieder ein Array. Das Plugin erwartet wohl ein Array, daher muss das erst noch wieder zurückgewandelt werden. JSON dient hier lediglich dem Datenaustausch zwischen Client und Server.

Um das Aussehen der Tabelle musst du dich selber kümmern. Schau mal in die mitgelieferte CSS-Datei rein, da werden nur allgemeine, Layout-bezogene, Dinge durchgeführt (Ausnahme ist die weiße Schrift im thead - die sollte da eher nicht rein).

Bei deinem PHP-Teil: Was soll das mit arr2 und arr3? Definiere vor der while-Schleife ein leeres Array (wegen mir $response = array()) und mach innerhalb der Schleife die Zuweisung.

Code:

$response = array();

while(mysql...) {

  $response[] = array("Spalte1" => $zeile["w"], "Spalte2" => $zeile["wa"], ...);

}

echo json_encode($response);

cardinal · 20. November 2014

Okay, dann macht mir parseJSON jetzt auch Sinn

---------
Das hatte ich schon versucht, die Formatierung funktioniert so leider auch nicht, weswegen auch immer. Ich hatte gedacht, die Werte bei jedem Durchlauf der while-Schleife direkt in ein Array zu speichern und bei jedem weiteren Durchlauf anzuhängen. Daher $arr2 und $arr3

Mache ich es so wie von dir beschrieben, kommt folgendes Ergebnis:

HTML:

[{"Spalte1":"Wert1","Spalte2":"Wert2",...}]
[{"Spalte1":"Wert1","Spalte2":"Wert2",...},{"Spalte1":"Wert1","Spalte2":"Wert2",...}]"

,{"Spalte1":"Wert1","Spalte2":"Wert2",...}]" ist der zweite Datensatz in der DB. Also der letzte Teil des Ergebnisses

Nase · 20. November 2014

Ja, ist doch genau richtig so.

cardinal · 20. November 2014

Sorry, ich bin blind gewesen ...
Ich hatte echo json_encode($response); beim rumprobieren wohl innerhalb der while-schleife eingefügt.
Es funtioniert jetzt alles!! ;P

Vielen vielen Dank! Jetzt nur noch automatisch aktualisieren und gut ist

Setze ich mich mal ran!

Edit:

Habs jetzt zum Aktualisieren gebracht und es wird alles richtig angezeigt. Ich dachte, ich teile mal den Code, falls wer das gleiche Probem hat!

HTML:

<script>
    $(document).ready(function() {
        setInterval(function() {
            $.ajax({
                url: "myStuff.php",
                success: function(data) {
                    console.log(data);

                    //Daten wieder in Array umwandeln
                    var myRecords = $.parseJSON(data);

                    //Cached das dynatable-Objekt
                    var dynatable = $('#dynatable').dynatable({
                        dataset: {
                            records: myRecords
                        }
                    }).data('dynatable');

                    //myRecords wird als originalRecords festgelegt
                    dynatable.settings.dataset.originalRecords = myRecords;

                    //Tabelle aktualisieren (DOM)
                    dynatable.process();
                }
            });
        }, 3000);
    });
</script>

Wenn mir jetzt wer sagen könnte, wieso dynatable ohne Layout bzw. Design angezeigt wird, wäre ich sehr dankbar

Gruß,
Lui

Nase · 24. November 2014

_Lui_ schrieb:
Wenn mir jetzt wer sagen könnte, wieso dynatable ohne Layout bzw. Design angezeigt wird, wäre ich sehr dankbar

Siehe Post #14.

skyfloy · 30. Dezember 2015

Guten Morgen,

darf ich zu diesem Thema mal weitermachen?? Ich habe ein PHP Array und will es ausgeben. Die Tabelle bleibt aber leer. Mein Code in PHP:

PHP:

$ArrayAusgabe[] = array("Schule"	=>	$zeileAbfrage['Schule'],
				      "PLZ"	=>	$zeileAbfrage['PLZ'],
					"Ort"		=>	$zeileAbfrage['Ort'],
					"Strasse"	=>	$zeileAbfrage['Strasse'],
					"Telefon"	=>	$zeileAbfrage['Telefon']);

mein Javascript:

Code:

	var myRecords = $.parseJSON('<?php echo json_encode($ArrayAusgabe); ?>');
	console.log(myRecords);

	var dynatable = $('#dynatable').dynatable({
		dataset: {
			records: myRecords
		}
	}).data('dynatable');

Ausgabe aus der console.log:

Code:

  [
      0: {
         [functions]: ,
         __proto__: { },
         Ort: "Freiburg",
         PLZ: "79110",
         Schule: "Muster-Schule",
         Strasse: "Auwaldstr. 197c Haus 3",
         Telefon: "07 61 2 02 75 87"
      },
      1: {
         [functions]: ,
         __proto__: { },
         Ort: "Freiburg",
         PLZ: "79110",
         Schule: "Andere Schule im Test",
         Strasse: "Musterstrasse 21",
         Telefon: "0761 202 202"
      },
      length: 2
   ]

Meine Tabelle:

HTML:

<table id="dynatable">
	<thead>
	 <tr>
		<th>Schule</th>
		<th>PLZ</th>
		<th>Ort</th>
		<th>Strasse</th>
		<th>Telefon</th>
	 </tr>
	</thead>
	<tbody>
	</tbody>
</table>

Und dann bekomme ich den Fehler:

Code:

dynatable.settings.dataset.originalRecords = myRecords;

SCRIPT5007: Unable to get property 'settings' of undefined or null reference

Leider gibt die Tabelle keine Daten aus. Habe ich irgendwo einen Denkfehler??

Danke und Gruß

r15ch13 · 30. Dezember 2015

Das keine Daten angezeigt werden liegt wohl daran, dass die Attribute nicht richtig benannt sind: http://www.dynatable.com/#converting-attribute-names
Wenn du die Attribute auf camelCase aenderst, dann sollte es gehen.

HTML:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>Anmelden</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="jquery.dynatable.css" rel="stylesheet">
    </head>
    <body>

        <div class="container">

            <table id="dynatable">
                <thead>
                 <tr>
                    <th>Schule</th>
                    <th>PLZ</th>
                    <th>Ort</th>
                    <th>Strasse</th>
                    <th>Telefon</th>
                 </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

        </div>

        <script src="jquery-1.7.2.min.js"></script>
        <script src="jquery.dynatable.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            //var myRecords = $.parseJSON('<?php echo json_encode($ArrayAusgabe); ?>');
            var myRecords = [
                {
                    "ort": "Freiburg",
                    "plz": "79110",
                    "schule": "Muster-Schule",
                    "strasse": "Auwaldstr. 197c Haus 3",
                    "telefon": "07 61 2 02 75 87"
                },
                {
                    "ort": "Freiburg",
                    "plz": "79110",
                    "schule": "Andere Schule im Test",
                    "strasse": "Musterstrasse 21",
                    "telefon": "0761 202 202"
                },
            ];
            console.log(myRecords);

            var dynatable = $('#dynatable').dynatable({
                dataset: {
                    records: myRecords
                }
            });
        </script>
    </body>
</html>

Den Fehler konnte ich jetzt nicht reproduzieren.

PHP PHP Datei in div laden via jQuery

Lt. Junior Grade

Maître de cuisine

Fleet Admiral

Lt. Junior Grade

Nase

Gast

Fleet Admiral

Lt. Junior Grade

Nase

Gast

Lt. Junior Grade

Nase

Gast

Lt. Junior Grade

Nase

Gast

Lt. Junior Grade

Nase

Gast

Lt. Junior Grade

Nase

Gast

Lt. Junior Grade

Nase

Gast

Newbie

Lieutenant

Ähnliche Themen