JavaScript Weiche

racoon · September 27, 2009, 11:55am

Hallo zusammen,

ich bin grad am grübeln, wie ich die enorm unterschiedlichen anforderungen mit und ohne JS umsetzen kann. Denn eine Mischung von deinem in einem Template ist zunehmen komplexer.

ideal wäre, wenn ich vor dem aufruf einer include (Beispiel: [{include file=“xy.tpl” }] )per [{IF}]-Abfrage das ensprechende Template mit oder ohne JS aufrufen könnte.

Die Idee ist nun zu beginn immer abzufragen, ob JS aktiv ist. Diese Information wird in eine Variable gespeichert und seht nun der IF Abfragen zur Verfügung.

Geht das überhaupt, wie ich mir das ausgedacht habe? Oder sind die Variablen vom Smarty nicht mit den JS variablen “kompatibel”.

Wenn das so nicht klappen sollte, hat sonst jmd ne Lösung, wie die includes abhängig von JS (ja oder nein) aufgerufen werden können.

avenger · September 27, 2009, 3:20pm

Javascript-Variablen hast Du sicher [B]nicht [/B]in dem Template zur Verfügung…

Du brauchst beim Programm-Start eine Javascript-Erkennung im Browser…

Mit Hilfe eines geeigneten kleinen HTML-Proggies, das man dann als erstes zum Browser schickt, kann man ermitteln, ob Javascript aktiv ist oder nicht.

Das Ergebnis dieser Erkennung kannst Du dann in der Session speichern (z.B. als Session-Variable “[B]js_active[/B]” mit dem Wert “true” oder “false”, je nach Ergebnis der Javascript-Prüfung).

Im Template kann man diese Variable dann mit “[{if $smarty.session.[B]js_active[/B]}]” abfragen.

racoon · September 27, 2009, 5:32pm

hi avenger,

ja sowas sollte ich später definitiv haben, um die templates übersichtlich zu halten.
Hast du so was schon im einsatz? kaufbar?

MBa · September 27, 2009, 7:31pm

[QUOTE=racoon;14915]
ja sowas sollte ich später definitiv haben, um die templates übersichtlich zu halten.
[/QUOTE]

Ich bezweifel, dass diese Rechnung aufgeht. Würde eher sagen, dass dies verwirrender wird.
Die Entwicklung geht zwar so uU. ein wenig schneller, aber IMHO bekommst Du so eine höhere Redundanz. Das Debugging dauert dann entsprechend länger und wird dann einfach nur eine Belastungsprobe für die Nerven.

Damals hatte man so etwas für die verschiedenen Browserversionen gemacht. Heute macht man das nicht mehr, obwohl die alten Browser von damals immer noch unterwegs sind. Dies hat seine Gründe.

Mir fällt kein Grund ein, warum man zwei Templates benutzen muß.
Wenn Du ein Formular per JS abschicken möchtest, dann kannst Du den Butten per noscript-Tag wegmachen.
Komplexere Bereiche kann man auch mit ein document.load bzw. ready Listener per Javascript und CSS anpassen.
Hat sogar den Vorteil, dass Du hier noch zusätzlich die exakte Browserversion bekommen kannst. Ausserdem kannst Du dann prüfen ob die gewünschte JS-Funktion überhaupt existiert bzw. ob Du dafür active-x nehmen musst.

Lese Dir dies mal Durch.
Dann sollte die Möglichkeiten der Trennung von Javascript und HTML ein wenig verständlicher sein.

Für richtig wilde Sachen empfehle ich Dir ein Framework. Spart auf dauer eine Menge Zeit und Browserinkompatibilitäten werden auch meistens abgefangen.
JQuery hat meiner Meinung die einfachste Syntax und ist schon sehr mächtig.

racoon · September 28, 2009, 8:32am

Vielen Dank für Dein Input!

Wenn Du ein Formular per JS abschicken möchtest, dann kannst Du den Butten per noscript-Tag wegmachen.

per noscript-tag wegmachen? hast du mir hierfür auch ein beispiel? (link)

Deinen anderen Link werde ich heute abend in Ruhe durchlesen. Danke!

PS: Ich arbeite in manchen Templates viel mit position: absolute. Ist das von der “Konvention” her trotzdem ok?
ohne css würde es halt bissl schräg aussehen.

avenger · September 28, 2009, 10:22am

