Beiträge von Sempervivum

Sempervivum

Das kann auch kein Problem sein. Poste mal das Umfeld von dem Ajax und die php-Datei checkdir.php

Sempervivum

ichunddu Ich hatte dich doch gebeten, es zu checken, ob die Daten das sind, was Du brauchst. Und jetzt auf einmal ganz etwas anderes?

Sempervivum

Möglich ist es in jedem Fall, indem man die Dateien lokal editiert und anschließend hochlädt.

Sempervivum

PS: Inzwischen ist mir aufgefallen, dass im Javascript eine Schleife zu viel war. So sollte es besser sein:

Code

    <script>
        $.ajax({
            url: "https://raider.io/api/v1/guilds/profile?region=eu&realm=Norgannon&name=Infinitum%20animus&fields=name,faction,region,realm,profile_url,raid_rankings",
            dataType: "json",
            success: function (output) {
                console.log(output);
                var thehtml = $("#api-template").html()
                    .replace("{name}", output.name)
                    .replace("{faction}", output.faction)
                    .replace("{region}", output.region)
                    .replace("{realm}", output.realm)
                    .replace("{profile_url}", output.profile_url);
                $("#api-content").html(thehtml);
                var thetbody = $("#api-table-body");
                for (var key1 in output.raid_rankings) {
                    var thehtml = $("#api-template-tr").html().replace("{key1}", key1);
                    for (var key2 in output.raid_rankings[key1]) {
                        thehtml = thehtml.replace("{" + key2 + "-world}",
                            output.raid_rankings[key1][key2]["world"])
                            .replace("{" + key2 + "-region}",
                                output.raid_rankings[key1][key2]["region"])
                            .replace("{" + key2 + "-realm}",
                                output.raid_rankings[key1][key2]["realm"]);
                    }
                    thetbody.html(thetbody.html() + thehtml);
                }
            }
        });
    </script>

Alles anzeigen

Sempervivum

Verstehe, da lese ich das:

Zitat

Edit your files in your ftp server using ftp-simple andvisual studio code.

Bedenke, dass man die Dateien nicht wirklich "auf dem Server" editieren kann, sondern dass sie jedes Mal beim Öffnen herunter und beim Speichern wieder herauf geladen werden müssen. Möglicher Weise funktioniert deshalb das Suchen und Ersetzen über mehrere Dateien nicht.

Ist im VS Code ohnehin unbefriedigend gelöst:

Man kann nicht wählen, ob Unterverzeichnisse einbezogen werden sollen.

Man kann nicht wählen, ob alle vorhandenen Dateien oder nur die offenen einbezogen werden sollen.

Sempervivum

Mit den Headern braucht man sich i. allg. nicht zu befassen.

Zitat

aber wie oder besser wo ist die Antwort auf meine abfrage ?

Code

