Laden verschiedener Textdateien über ein Dropdown-Menü

  • Hallo zusammen,


    ich bin Anfänger was das Thema HTML/JS/CSS angeht und neu hier in diesem Forum und hoffe hier ein paar nette Menschen zu finden, die mir bei einem Thema helfen bzw. mich in die richtige Richtung schubsen könnten.


    Mein aktuelles Problem ist das folgende:


    Ich habe in meinem Navigationsmenü ein Dropdownmenü mit folgenden Dropdown-Items

    Code
    1. <div class="dropdown-menu" aria-labelledby="pagesDropdown" style="font-size:1em">
    2.     <a class="dropdown-item" href="~/Home/Reporting" id="BK_Früh">Report 1</a>
    3. <a class="dropdown-item" href="~/Home/Reporting" id="BanG_Früh">Report 2</a>
    4. <a class="dropdown-item" href="~/Home/Reporting" id="TC_Früh">Report 3</a>
    5. <a class="dropdown-item" href="~/Home/Reporting" id="LS_Früh">Report 4</a>
    6. <a class="dropdown-item" href="~/Home/Reporting" id="BL_Früh">Report 5</a>
    7. <a class="dropdown-item" href="~/Home/Reporting" id="ET_Früh">Report 6</a>
    8. <a class="dropdown-item" href="~/Home/Reporting" id="Rep_Früh">Report 7</a>
    9. </div>


    Mein Ziel ist nun, beim klicken eines der Dropdown-Items jeweils eine andere Textdatei vom Server zu laden und auf der Seite "Reporting" anzuzeigen

    Das generelle Anzeigen einer Textdatei habe ich bereits über ein HTML object wie folgt realisieren können


    Code
    1. <object data="http://SERVER/REPORT1.TXT" type="text/plain" width="750" height="500"></object>


    Wie kann ich das Ganze nun jedoch umsetzen, dass bei klicken eines der Dropdown-Items jeweils eine andere Reportdatei vom Sever geladen und auf der Seite "Reporting" angezeigt wird?


    Ich würde mich freuen, wenn mir Jemand vielleicht eine kurze Hilfestellung zu meinem Problem (das wohl keines ist, wenn man weiß wie man es angehen muss) geben könnte :)

  • Ja, ist keine große Sache. Ich würde es statt mit object einfach mit PHP-include machen und die URL der Textdatei als GET-Parameter übergeben, d. h. die Links nach diesem Schema:

    Code
    1. <a class="dropdown-item" href="~/Home/Reporting?dateiname=report1.txt" id="BK_Früh">Report 1</a>

    Und dann auf der Reporting-Seite so auswerten:

    PHP
    1. <?php
    2. if (isset($_GET['dateiname'])) {
    3. include 'unterverzeichnis/' . $_GET['dateiname'];
    4. } else {
    5. // hier ggf. eine Fehlerbearbeitung
    6. }
    7. ?>

    Dazu musst Du der Reporting-Seite die Endung .php geben.

  • Ja, ist keine große Sache. Ich würde es statt mit object einfach mit PHP-include machen und die URL der Textdatei als GET-Parameter übergeben, d. h. die Links nach diesem Schema:

    Code
    1. <a class="dropdown-item" href="~/Home/Reporting?dateiname=report1.txt" id="BK_Früh">Report 1</a>

    Und dann auf der Reporting-Seite so auswerten:

    PHP
    1. <?php
    2. if (isset($_GET['dateiname'])) {
    3. include 'unterverzeichnis/' . $_GET['dateiname'];
    4. } else {
    5. // hier ggf. eine Fehlerbearbeitung
    6. }
    7. ?>

    Dazu musst Du der Reporting-Seite die Endung .php geben.

    Super und vielen Dank schon mal für deinen Vorschlag.

    Wüsstest du rein interessehalber vielleicht auch wie das mit Javascript umsetzbar wäre?

  • Ja, mit Javascript geht es natürlich auch:

    Auf der Ausgangsseite die Links genau so.

    Auf der Reporting-Seite kannst Du den Dateinamen wie hier beschrieben aus der URL ermitteln:

    https://developer.mozilla.org/…s/Web/API/URLSearchParams

    Wenn du den Dateinamen hast, kannst Du im object-Tag das Attribut data setzen:

    Code
    1. document.querySelector('object').data = 'unterverzeichnis/' + dateiname;

    Würde auch mit Ajax gehen, aber so ist es einfacher.