# Artikelsortierung in HTML Dokument



## mikemichel (26. Februar 2018)

Hallo liebe Webmaster und Programmierer.

Also vorab ich bin kein großer Programmierer, ich kenne mich ein wenig in HTML aus, kann auch was mit CSS anfangen, dennoch bin ich offen für alles.
Folgendes Problem habe ich.

Ich habe eine reine html Seite, auf dieser Seite werden Schauspieler dargestellt, diese stammen dann zum Beispiel aus Deutschland, Russland, Italien usw.
Kommt jetzt ein User und möchte nur Schauspieler aus dem Land Italien auf der Seite sehen, möchte ich dass er dies über eine Drop and Down Liste tätigt, so eine Liste habe ich auch schon gemacht, doch wenn der User drauf klickt, wird er weiter geleitet auf die Datei "schaupieler-italien.html und die anderen Schauspieler sind selbstverständlich ausgeblendet, erst wenn er den zurück Button benutzt oder eine andere Auswahl im Menü tätigt, erscheinen wieder die anderen Schauspieler.
Jetzt möchte ich aber dass der User erst garnicht auf eine weitere Seite weitergeleitet wird, sondern er soll auf dieser Seite bleiben.

Ein Beispiel wäre zum Beispiel hier zusehen: https://www.conrad.de/de/gluehbirne-e27-f1750509.html
Sortieren nach: Preis absteigend oder Preis aufsteigend

Mir geht es darum dass ich nicht noch weitere 20 html Seiten basteln möchte. Wie kann ich das realisieren. Mit PHP, Java ....?

Ich hoffe ihr habt verstanden was ich meine!!


----------



## Sempervivum (26. Februar 2018)

Wenn ich dich richtig verstehe, sollen beim ersten Aufruf der Seite *alle* Schauspieler angezeigt werden und erst durch eine Auswahl gefiltert? Dann lässt es sich relativ leicht mit Javascript realisieren. PHP ist auch eine Möglichkeit und zwar dann, wenn die angezeigten Inhalte umfangreich sind, so dass es angebracht ist, gleich auf dem Server zu filtern und nur die relevanten Inhalte zu laden.


----------



## mikemichel (26. Februar 2018)

Genau das möchte ich. Wie stelle ich das an?


----------



## Sempervivum (26. Februar 2018)

Dazu müsste jeder Schauspieler in einem Container liegen, z. B. einem div. Dann diesem div eine Klasse geben, die die Nationalität angibt, z. B. "en", "it" oder "de". Ein select einrichten und als value ebenfalls diese Kürzel zuweisen. Beim Auswählen im Select dann die richtigen Container anzeigen bzw. ausblenden.
Hier ein einfaches Demo:
https://jsfiddle.net/Sempervivum/ng2c75ta/5/


----------



## mikemichel (26. Februar 2018)

Ok, bekomme ich hin. Der Javascript code kommt in die html seite? Du schreibst jedem Schauspieler einem div geben, anbei siehst du den Quellcode einer html Seite von mir.
Wo bzw. wie müsste der div aussehen? Mir geht es nur darum wo ich den platzieren soll.

Aktuell sehen zum Beispiel die Stars so aus, also der Quellcode in einer html Seite.:


```
<div class="figure">
<p><a href="/olga-cabaeva/olga-cabaeva.html"><img src="/olga-cabaeva/olga-cabaeva1.jpg" alt="Olga Cabaeva" width="160" height="240" border="0"></a><br>
<a href="/olga-cabaeva/olga-cabaeva.html">Olga Cabaeva</a></div>
<div class="figure">
<p><a href="/candy-alexa/pornostar-candy-alexa.html"><img src="/candy-alexa/candy-alexa1.jpg" alt="Candy Alexa" width="160" height="240" border="0"></a><br>
<a href="/candy-alexa/candy-alexa.html">Candy Alexa</a></div>
<div class="figure">
  <p><a href="/ashley-dark/ashley-dark.html"><img src="/ashley-dark/pornostar-ashley-dark1.jpg" alt="Ashley Dark" width="160" height="240" border="0"></a><br>
<a href="/ashley-dark/ashley-dark.html">Ashley Dark</a></div>
```


----------



## Sempervivum (26. Februar 2018)

Dann hast Du ja schon die Container, die Du brauchst. Nur jedem noch die richtige Klasse geben und es wird funktionieren:


```
<div class="figure de">
<p><a href="/olga-cabaeva/olga-cabaeva.html"><img src="/olga-cabaeva/olga-cabaeva1.jpg" alt="Olga Cabaeva" width="160" height="240" border="0"></a><br>
<a href="/olga-cabaeva/olga-cabaeva.html">Olga Cabaeva</a></div>
<div class="figure it">
<p><a href="/candy-alexa/pornostar-candy-alexa.html"><img src="/candy-alexa/candy-alexa1.jpg" alt="Candy Alexa" width="160" height="240" border="0"></a><br>
<a href="/candy-alexa/candy-alexa.html">Candy Alexa</a></div>
<div class="figure gb">
  <p><a href="/ashley-dark/ashley-dark.html"><img src="/ashley-dark/pornostar-ashley-dark1.jpg" alt="Ashley Dark" width="160" height="240" border="0"></a><br>
<a href="/ashley-dark/ashley-dark.html">Ashley Dark</a></div>
<script>
  var schauspieler = document.querySelectorAll(".figure");
  var sel = document.getElementById("selectnat");
  sel.addEventListener("change", function() {
    var nat = sel.options[sel.selectedIndex].value;
    for (var i = 0; i < schauspieler.length; i++) {
      var akts = schauspieler[i];
      if (nat == "alle" || akts.classList.contains(nat)) {
        akts.style.display = "block";
      } else {
        akts.style.display = "none";
      }
    }
  });   
</script>
```
Und das select ganz am Anfang.


----------



## mikemichel (26. Februar 2018)

Ok, danke, werde ich ausprobieren. Ich melde mich dann wieder. Danke schon mal.


----------



## mikemichel (27. Februar 2018)

Super es funktioniert. Jetzt noch eins. Vielleicht ist es besser wenn der Javascript Code nicht auf der html Seite eingebaut ist, sondern extern in eine Datei. Wie muss ich das dann machen?


----------



## Sempervivum (27. Februar 2018)

Ja, das ist kein Problem und zu empfehlen. Das Skript *ohne *das öffnende und schließende <script> und </script> in eine Datei schreiben. Wie man diese einbindet, kannst Du z. B. hier nachlesen:
https://www.html-seminar.de/javascript-einbinden.htm


----------



## mikemichel (27. Februar 2018)

Soweit so gut, leider bekomme ich es nicht hin. Wenn ich in meiner html Seite folgendes eingebe:

*<script src="dateiname.js"></script>*

Nehmen wir mal die Datei mit dem Namen: *dateiname.js

muss diese dann auch hier irgendwo erscheinen?


		Code:
	

<select id="selectnat">
  <option value="alle" selected>Alle</option>
  <option value="de">Deutschland</option>
  <option value="it">Italien</option>
  <option value="gb">Großbritannien</option>
</select>
<div class="schauspieler de">
    Deutscher Schauspieler 1
</div>
<div class="schauspieler de">
    Deutscher Schauspieler 2
</div>
<div class="schauspieler it">
    Italienischer Schauspieler 1
</div><div class="schauspieler it">
    Italienischer Schauspieler 2
</div>
<div class="schauspieler gb">
    Britischer Schauspieler 1
</div><div class="schauspieler gb">
    Britischer Schauspieler 2
</div>

*


----------



## mikemichel (27. Februar 2018)

oder hier:

```
var schauspieler = document.querySelectorAll(".schauspieler");
var sel = document.getElementById("selectnat");
sel.addEventListener("change", function() {
  var nat = sel.options[sel.selectedIndex].value;
  for (var i = 0; i < schauspieler.length; i++) {
    var akts = schauspieler[i];
    if (nat == "alle" || akts.classList.contains(nat)) {
      akts.style.display = "block";
    } else {
      akts.style.display = "none";
    }
  }
})
```


----------



## mikemichel (27. Februar 2018)

Es kuntioniert. Was ich nicht wusste ist, dass die Datei bzw. das hier: *<script src="dateiname.js"></script>
am Ende meines Codes eingebaut werden muss. Ich hatte es die ganze Zeit über dem Code.*


----------



## mikemichel (27. Februar 2018)

Sorry muss doch noch mal was fragen.
Soweit klappt alles , bin wirklich sehr zufrieden. Jetzt noch eine andere Sache, aber keine Ahnung ob das dann etwas größeres ist.
Also ich habe ja diese html Seite mit den Schaupieler, insgesamt befinden sich 25 Schauspieler auf einer html Seite und davon gibt es zur Zeit 22 Stück /Seiten.
Natürlich sind die Nationalitäten der Schauspieler komplett durcheinander.
Was muss ich machen wenn ich auf der ersten Schauspieler Seite (also die, wo ich jetzt das ganze einbaut habe) alle Deutsche anklicke, damit mir auch die deutschen Schauspieler von Seite 17 angezeigt werden und diese auf der erste Seite gezeigt werden?
Verstanden was ich meine?


----------



## Sempervivum (27. Februar 2018)

Ja, verstehe. Ich war bisher davon ausgegangen, dass alle Schauspieler auf einer Seite sind.
Machbar ist das auf jeden Fall, ich überlege mal, wie es am günstigsten geht.
Wichtig wäre dabei zu wissen, ob die Suchfunktion nur auf einer Seite sein soll oder auf allen.
Und wie groß das Datenvolumen einschl. Bildern ungefähr pro Schauspieler ist, ca. x Bilder mit je y kB.
Sind ja immerhin 550 Schauspieler, da kann schon etwas zusammen kommen.


----------



## mikemichel (27. Februar 2018)

das ist die seite goo.gl/Kgi4Q2 es kommen aber immer mehr dazu. was die sortierung angeht, ich würde diese in die navigation mit reinbringen, dann wäre es immer verfügbar, egal auf was für eine seite man gerade ist.


----------



## Sempervivum (27. Februar 2018)

Ich habe mal eine Demo für eine solche Suche über mehrere Seiten gebaut:

```
<select id="selectnat">
        <option value="alle" selected>Alle</option>
        <option value="de">Deutschland</option>
        <option value="it">Italien</option>
        <option value="gb">Großbritannien</option>
    </select>
        <script>
            var pages = [
                "test13-1.html", "test13-2.html"
            ];
            var alledarsteller = $("<div></div>");
            pages.forEach(function (item, idx) {
                $.ajax(item, {
                    success: function (data) {
                        var darsteller = $("<div>" + data + "</div>").find(".figure").css("display", "none");
                        alledarsteller.append(darsteller);
                    }
                });
            });
            $("body").prepend(alledarsteller);
            var sel = document.getElementById("selectnat");
            sel.addEventListener("change", function () {
                var nat = sel.options[sel.selectedIndex].value;
                $(".figure").css("display", "none");
                $(".figure." + nat).css("display", "block");
            }); 
        </script>
```
In das Array pages musst Du deine 22 Seiten eintragen. Diese werden dann über Ajax geladen und in den Container alledarsteller eingetragen. Dieser wird wiederum an Anfang des body hinzu gefügt.
Das Skript benutzt jetzt jQuery, vergiss nicht, dies einzubinden.


----------



## mikemichel (1. März 2018)

Hallo,

jetzt wird es etwas doof.  jQuery, Array und Ajax!!! WOW. Also was ich jetzt gemacht habe. Ich habe den oben genannten Code von dir mit der aktuellen .js Datei ersetzt, dazu habe ich dann hier:

"test13-1.html", "test13-2.html"

meine Seiten ersetzt, also gerade mal zwei Stück, das sind zwei Testseiten, da ich noch nichts Online stellen möchte bevor es nicht 100% funktioniert.
Dazu habe ich noch am Ende meine Darsteller Liste folgendes eingebaut:

<script src="https://code.jquery.com/jquery-latest.js"></script>
 Diese Info habe ich von da: https://www.html-seminar.de/jquery-tutorial.htm

Leider kuntioniert es nicht. Was mache ich flasch? Bitte ich bin kein Profi. DANKE


----------



## Sempervivum (1. März 2018)

Ja, von nichts kommt nichts, irgend wie muss man ja die anderen Seiten laden. Mit PHP wäre es auch nicht einfacher.
Wichtig ist, dass Du jQuery *vor* dem Skript aus Posting #16 einbindest. Wenn es dann immer noch nicht funktioniert, dann öffne die Console und poste etwaige Fehlermeldungen: Strg+Umsch+I oder F12 beim IE.


----------



## mikemichel (1. März 2018)

Es geht, allerdings ist das Design dann voll verhauen. Schau mal hier: goo.gl/oGvYtL das ist die test Seite 1 und hier Testseite 2 goo.gl/2Risij
Auf beiden Seiten ist soweit alles eingebaut was rein soll.
Interessant ist, wenn ich auf der ersten Testseite dann wieder auf Alle klicke, ist kein einziger Star mehr da.


