Ergebnis 1 bis 12 von 12
  1. #1
    Insulaner ist offline Jungspund
    registriert
    18-09-2014
    Beiträge
    17

    Smile <DIV ID="..."> per JS OnClick mit Variable füllen

    Hallo JS-Welt!

    Wenn einer Samstagnachmittags nix zu tun hat, kommt er auf solch dumme Gedanken:

    Ich bastle an einer mehrsprachigen Website, deren Layout über CSS läuft und deren Inhalte (Texte, Bilder, in/externe Links) per jQuery komplett aus separaten TXT-Dateien kommen. Will sich ein Besucher den Quelltext ansehen, bekommt er also nur (für die meisten) kryptischen Code zu lesen. Die Site läut ohne PHP oder andere Server-seitige Techniken und das soll auch so bleiben.

    Mein Problem ist bei der bisherigen Version, dass für jeden internen Link die komplette Seite (inklusive Flächen-deckendem Hintergrundbild) geladen werden muss, was gelegentlich zu unschönem Geflacker führt. Es werden gerade mal fünf Seiten aber in vier verschiedenen Sprachen angeboten, was ich bisher so gelöst habe:

    Pro Sprache gibt es ein Verzeichnis (DE, EN, CS, CT), in dem ein HTML und ein TEXT-Verzeichnis angelegt ist. Pro Menüpunkt rufe ich also eine HTML-Seite auf, die sich ihre Texte aus "../text/blabla.txt" holt. So habe ich pro Sprache im Moment fünf HTML-Dateien. Zur Pflege editiere ich also eine HTML-Datei, kopiere sie in die parallel liegenden Verzeichnisse der anderen Sprachen und gut ist.

    Die Inhalte sind in drei Boxen (HTML/CSS-Boxmodell) positioniert.

    Jetzt kommt's: Ich hätte gerne die Möglichkeit pro Sprache genau eine HTML-Seite zu laden und dann die jeweiligen Inhalte per Link aus der selben Seite zu laden. Meine Idee dazu ist bisher, die über DIV ID-Tags angesteuerten Inhalte per Variable aufzurufen. Wenn ich also bisher
    <div id="txtA"><div id="_txtA"></div></div>
    genutzt habe, wobei "txtA" für die Box und "_txtA" für die aufzurufende TXT.Datei steht, würde ich "_txtA" gerne durch eine Variable ersetzen. Der Aufruf soll nur die Box "txtA" mit einem neuem Inhalt füllen, die Seite aber nicht neu laden.

    Gibt es für solch einen Unfug eine sinnvolle Lösung? Ich würde mich freuen!

    Sollte meine Beschreibung nicht nachvollziehbar sein, bitte umgehend motzen :-))

    Vielen Dank vorab!

    Sebastel
    ----------------------------------------------------------------------------
    ob schlau sein hilft, weiß ich nicht, ich bin's nicht ;-(

  2. #2
    Siggi05 ist offline Grünschnabel
    registriert
    04-09-2015
    Beiträge
    8

    AW: <DIV ID="..."> per JS OnClick mit Variable füllen

    Ih versteh zwar nicht so ganz, was du meinst aber wenn du die id ändern möchtest, sollte dir das hier helfen:
    JavaScript/Objekte/DOM/element/setAttribute

    Meinst du, dass du alles in ein Verzeichnis, in dem dann die HTML-Datei und die vier Textdateien packen möchtest und dann anhand von Benutzereingaben die id und somit die auszulesende Datei ändern möchtest?
    Geändert von Siggi05 (13-09-2015 um 11:32 Uhr)

  3. #3
    Insulaner ist offline Jungspund
    registriert
    18-09-2014
    Beiträge
    17

    AW: <DIV ID="..."> per JS OnClick mit Variable füllen

    Hallo Siggi,

    Dein erster Absatz scheint mich auf den richtigen Weg zu schicken. Die Änderung des Attributs soll per Klick auf einen Link erfolgen. Ich denke, das müsste sich so realisieren lassen. Mal schauen...

    Was die Verzeichnisse betrifft, habe mich mich wohl ein bisschen dusslig ausgedrückt, was aber -sollte Dein Ansatz funktionieren- auch nicht mehr wichtig ist.

    Lieben Dank und noch einen schönen Abend!

    Sebastel
    ----------------------------------------------------------------------------
    ob schlau sein hilft, weiß ich nicht, ich bin's nicht ;-(

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.650

    AW: <DIV ID="..."> per JS OnClick mit Variable füllen

    NB: Standardattribute wie id sollte man besser nicht mit setAttribute setzen, sondern direkt:
    Code:
    NODE.id = "wasAuchImmer"
    Ist kürzer und besser zu lesen.

    Aber um Daten nachzuladen, brauchst du die ID eigentlich gar nicht ändern, sondern dir einfach nur die Daten per AJAX holen und dann in das entsprechende <div> schreiben...

  5. #5
    Siggi05 ist offline Grünschnabel
    registriert
    04-09-2015
    Beiträge
    8

    AW: <DIV ID="..."> per JS OnClick mit Variable füllen

    Zitat Zitat von kkapsner Beitrag anzeigen
    NB: Standardattribute wie id sollte man besser nicht mit setAttribute setzen, sondern direkt:
    Code:
    NODE.id = "wasAuchImmer"
    Ist kürzer und besser zu lesen.
    Danke! Ich wusste bisher gar nicht, dass das so auch geht.


    Zitat Zitat von kkapsner Beitrag anzeigen
    Aber um Daten nachzuladen, brauchst du die ID eigentlich gar nicht ändern, sondern dir einfach nur die Daten per AJAX holen und dann in das entsprechende <div> schreiben...
    Na ja, ich denke, dass es doch einfacher wäre, sprachenspezifische Id's zu machen und das ganze schon beim Seitenaufruf zu laden, denn Ajax zu implementieren (oder das Ganze mit jQuery zu machen) ist doch etwas schwieriger als einfach die Id neu zu setzen. Zwar verlängert das das Laden der Seite (was aber bei einem nicht zu großen Projekt und nicht allzu langsamen Browser kein Problem darstellen sollte), aber bei deiner Methode muss ja immer wieder nachgeladen werden und man könnte nicht so schnell zwischen den Sprachen hin und her "switchen".

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.650

    AW: <DIV ID="..."> per JS OnClick mit Variable füllen

    Zitat Zitat von Siggi05 Beitrag anzeigen
    Na ja, ich denke, dass es doch einfacher wäre, sprachenspezifische Id's zu machen und das ganze schon beim Seitenaufruf zu laden, denn Ajax zu implementieren (oder das Ganze mit jQuery zu machen) ist doch etwas schwieriger als einfach die Id neu zu setzen.
    Ja, aber indem du eine ID neu setzt, wird noch gar kein Text geändert...

    Kannst du nicht mal einen Beispiellink geben oder wenigstens etwas Code? Ich verstehen noch nicht ganz, wie dein jetziges System genau funktioniert.

  7. #7
    Insulaner ist offline Jungspund
    registriert
    18-09-2014
    Beiträge
    17

    AW: <DIV ID="..."> per JS OnClick mit Variable füllen

    Hallo KK, hallo Siggi!

    Erstmal Dank für Eure Diskussion! Mir fehlte bis heute die Zeit das Projekt (das ich für einen jungen Kunden schreibe) weiterzuführen und kann erst jetzt antworten.

    @kkapsner: Du schreibst "Standard-Attribute <i>sollte</i> man nicht ...". Mit diesem Verb habe ich so ganz ohne Begründung immer so meine Schwierigkeiten. Magst Du das noch erläutern?

    @Siggi: Das "switchen" zwischen den Sprachen ist gar nicht so sehr das Thema. Aber um das zu erläutern müsste ich hier seitenlange Texte schreiben.

    Ich werde die Seite in einer inhaltlich kastrierten, aber zum Thema kommentierten Version bis heute Abend mal als Demo-Link bereistellen. Vielleicht fällt die Diskussion am "lebenden Objekt" ja leichter ;-)

    Bis später!

    Sebastel
    ----------------------------------------------------------------------------
    ob schlau sein hilft, weiß ich nicht, ich bin's nicht ;-(

  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.650

    AW: <DIV ID="..."> per JS OnClick mit Variable füllen

    Zitat Zitat von Insulaner Beitrag anzeigen
    Magst Du das noch erläutern?
    Ich persönlich finde
    Zitat Zitat von kkapsner Beitrag anzeigen
    Ist kürzer und besser zu lesen.
    eigentlich schon ausreichend, aber zusätzlich hat man auch Browserinkompatibilitäten, wenn man damit Eventlistener setzten will:
    javascript - Why does an onclick property set with setAttribute fail to work in IE? - Stack Overflow
    When to use setAttribute vs .attribute= in JavaScript? - Stack Overflow

  9. #9
    Siggi05 ist offline Grünschnabel
    registriert
    04-09-2015
    Beiträge
    8
    Ich würde anstatt von den Textdateien eine JavaScript-Datei mit den verschieden Sprachen als Variablen speichern:
    Code:
    var deutsch = "Dies ist ein deutscher Text";
    var englisch = "This is an english text";
    Diese werden dann bei Seitenaufruf geladen und können dann beliebig in das Element geschrieben werden.
    Code:
    aendern()
    {
    switch(ELEMENT.id)
    {
    case "deutsch":
    ELEMENT.innerHTML = deutsch;
    break;
    case "englisch":
    ELEMENT.innerHTML = englisch;
    break;
    }
    }
    Und hier ändere ich nicht die ID, sondern das HTML im Tag. Und ja, mit ID's ändern allein würde es nicht gehen.
    Ist mir erst gerade aufgefallen...

  10. #10
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.650

    AW: <DIV ID="..."> per JS OnClick mit Variable füllen

    Damit kann es aber passieren, dass man viel mehr Daten lädt, als man benötigt. Je nach Textlängen kann das durchaus bemerkbar sein.

  11. #11
    Siggi05 ist offline Grünschnabel
    registriert
    04-09-2015
    Beiträge
    8

    AW: <DIV ID="..."> per JS OnClick mit Variable füllen

    Wenn der Text so lang ist, wie du es sagst, merkt man aber auch beim Umstellen der Sprache eine Verzögerung.

  12. #12
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.650

    AW: <DIV ID="..."> per JS OnClick mit Variable füllen

    ... was mich als Nutzer aber weniger stören würde als eine lange Ladezeit.

Ähnliche Themen

  1. Antworten: 1
    Letzter Beitrag: 05-04-2015, 23:15
  2. Antworten: 3
    Letzter Beitrag: 16-06-2013, 23:37
  3. Antworten: 6
    Letzter Beitrag: 25-09-2009, 19:50
  4. Antworten: 3
    Letzter Beitrag: 14-10-2008, 14:15
  5. Antworten: 0
    Letzter Beitrag: 10-07-2007, 14:40

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •