Toggle-Button mit JavaScript/AJAX

  • Hallo,

    in dem Beitrag Problem mit PHP Toggle Button habe ich meine Ansteuerung mit dem Toogle-Button (PHP-Skript) gelöst.

    Nach dem Hinweis:

    Quote

    Hallo,


    warum machst du das nicht über JavaScript/AJAX? 1. spartst du dir den Roundtrip der kompletten Seite, weil die nicht bei jedem Knopfdruck neu geladen werden muss, 2. bist du wesentlich flexibler, was die Implementierung der Server-Seite angeht.


    Gruß, noisefloor

    würde ich gerne meine Anwendung so mit JavaScript/AJAX ändern.

    Ich weiss aber leider nicht wie ich da anfangen soll.

    Könnte mir dazu jemand eine Hilfestellung geben.


    MfG

    Juergen B.

    :?:

  • Ich habe mal so was ähnliches in HTML gemacht und dies in Javascript gelöst.

    Ist durch Try&Error entstanden und daher vermutlich totaler Murx - aber vielleicht hilft es Dir ja weiter.

    Wenn Du den Code in eine Textdatei kopierst und diese im Browser aufrufst, dann kannst Du es probieren.

    ...wenn Software nicht so hard-ware ;) ...

    Freue mich über jeden like :thumbup:

  • Hallo,


    @VeryPrivate: bolToogle hat keine explizit definierten Anfangszustand, den solltest du setzen. Und wenn du schon Bool'sche Werte verwenden willst, dann solltest du auch `true` und `false` nutzen und nicht die integer `0` und `1`, die JavaScript zu Wahrheitswerten evaluiert (siehe z.B. Doku bei MDN)


    Die größere "Aufgabe" des TE ist auch eher das Absetzen des Requests via AJAX oder die neuere fetch-API, der clientseitige Teil auf ein Event zu reagieren, ist ja der einfach Teil :)


    Gruß, noisefloor

  • VeryPrivat so ist es einfacher und klarer:


    * Der Style ist vom Code getrennt

    * Das class-Attribut dient als Zustand des Buttons


  • > Noch einfacher wäre keine Klasse = aus, klasse on = an und dann mit el.classList.toggle()

    In der Tat, nur wird es dann schwierig mit dem AJAX.

    Der Button-Selector sollte auch etwas spezifischer sein.


    Code
    <style>
      .on    { background-color: #10EF10; }
      button { background-color: #AAAAAA; }
    </style>
    <div id="toggle">
        <button onclick="this.classList.toggle('on')" class="on">Toggle</button>
    </div>
  • Hallo,

    hier mein Ergebnis mit Javascript/AJAX.

    Hier wollte ich ein Bild von meiner Webseite einfügen, kann ich aber nicht bedienen.

    Die Webseite enthält zwei Toggle-Button für: GEYSER ON/OFF und LIGHT ON/OFF, der Status der Ausgänge (GPIO21+26) wird mit je einem ICON für Wasser Warm/Kalt und Licht An/Aus angezeigt.

    Hier mein Programm-Code:

    Bei dieser Version habe ich aber noch das Problem: wenn bei Aufruf der Webseite der Status eines Ausgangs "High" ist, wird der entsprechende Toggle-Button falsch dargestellt.

    Die Umschaltung erfolgt mit:

    Code
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>

    checked.

    Wie könnte ich "checked/unchecked" je nach Status steuern ?


    MfG

    Juergen B,

    :?:

  • Hallo,

    vielen Dank für den Hinweis.

    Der Befehl

    Code
    document.getElementById("myonoffswitch").checked = true/false;

    funktioniert zwar, jedoch wirkt er sich auf die Darstellung des Toggle-Button aus.

    Der Schalter (runder Kreis) im Toggle-Button wid außerhalb und als langes senkrechtes Rechteck mit runden Ecken angezeigt.

    Das Rechteck verschwindet wenn ich den Radius des Schalter auf '0' und die Farbe auf Weiß (= Hintergrund) setze.

    Den Befehl habe ich in: "if (content == .... Zeile 159-175" eingesetzt.


    MfG

    Juergen B.