----------



## Sempervivum (1. März 2018)

Ja, das war erst Mal nur eine Demo für die Suche und es ist schon Mal erfreulich, dass diese funktioniert. Man muss das dann noch in das Layout integrieren. Ich arbeite dazu mal etwas aus ...


----------



## mikemichel (1. März 2018)

Super vielen Dank.


----------



## Sempervivum (1. März 2018)

Das war relativ einfach:
Die Darsteller, die auf der Seite schon vorhanden sind, in ein div kapseln und vor diesem div ein weiteres, leeres für die Suchergebnisse anlegen, so:

```
<div id="figures-nat"></div>
                <div id="figures-alfa">
                    <div class="figure rus">
                        <p>
<!-- Hier die vorhandenen Darsteller für den betr. Buchstaben -->
                </div>
```
Und das jQuery so ändern:

```
var pages = [
            "darsteller-to1.html", "darsteller-to2.html"
        ];
        var alledarsteller = $("#figures-nat").css("display", "none");
        pages.forEach(function (item, idx) {
            $.ajax(item, {
                success: function (data) {
                    var darsteller = $("<div>" + data + "</div>").find(".figure").css("display", "none");
                    alledarsteller.append(darsteller);
                    //alledarsteller.html(alledarsteller.html() + data);
                }
            });
        });
        var sel = document.getElementById("selectnat");
        sel.addEventListener("change", function () {
            var nat = sel.options[sel.selectedIndex].value;
            $(".figure").css("display", "none");
            $("#figures-nat .figure." + nat).css("display", "block");
            alledarsteller.css("display", "block")
        });
```
Das mit "Alle" machen wir dann, wenn dies soweit funktioniert.


----------



## mikemichel (1. März 2018)

WOE, hat geklappt. Schau selbst nach.


----------



## Sempervivum (1. März 2018)

Na super. Fehlt noch das "Alle". Sollen dann wirklich alle Darsteller angezeigt werden, von allen Seiten und von A-Z oder nur die Ansicht vom Anfang mit den Darstellern des betr. Buchstabens wieder hergestellt werden?


----------



## mikemichel (1. März 2018)

Wenn Alle, dann so wie es vorher war, also sprich max. 25 Darsteller auf einer Seite. Wenn man wirklich alle auf eine Seite packen würde, da wäre ja die html Seite ewig lang und ganz zu Schweigen von der Ladezeizt.


----------



## Sempervivum (1. März 2018)

Ja, so macht es Sinn. Ist eine Kleinigkeit:

```
var pages = [
            "darsteller-to1.html", "darsteller-to2.html"
        ];
        var alledarsteller = $("#figures-nat").css("display", "none");
        pages.forEach(function (item, idx) {
            $.ajax(item, {
                success: function (data) {
                    var darsteller = $("<div>" + data + "</div>").find(".figure").css("display", "none");
                    alledarsteller.append(darsteller);
                }
            });
        });
        var sel = document.getElementById("selectnat");
        sel.addEventListener("change", function () {
            var nat = sel.options[sel.selectedIndex].value;
            $(".figure").css("display", "none");
            if (nat == "alle") {
                $("#figures-alfa .figure").css("display", "block");
            } else {
                $("#figures-nat .figure." + nat).css("display", "block");
                alledarsteller.css("display", "block")
            }
        });
```


----------



## basti1012 (1. März 2018)

Aber hat auch nachteile jetzt.Wenn ich deutsch anklicke werden 25 stück angezeigt .alles gut .Wenn ich aber mehr deutsche sehen will geht das ja nicht ,dann muß ich die ja selber suchen .Weil auf seite 2 klicken geht ja nicht da ist ja alles wieder durcheinander. Vieleicht könnte man das ja noch ändern?


----------



## Sempervivum (2. März 2018)

Kann ich nicht nachvollziehen: Auf meinen Testseiten werden bei Deutschland 22 und bei USA 42 angezeigt. Bei Deutschland ist das genau das, was auch mein Editor zählt.


----------



## mikemichel (2. März 2018)

Guten morgen. Also es funktioniert, einwandfrei. Ich mache das jetzt mal über meine ganzen 22 Seiten, wird etwas dauern. Melde mich dann nochmal. Jetzt schon einmal Vieeeelen Dank.