$.ajax({
            url: "https://raider.io/api/v1/guilds/profile?region=eu&realm=Norgannon&name=Infinitum%20animus&fields=name,faction,region,realm,profile_url,raid_rankings",
            dataType: "json",
            success: function (output) {
                // Diese Funktion ohne Name wird aufgerufen, wenn die Abfrage erfolgreich war.
                // Der Parameter output enthält die Antwort auf die Anfrage
                // Das JSON wurde schon dekodiert, d. h. es handelt sich um ein Javascript-Objekt
                console.log(output);

Sempervivum

Zitat

So, habe grad gefunden das man tatsächlich über Visual Studio Code durch mehrere Dateien "suchen und ersetzen" anwenden kann.

Allerdings geht das nicht mit mein FTP Server.

Ich bin nicht direkt Profi für VSC aber ich benutze ihn ebenfalls. Was hat das mit dem FTP-Server zu tun?

Sempervivum

Ich habe da mal etwas zusammen gebaut, und zwar habe ich Templates verwendet, damit Du das HTML einfach an deine Wünsche anpassen kannst. Die URL ist noch statisch, wenn Du die Parameter dynamisch machen willst, muss man das noch ändern.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>JSON-API</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- in den folgenden Templates stehen Platzhalter, die durch die Elemente,
        die von der API geliefert werden, ersetzt werden 
        Beispiel: {name} wird durch "Infinitum animus" ersetzt und ist dann so
        auf deiner Seite sichtbar.
        Das HTML außerhalb der geschweiften Klammern kannst Du anpassen -->
    <template id="api-template">
        <div>Name: {name}</div>
        <div>Faction: {faction}</div>
        <div>Region: {region}</div>
        <div>Realm: {realm}</div>
        <div>Profil: <a href="{profile_url}">Hier klicken</a></div>
        <table>
            <!-- hier den Tabellenkopf statisch einfügen -->
            <tbody id="api-table-body"></tbody>
        </table>
    </template>
    <template id="api-template-tr">
        <tr>
            <td>{key1}</td>
            <td>{normal-world}</td>
            <td>{normal-region}</td>
            <td>{normal-realm}</td>
            <td>{heroic-world}</td>
            <td>{heroic-region}</td>
            <td>{heroic-realm}</td>
            <td>{mythic-world}</td>
            <td>{mythic-region}</td>
            <td>{mythic-realm}</td>
        </tr>
    </template>
</head>

<body>
    <div id="api-content">

    </div>
    <script>
        $.ajax({
            url: "https://raider.io/api/v1/guilds/profile?region=eu&realm=Norgannon&name=Infinitum%20animus&fields=name,faction,region,realm,profile_url,raid_rankings",
            dataType: "json",
            success: function (output) {
                console.log(output);
                var thehtml = $("#api-template").html()
                    .replace("{name}", output.name)
                    .replace("{faction}", output.faction)
                    .replace("{region}", output.region)
                    .replace("{realm}", output.realm)
                    .replace("{profile_url}", output.profile_url);
                $("#api-content").html(thehtml);
                var thetbody = $("#api-table-body");
                for (var key1 in output.raid_rankings) {
                    var thehtml = $("#api-template-tr").html().replace("{key1}", key1);
                    for (var key2 in output.raid_rankings) {
                        for (var key3 in output.raid_rankings[key2]) {
                            thehtml = thehtml.replace("{" + key3 + "-world}",
                                    output.raid_rankings[key2][key3]["world"])
                                .replace("{" + key3 + "-region}",
                                    output.raid_rankings[key2][key3]["region"])
                                .replace("{" + key3 + "-realm}",
                                    output.raid_rankings[key2][key3]["realm"]);
                        }
                    }
                    thetbody.html(thetbody.html() + thehtml);
                }
            }
        });
    </script>
</body>

</html>

Alles anzeigen

Sempervivum

Hast Du denn ein wenig Erfahrung mit Javascript? Wenn gar nicht, wird wohl kein Weg daran vorbeiführen, dir eine Lösung zu geben, obwohl es den Forenregeln widerspricht.

Sempervivum

In dem gelben Fenster sind die Informationen dargestellt, die die API liefert. Prüfe zunächst, ob es die sind, die Du brauchst, und wenn ja, können wir dir dann erklären, wie Du sie auswerten und auf deiner Homepage darstellen kannst.

Sempervivum

Informiere dich über jQuery-load, damit geht das:

http://api.jquery.com/load/

Sempervivum

Besser Code in Textform mit Codetags posten als Bilder: Das </> in der Werkzeugleiste oben.

Zitat

Dies wird -wie erwartet- für alle Überschriften übernommen. Jedoch wollte ich jeweils eine Ausnahme hinzufügen, wo das vorgegebene nicht übernommen wird.

Einfach der betr. Überschrift eine Klasse geben, z. B. "ausnahme" und für diese die abweichenden Regeln definieren:

Code

<h2>Die allgemeine Überschrift</h2>
<h2>Noch eine allgemeine</h2>
<h2 class="ausnahme">Dies ist die Ausnahme</h2>

Und das CSS:

Code

h2 {
    /* die allgemeinen Regeln */
}

h2.ausnahme {
    /* die Regeln für die Ausnahme */
}

Sempervivum

Ich sehe gerade, dass Du auch nach einer Lösung mit CSS gefragt hast. Ist auch kein Problem, aber dann wird es unübersichtlicher und weniger änderungsfreundlich:

HTML

<!doctype html>
<html>

<head>
    <title>Test</title>
    <style>
        input {
            display: none;
        }

        section.container {
            display: none;
        }

        input#all:checked~section {
            display: block;
        }

        input#hund:checked~section.hund {
            display: block;
        }

        input#katze:checked~section.katze {
            display: block;
        }

        input#maus:checked~section.maus {
            display: block;
        }
    </style>