[QUOTE=racoon;14931] PS: Ich arbeite in manchen Templates viel mit position: absolute. Ist das von der “Konvention” her trotzdem ok?[/QUOTE]
Position absolut sollte man m.E. sehr sparsam und nur wenn unbedingt notwendig verwenden.

Weil Du bei Änderungen im Layout halt alles neu explizit positionieren musst.

Du solltest die Elemente so weit wie möglich in ihrem natürlichen Seitenfluss lassen.

avenger · September 28, 2009, 10:25am

[QUOTE=racoon;14915]Hast du so was schon im einsatz? kaufbar?[/QUOTE]
Ja, habe ich für meine AJAX-Geschichte…

Aber da wir hier ja noch andere Mitglieder haben, die alles über AJAX wissen, sollen die auch mal Gelegenheit bekommen, sich zu profilieren, und Dir dafür eine Lösung anbieten…

Wenn Du aber, sagen wir mal in einer Woche, von daher noch keine Lösung hast, stelle ich Dir gerne meine zur Verfügung.

Und sogar kostenlos.

Erinnere mich dann noch mal dran.

MBa · September 28, 2009, 10:27am

Ok. Schematisch


<form ....>
  <select onchange="this.form.submit()"...><!--onchange: Wenn Eintrag geändert, dann wird dieses Formular per JS gesendet -->
    <option>test</option>
    ....
  </select>
  <noscript><!--Dieser Bereich wird nur ohne JS angezeigt. So bleibt die Seite mit und ohne JS bedienbar... sieht ohne Button halt besser aus -->
    <input type="submit" />
  </noscript>
</form>

Deinen anderen Link werde ich heute abend in Ruhe durchlesen. Danke!

Wenn Du Zeit hast und englisch kannst schau mal hier.
Die Videos mit Douglas Crockford sind wirklich empfehlenswert.

PS: Ich arbeite in manchen Templates viel mit position: absolute. Ist das von der “Konvention” her trotzdem ok?
ohne css würde es halt bissl schräg aussehen.

Dafür ist CSS da. Hat aber auch seine Nachteile (s.o.). Das musst Du wohl von Fall zu Fall abwägen.

… und nach dem gleichen Prinzip wie CSS sollte auch JS eingesetzt werden.
CSS-HTML: Trennung von Inhalt und Aussehen.
JS-HTML: Trennung von Inhalt und Verhalten.

racoon · September 28, 2009, 6:10pm

[QUOTE=avenger;14937]Ja, habe ich für meine AJAX-Geschichte…

Aber da wir hier ja noch andere Mitglieder haben, die alles über AJAX wissen, sollen die auch mal Gelegenheit bekommen, sich zu profilieren, und Dir dafür eine Lösung anbieten…

Wenn Du aber, sagen wir mal in einer Woche, von daher noch keine Lösung hast, stelle ich Dir gerne meine zur Verfügung.

Und sogar kostenlos.

Erinnere mich dann noch mal dran.[/QUOTE]

das ist ein wort

aktuell bringe ich die JS inhalte im script per
[B]document.writeln (“html code”);[/B]
an Ort und Stelle. Wenn der Besucher kein Script aktiviert hat wird im [B]<noscript>[/B] Bereich die Alternative dargestellt.

Wenn das so in Ordnung ist und nicht gegen jeglicher Codermanier verstößt würde ich das so beibehalten. Wie betrachtest du diese lösung?

Muss mal schauen, inwiefern ich MBa’s Lösungsansatz integrieren kann. Ist selbstverständlich “bissl” feiner

Danke Euch beide für die Anregungen!

Udo · October 9, 2009, 11:21am

[QUOTE=racoon;14962]das ist ein wort

aktuell bringe ich die JS inhalte im script per
[B]document.writeln (“html code”);[/B]
an Ort und Stelle. Wenn der Besucher kein Script aktiviert hat wird im [B]<noscript>[/B] Bereich die Alternative dargestellt.

[/QUOTE]

Sorry, dieses Vorgehen stammt aus der JS-Steinzeit. Ich würde Dir dringend empfehlen, Dich mal mit jQuery oder einem anderen JS-Framework auseinanderzusetzen.
Das spart eine Menge Arbeit, schützt vor Browser-Inkompatibilitäten und hält Deinen Code übersichtlich. JS im Template ist “Pfui”!

Nichts für ungut, Udo.

racoon · October 9, 2009, 8:46pm

Hallo Udo,

einige der jquery anwendungen haben das problem, dass ein button keine funktionalität mehr hat sobald JS deaktiviert ist.