----------



## mikemichel (2. März 2018)

Noch was. Ist es sinnvoll diesen Code:

```
<script src="https://code.jquery.com/jquery-latest.js"></script>
```
in meiner html Seite zu belassen?


----------



## Sempervivum (2. März 2018)

Weiß nicht genau. Bei mir waren die CDNs immer sehr zuverlässig, aber ich verwende sie hauptsächlich in Testseiten, wenn es mal schnell gehen soll. Auf einer Produktivseite würde ich es lieber selbst hosten.


----------



## mikemichel (2. März 2018)

Noch eine frage, bevor ich anfange. Keine Ahnung ob sich das in Quere kommt. Ist es schlimm wenn ich jetzt in jede Seite das einbaue:

```
<script src="https://code.jquery.com/jquery-latest.js"></script>
<div id=""></div>
<p>Schauspieler nach Länder sortieren:
  <select id="selectnat">
    <option value="alle" selected>Alle</option>
    <option value="us">Amerika / USA</option>
    <option value="br">Brasilien / Brasil</option>
    <option value="de">Deutschland / Germany</option>
    <option value="h">Ungarn / Hungary</option>
    <option value="rus">Russland / Russia</option>
    <option value="ch">Schweiz / Swizerland</option>
  </select>
</p>
```
Denn viele Gäste kommen ja nicht direkt auf die Startseite der Darsteller sondern zum Beispiel auf Seite 13. Wenn jetzt der oben genannte Code auf Seite 13 nicht drin wäre, wüssten diese garnicht dass man das ganze ja sortieren kann, so müsste der Gast ja erst auf die Startseite der Darsteller.
Verstanden?


----------



## Sempervivum (2. März 2018)

Stimme zu, es ist sicher sinvoll, wenn man die Sortierfunktion auf allen Seiten bereit stellt. Wenn es auf der ersten Seite funktioniert, sollte es auf allen anderen auch gehen.


----------



## mikemichel (2. März 2018)

Habe es geschafft. Schau mal unter http://bit.ly/2HY9tTB nach. Klappt echt wunderbar, habe es in jeder Seite eingebaut und funktioniert auch super.
Jetzt klickt mal aus das Land USA / Amerika von denen habe ich am meisten.
Wie ihr sehen könnt, ist diese Liste extrem lang. 
Kann man da was machen?

Danke


----------



## Sempervivum (2. März 2018)

Ein gängiges Verfahren, das dir sicher auch schon begegnet ist, ist, nur einen Abschnitt der Einträge anzuzeigen und am Ende einen Button "mehr ...". Drückt man drauf, wird ein neuer Abschnitt sichtbar gemacht.


----------



## mikemichel (2. März 2018)

Ja, das ist auch eine Lösung, so in der Art wie bei Twitter, scrollt man ganz runter, dann lädt es automatisch mehr.


----------



## Sempervivum (2. März 2018)

Oder man unterteilt es seitenweise, so wie hier im Forum oder bei der Anfangsanzeige auf deinen Seiten.


----------



## mikemichel (2. März 2018)

Also ich glaube so wie im Post 35, der wäre gut. Mir geht es ja auch um Google, wird dann zum Beispiel bei den amerikanischen Darsteller die ersten 25 Stars auf eine Seite geladen, dann kommt eine zweite Seite mit weiteren 25 amerikanischen Stars. Da fängt es dann wieder an mit der kanonischen Url usw.
Also wenn es so klappt wie du gemeint hast, dann wäre es super. Die Daten sind ja dann nicht sofort geladen, erst wenn man auf mehr klickt, oder?
Es geht mir halt auch um die Größe, vor allem am Anfang, also wenn man das erste mal drauf klickt, später ist es es egal, was die Ladezeit angeht.


----------



## Sempervivum (2. März 2018)

> Also ich glaube so wie im Post 35, der wäre gut.Also ich glaube so wie im Post 35, der wäre gut.


Kein Problem, ist machbar.


> Die Daten sind ja dann nicht sofort geladen, erst wenn man auf mehr klickt, oder?


Leider doch, bei dem aktuellen Verfahren werden ja alle Seiten am Anfang geladen und dann erst gefiltert. Will man das vermeiden, muss man PHP einbeziehen und auf dem Server filtern. Wäre auch kein großes Problem.


----------



## basti1012 (2. März 2018)

Sempervivum hat gesagt.:


> Kann ich nicht nachvollziehen: Auf meinen Testseiten werden bei Deutschland 22 und bei USA 42 angezeigt. Bei Deutschland ist das genau das, was auch mein Editor zählt.




Deutsche habe ich elf und usa  21  .Komischerweisse genau die Hälfte.Jetzt wo die suche auf jeder Seite ist klappt die suche auch ,aber das ergebniss stimmt nicht .wenn nur 1-3 Frauen angezeigt werden ist die verlinkung 1,2,3,4,5,6,7, usw neben den frauen und nicht mehr unten drunter


----------



## mikemichel (3. März 2018)

basti1012 hat gesagt.:


> wenn nur 1-3 Frauen angezeigt werden ist die verlinkung 1,2,3,4,5,6,7, usw neben den frauen und nicht mehr unten drunter


ja, das stimmt, ist aber nicht schlimm. Das ganze hat aber nichts mit dem hier zutun. Diese 1,2,3,4,5, sind meine 22 Seiten die ich insgesamt habe.


----------



## mikemichel (3. März 2018)

Sempervivum hat gesagt.:


> Will man das vermeiden, muss man PHP einbeziehen und auf dem Server filtern. Wäre auch kein großes Problem.


Kann man ja mal versuchen.


----------



## mikemichel (4. März 2018)

Könntest du mir dabei helfen?


----------



## Sempervivum (4. März 2018)

Ich habe da etwas ausgearbeitet:

Javascript (ersetzt das bisherige):

```
var sel = document.getElementById("selectnat");
        var start = 0, number = 10, more;
        function darsteller_holen() {
            var nat = sel.options[sel.selectedIndex].value;
            if (nat == "alle") {
                $("#figures-alfa").css("display", "block");
                $("#figures-nat").css("display", "none");
            } else {
                $.ajax("darsteller-finden-3.php", {
                    data: { nat: nat, start: start, number: number },
                    method: "get",
                    success: function (data) {
                        $("#figures-nat").html($("#figures-nat").html() + data);
                        if ($("#figures-nat span#complete").length > 0)
                            $("#figures-nat #more").remove();
                        else
                            $("#figures-nat").append($("#figures-nat span#more").on("click", darsteller_holen));
                    }
                });
            }
            start += number;
        }
        sel.addEventListener("change", function () {
            start = 0;
            $("#figures-nat").html("");
            more = $('<span id="more">Mehr ... </span>');
            $("#figures-nat").append(more);
            $("#figures-alfa").css("display", "none");
            $("#figures-nat").css("display", "block");
            darsteller_holen();
        });
```
darsteller-finden-3.php:

```
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
?>
<?php
$seiten = ["darsteller-to1.html", "darsteller-to2.html"];
$search = 'figure ' . $_GET['nat'];
$start = $_GET['start'];
$number = $_GET['number'];
$allnodes = [];
foreach ($seiten as $seite) {
    $dom = new DOMdocument();
    $result = $dom->loadHTMLFile($seite, LIBXML_NOWARNING);
    $xpath = new DOMXpath($dom);
    $par = '*/div/div[contains(@class, "' . $search . '")]';
    $nodes = $xpath->query($par);
    foreach ($nodes as $node) {
        $allnodes[] = $node;
    }
}
for ($i = 0, $j = $start; $i < $number && $j < count($allnodes); $i++, $j++) {
    echo $allnodes[$j]->ownerDocument->saveHTML($allnodes[$j]);
}
if ($j >= count($allnodes)) echo '<span id="complete"></span>';
?>
```
HTML sollte so bleiben können, wie es ist.
In diesem Fall musst Du das Array im PHP anpassen.


----------



## mikemichel (5. März 2018)

Verstehe ich gerade nicht. Muss ich den oberen Code gerade mit dem erstezen ? 

```
[QUOTE="Sempervivum, post: 2103847, member: 274250"]Ja, so macht es Sinn. Ist eine Kleinigkeit:
[code]        var pages = [
            "darsteller-to1.html", "darsteller-to2.html"
        ];
        var alledarsteller = $("#figures-nat").css("display", "none");
        pages.forEach(function (item, idx) {
            $.ajax(item, {
                success: function (data) {
                    var darsteller = $("<div>" + data + "</div>").find(".figure").css("display", "none");
                    alledarsteller.append(darsteller);
                }
            });
        });
        var sel = document.getElementById("selectnat");
        sel.addEventListener("change", function () {
            var nat = sel.options[sel.selectedIndex].value;
            $(".figure").css("display", "none");
            if (nat == "alle") {
                $("#figures-alfa .figure").css("display", "block");
            } else {
                $("#figures-nat .figure." + nat).css("display", "block");
                alledarsteller.css("display", "block")
            }
        });
```
[/QUOTE]

[/code]

Und dann eine php Datei mit dem Namen: darsteller-finden3.php auf den Srver hochladen?


----------



## Sempervivum (5. März 2018)

Wie ich schon geschrieben habe, ersetzt das neue Javascript das alte. Hier noch mal mit dem Umfeld, damit Du weißt, wo es hin gehört, d. h. an das Ende des Body:

```
<div align="center" style="width:950px;margin:0 auto; clear:left">
        <img src="./darsteller-to1_files/banner_gross.jpg" alt="DVDuncuts.com" width="950" height="25">
        <div align="left" style="float:left;">
            <p>
                <img src="./darsteller-to1_files/dhl-logo.gif" alt="Lieferung mit DHL" title="Lieferung mit DHL" width="71" height="24">
                <img src="./darsteller-to1_files/deutsche-post-logo.gif" alt="Lieferung mit der Deutschen Post" title="Lieferung mit der Deutschen Post"
                    width="90" height="24">
                <img src="./darsteller-to1_files/packstation-logo.gif" alt="Lieferung an Packstationen" title="Lieferung an Packstationen"
                    width="121" height="24">
                <a rel="nofollow" href="http://www.payforyourporn.org/" target="_blank">
                    <img src="./darsteller-to1_files/payforyouporn-banner.gif" alt="#Pay for your Porn" title="#Pay for your Porn - bezahle für deine Pornos!"
                        width="274" height="24">
                </a>
            </p>
        </div>
        <div align="right" style="float:right;">
            <p>
                <a href="http://feeds.feedburner.com/dvduncuts/TUzl" target="_blank">
                    <img src="./darsteller-to1_files/feed.gif" alt="DVDuncuts.com - Feed abonieren" width="24" height="24">
                </a>
                <a rel="nofollow" href="http://twitter.com/dvduncutscom" target="_blank">
                    <img src="./darsteller-to1_files/twitter.gif" alt="DVDuncuts.com auf Twitter" width="24" height="24">
                </a>
                <a href="https://www.facebook.com/DVDuncutscom-314898495603446/" target="_blank">
                    <img src="./darsteller-to1_files/facebook.gif" alt="DVDuncuts.com auf Facebook" width="24" height="24">
                </a>
                <a href="https://plus.google.com/111578826504656175343" target="_blank">
                    <img src="./darsteller-to1_files/googleplus.gif" alt="DVDuncuts.com auf Google+" width="50" height="24"> </a>
            </p>
        </div>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        var sel = document.getElementById("selectnat");
        var start = 0, number = 10, more;
        function darsteller_holen() {
            var nat = sel.options[sel.selectedIndex].value;
            if (nat == "alle") {
                $("#figures-alfa").css("display", "block");
                $("#figures-nat").css("display", "none");
            } else {
                $.ajax("darsteller-finden-3.php", {
                    data: { nat: nat, start: start, number: number },
                    method: "get",
                    success: function (data) {
                        $("#figures-nat").html($("#figures-nat").html() + data);
                        if ($("#figures-nat span#complete").length > 0)
                            $("#figures-nat #more").remove();
                        else
                            $("#figures-nat").append($("#figures-nat span#more").on("click", darsteller_holen));
                    }
                });
            }
            start += number;
        }
        sel.addEventListener("change", function () {
            start = 0;
            $("#figures-nat").html("");
            more = $('<span id="more">Mehr ... </span>');
            $("#figures-nat").append(more);
            $("#figures-alfa").css("display", "none");
            $("#figures-nat").css("display", "block");
            darsteller_holen();
        }); 
    </script>

</body>

</html>
```



> Und dann eine php Datei mit dem Namen: darsteller-finden3.php auf den Srver hochladen?


Genau, den PHP-Code in diese Datei schreiben.


----------



## EugenioChartres (20. August 2018)

Super es funktioniert. Jetzt noch eins. Vielleicht ist es besser wenn der Javascript Code nicht auf der html Seite eingebaut ist, sondern extern in eine Datei. Wie muss ich das dann machen?


----------