</head>

<body>
    <h1>Filter:</h1>
    <div class="buttons">
        <label for="all">Alle</label>
        <label for="hund">Hund</label>
        <label for="katze">Katze</label>
        <label for="maus">Maus</label>
    </div>
    <input type="radio" name="rdgroup" id="all" checked>
    <input type="radio" name="rdgroup" id="hund">
    <input type="radio" name="rdgroup" id="katze">
    <input type="radio" name="rdgroup" id="maus">
    <section class="container hund">
         <h2>Hunde</h2>
        <h3>Hund 1</h3>
        <h3>Hund 2</h3>
    </section>
    <section class="container katze">
         <h2>Katzen</h2>
        <h3>Katze 1</h3>
        <h3>Katze 2</h3>
    </section>
    <section class="container maus">
         <h2>Mäuse</h2>
        <h3>Maus 1</h3>
        <h3>Maus 2</h3>
    </section>
</body>

</html>

Alles anzeigen

Sempervivum

BTW: Möglicher Weise lässt sich das Ganze noch vereinfachen und übersichtlicher machen, wenn Du das HTML etwas anders arrangierst und jeweils eine Tiergruppe in einen übergeordneten Container legst:

HTML

<!doctype html>
<html>

<head>
    <title>Test</title>
    <script src="http://www.muench-herdecke.de/js/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.buttons a').click(function () {
                $('.container').hide();
                var sAttr = $(this).attr("data-filter");
                if (sAttr == 'all')
                    $('.container').show();
                else
                    $('.' + sAttr).show();
                return false;
            });
        });
    </script>
</head>

<body>
    <h1>Filter:</h1>
    <div class="buttons">
        <a data-filter="all">alle Tiere</a>
        &nbsp;I&nbsp;
        <a data-filter="hund">Hund</a>
        &nbsp;I&nbsp;
        <a data-filter="katze">Katze</a>
        &nbsp;I&nbsp;
        <a data-filter="maus">Maus</a>
    </div>
    <section class="container hund">
         <h2>Hunde</h2>
        <h3>Hund 1</h3>
        <h3>Hund 2</h3>
    </section>
    <section class="container katze">
         <h2>Katzen</h2>
        <h3>Katze 1</h3>
        <h3>Katze 2</h3>
    </section>
    <section class="container maus">
         <h2>Mäuse</h2>
        <h3>Maus 1</h3>
        <h3>Maus 2</h3>
    </section>
</body>

</html>

Alles anzeigen

Sempervivum

Das lässt sich leicht machen: Gib den Überschriften ebenfalls die geeigneten Klassen und beziehe dies beim Ausblenden ein:

HTML

<!doctype html>
<html>

<head>
    <title>Test</title>
    <script src="http://www.muench-herdecke.de/js/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.buttons a').click(function () {
                $('.container, .headline').hide();
                var sAttr = $(this).attr("data-filter");
                if (sAttr == 'all')
                    $('.container').show();
                else
                    $('.' + sAttr).show();
                return false;
            });
        });
    </script>
</head>

<body>
    <h1>Filter:</h1>
    <div class="buttons">
        <a data-filter="all">alle Tiere</a>
        &nbsp;I&nbsp;
        <a data-filter="hund">Hund</a>
        &nbsp;I&nbsp;
        <a data-filter="katze">Katze</a>
        &nbsp;I&nbsp;
        <a data-filter="maus">Maus</a>
    </div>
    <h2 class="headline hund">Hunde</h2>
    <div class="container hund">
        <h3>Hund 1</h3>
    </div>
    <div class="container hund">
        <h3>Hund 2</h3>
    </div>
    <h2 class="headline katze">Katze</h2>
    <div class="container katze">
        <h3>Katze 1</h3>
    </div>
    <div class="container katze">
        <h3>Katze 2</h3>
    </div>
    <h2 class="headline maus">Maus</h2>
    <div class="container maus">
        <h3>Maus 1</h3>
    </div>
    <div class="container maus">
        <h3>Maus 2</h3>
    </div>