Hab mich ausführlich mit jquery befasst und damit rumexperimentiert - werde ich auch weiterhin machen, doch mein problem hat es nicht gelöst.

Ein Button, der bei Klick ein div anzeigt und bei deaktiviertem JS auf eine andere seite weiterleiten wird habe ich jedoch nicht gefunden. so was suche ich.

MBa · October 9, 2009, 8:56pm

Das hat nichts mit jQuery zu tun.
Die Demoapplikationen von jQuery haben so etwas natürlich nicht. Warum auch, um zu sehen, was möglich ist, reicht das völlig aus.

Versuche doch einfach mal jQuery. Kann ich auch nur empfehlen.


<a href="andere Seite" onclick="$('showme').css('display','block');return false;">so etwas?</a>
<div style="display:none" id="showme">hier ist Inhalt</div>

Aber wie man Aktionen mittels eines Events in JS verhindert hatten wir doch schon mal.

racoon · October 10, 2009, 12:55pm

Hallo Markus,

dein Beispiel krieg ich nicht ins laufen.
Was macht das[B] .css[/B].
Bedeutet es, dass display=block übergeben wird?

Den Ansatz mit onclick kannte ich noch nicht bei jquery.Nur das klassische href ="#". Und hier ist das Problem, dass wenn JS deaktiviert ist - die Verlinkung nicht mehr geht.

Mit onclick kann eine deaktiviertes JS durch<[B]a href=“link”[/B] weiterverlinkt werden?
Klasse Ding, wenn das geht.

In den paar Zeilen stecken jedoch einige Sachen, die ich nicht kenne. Deshalb recht tricky es zu verstehen. Werde aber ein paar Tuts zu jquery suchen. Gruß

PS: Ok, hab mich nun ein wenig eingelesen und es geht so wie du es beschrieben hast. Danke.

avenger · October 10, 2009, 1:05pm

[QUOTE=MBa;15754]Das hat nichts mit jQuery zu tun.
Die Demoapplikationen von jQuery haben so etwas natürlich nicht. Warum auch, um zu sehen, was möglich ist, reicht das völlig aus.

Versuche doch einfach mal jQuery. Kann ich auch nur empfehlen.


<a href="andere Seite" onclick="$('showme').css('display','block');return false;">so etwas?</a>
<div style="display:none" id="showme">hier ist Inhalt</div>

Aber wie man Aktionen mittels eines Events in JS verhindert hatten wir doch schon mal. ;)[/QUOTE]
Warum man für so eine triviale Geschichte mehrere jQuery-Schichten durchlaufen soll, verstehe ich nun nicht unbedingt.

onclick="document.getElementById('showme').style.display='block';return false;"

leistet das gleiche, aber direkt in einem Befehl ohne weiteren Overhead, und ist m.E. auch nicht komplizierter…

jQuery ist sicher eine feine Sache, aber oft auch ein sinnloser Overkill…

MBa · October 10, 2009, 2:12pm

[QUOTE=racoon;15778]Hallo Markus,

dein Beispiel krieg ich nicht ins laufen. Versteh auch nicht das .css im Code.
[/quote]
Ist nur ein Besipiel. Der Inhalt des Divs wird nicht angezeigt, es sein den wenn jemand den Link clickt.

Den Ansatz mit onclick kannte ich noch nicht bei jquery.Nur das klassische href =“#”. Und hier ist das Problem, dass wenn JS deaktiviert ist - die Verlinkung nicht mehr geht.

Mit onclick kann eine deaktiviertes JS durch<a href=“link” weiterverlinkt werden?
Klasse Ding, wenn das geht.

Bei deaktivierten JS wird onclick nicht ausgelöst… also es passiert das was reines HTML ist.
Schöner währe es ohne onclick, also das JS dafür im Header oder noch besser als eigene JS-Datei, die entsprechende Listener bei document.ready erzeugt. Das würde aber hier zu weit gehen.

In den paar Zeilen stecken jedoch einige Sachen, die ich nicht kenne. Deshalb recht tricky es zu verstehen. Werde aber ein paar Tuts zu jquery suchen. Gruß

Die auf der jQuery Hompage sind ganz gut.
Du solltest mit den ersten beiden anfangen.

PS: Bis jetzt hab ich nur Tuts gefunden, die das mit href=“#” machen. Grrr.