</body>

</html>

Alles anzeigen

Sempervivum

Zitat

Ich habe irgendwo gelesen, dass es Viewport auch in CSS gibt und dass man da die Seite im querformat anderst anzeigen kann, wie im hochkanntformat.

Dann bin ich mir ziemlich sicher, dass das, was Du gelesen hast, "orientation" war und dann trifft darauf die Einschränkung zu, dass es nicht von allen Browsern unterstützt wird. Wenn Du sicher gehen willst, dass es in allen Browsern funktioniert, dann ermittle die Orientierung mit Javascript und weise den betr. Elementen eine geeignete Klasse zu. Damit kannst Du sie dann mit CSS gestalten.

Sempervivum

Glückwunsch, dass Du die Lösung gefunden hast. Freut mich zu lesen.

Sempervivum

Ja, das Schlüsselwort lautet "orientation". Offenbar leider nicht von Safari und Android-Browser unterstützt:

https://caniuse.com/#feat=screen-orientation

Sempervivum

Zur Sicherheit habe ich mal gegoogelt: jQuery-document-ready feuert nicht, wenn Inhalte durch Ajax nachgeladen werden:

https://stackoverflow.com/questions/2024…-document-ready

Dies führt zu einem Problem mit dem Javascript, das mitgeladen wird, wo die Eventlistener für Mouseup registriert werden. Offenbar findet das gar nicht statt. Du kannst es überprüfen, indem du in diesem Codeabschnitte ein console.log einfügst.

Lösung, indem Du die Eventlistener ebenfalls im complete-Callback registrierst:

Code

        function smartRefresh() {
            if (typeof (activeBlock) != "undefined") {
                url = "./lib/parade_blockrefresh.php?blockID=" + activeBlock;
            } else {
                url = contentPath + "?" + 1 * new Date()
            }
            $("#refresh.active").load(url, function () {
                if (typeof (left) != "undefined") { $('.block-row-left').scrollLeft(left); }
                if (typeof (middle) != "undefined") { $('.block-row-midddle').scrollLeft(middle); }
                if (typeof (right) != "undefined") { $('.block-row-right').scrollLeft(right); }

                $('.carousel-item.active .block-row-left').mouseup(function () {
                    left = $(this).scrollLeft();
                });

                $('.carousel-item.active .block-row-middle').mouseup(function () {
                    middle = $(this).scrollLeft();
                });

                $('.carousel-item.active .block-row-right').mouseup(function () {
                    right = $(this).scrollLeft();
                });
            });
            $(".popover").popover('hide');
        }

Alles anzeigen

Sempervivum

... oder etwas kürzer ohne doppelten Code:

Code

            function smartRefresh() {
                if (typeof (activeBlock) != "undefined") {
                    url = "./lib/parade_blockrefresh.php?blockID=" + activeBlock;
                } else {
                    url = contentPath + "?" + 1 * new Date()
                }
                $("#refresh.active").load(url, function () {
                        if (typeof (left) != "undefined") { $('.block-row-left').scrollLeft(left); }
                        if (typeof (middle) != "undefined") { $('.block-row-midddle').scrollLeft(middle); }
                        if (typeof (right) != "undefined") { $('.block-row-right').scrollLeft(right); }
                    }
                );
                $(".popover").popover('hide');
            }

Alles anzeigen

Beiträge von Sempervivum

Existierendes Verzeichnis erkennen und entsprechend handeln

API in HTML einfügen

Massenbearbeitungen verschiedene Dateien

API in HTML einfügen

Massenbearbeitungen verschiedene Dateien

API in HTML einfügen

Massenbearbeitungen verschiedene Dateien

API in HTML einfügen

API in HTML einfügen

API in HTML einfügen

Dateien per php verlinken

HTML & CSS mit DIV

nicht benötigte Headlines ausblenden

nicht benötigte Headlines ausblenden

nicht benötigte Headlines ausblenden

Viewport

Scrollposition übergeben funktioniert nicht

Viewport

Scrollposition übergeben funktioniert nicht

Scrollposition übergeben funktioniert nicht