Ja, das ist das Problem, dass die meisten Tutorials in Richtung Ajax gehen und der Schreiber nicht auch noch HTML umsetzt. Dies ist bei den Tuts auch Vorraussetzung und würde andere wiederum verwirren, die genau das lernen wollen, was das Tuorial macht.

Ich glaube, Dir ist nicht wirklich klar, das jQuery eigentlich nur ein Javascript-Objekt ist.
Dies verhält sich wie normales Javascript, hat aber den Vorteil, dass Funktionalitäten, die man ständig braucht ohne Probleme zur Verfügung stehen.

@avenger:
Racoon hat mehrere JS Posts hier im Forum offen. Denke, jQuery ist auf Dauer kein Overkill.
… und so wie ich racoon einschätze gibts bald clicky-bunty-plugins. :eek:

Außerdem jedes Projekt das ich mache benötigt irgendwann ein Framework.
Deshalb benutze ich dies immer sofort und baue meine Anwendungen auch komplett mit ready und load listener auf. JQuery hilft einen schon sehr, wenn man JS aus den HTML verbannen möchte.
Von da her kenne ich die normale JS-Syntax (css-Manipulation) nicht mehr im Kopf. Die von jQuery finde ich auch wesentlich intuitiver.
Weiterhin habe ich bei den meisten Browsern festgestellt, dass die JS-Bibliotheken nur einmal pro Domain geladen werden. Die min-Version ist gerade mal 55,9kB. Das ist weniger als so manches Bild und steht mit der gesparten Entwicklungzeit in keinen Verhältnis.

Ausserdem kommt ein JS-Anfänger so recht schnell an Konzepte wie closures und zentrale/eigene Event-Listener, da die meisten Tutorials diese benutzen.
Also genau das was an JS lustig ist und einen die Lust auf PHP killt.

Natülich sollten die Grundlagen vorhanden sein, aber hier sehe ich eher Sinn DOM und JSON zu verstehen als die normale JS-Bibliothek.
… und das DOM Modell ist durch jQuery IMHO leichter wiederzuerkennen, da ein Element mit fast der gleichen Syntax ausgewählt wird wie mit CSS.

racoon · October 10, 2009, 4:26pm

vielen dank ihr beiden!

möchte nicht, dass hier ein glaubenskrieg zwischen euch entsteht. und ihr beide habts voll drauf. deshalb hoffe ich, dass beide den anderen und seine arbeit weiterhin respektiert.

ich muss noch viel lernen was das ganze hier angeht.

ok, nun zurück zu meinem leidigen thema.
würde gern ohne jquery arbeiten, doch das beispiel von avenger geht nicht:
wenn ich ein onclick in den <a> tag integriere und JS wird abgeschalten, funktioniert der href link nicht!

55kb find ich nicht klein! jedoch wenn es nicht jedes mal geladen wird, wäre das verkraftbar!

racoon · October 10, 2009, 6:03pm

also wenn man das ohne jquery hinbekommt und ich natürlich auch wäre ich super glücklich.
aber das mit dem button (als div bzw a) will mir nicht gelingen.

csimon · October 10, 2009, 8:10pm

machs doch einfach so.

HTML:


<a href="http://google.de" id="link_to_somewhere">Irgendwohin</a>

JS:


document.getElementById('link_to_somewhere').onclick = function() {
      document.getElementById('showme').style.display = 'block';
      return false;
}

zu beachten ist einfach nur das der JS Code hinter den link kommt, am besten ans ende der datei oder in den footer.

wenn kein JS aktiviert wird der link die funktion einfach nicht haben und irgendwohin verlinken.

racoon · October 11, 2009, 11:04am

hi csimon,

klasse das geht!

lass mich bitte verstehen, warum das so funktioniert
was macht das [B]return false[/B] in der function?

Wird hier die Function einfach abgebrochen oder hat es noch Auswirkungen/Feedback für den Aufruf?

Klasse! Danke an Euch Drei!

csimon · October 11, 2009, 1:23pm

das verhindert einfach das der link wirklich aufgerufen wird. würdest du das nicht hinschreiben, würde der browser einfach dem link folgen. willst du zb ein formular aufpoppen lassen, machts sinn das formular dann noch irgendwie als seite zu hinterlege. Jemand der dann kein JS aktiviert hat, wird dann nämlich einfach zur formularseite geleitet und kann trotzdem das tun was er tun wollte.

dann braucht man auch keine weichen oder ähnliches einfach js im frontend immer so gestalten das es auch ohne probleme möglich ist die seite auch ohne zu benutzen.