Beiträge von Sempervivum

Zitat

Fehlt jetzt nicht noch ein INPUT - Befehl, wo ich bekanntgeben muss, welche Variable in welches Feld geschrieben soll werden?

Was meinst Du mit input-Befehl? Ein input-Element muss es auf jeden Fall geben, etwas so:

<input id="anz1">

aber ich dachte, das sei ohnehin der Fall, weil Du es ja früher gepostet hattest. Mit diesem:

$('#anz1').val(data[0]);

wird er Wert dann hinein geschrieben.

Ich konnte den Code nicht testen, weil mir das ganze Umfeld fehlt, DB etc. Da ist jetzt Debuggen angesagt:

• Was sagt die Console?
• Checkpoint einbauen, um zu sehen, ob der Callback überhaupt kommt und ob der Wert passt:

            $.getJSON('database.php', function(data) {
                console.log(data);
                $('#anz1').val(data[0]);
                $("#amp1").trigger('change');
                $('#anz2').val(data[1]);
                $("#amp2").trigger('change');
            });

• Prüfen, ob die verwendeten IDs im Javascript und im HTML zusammen passen. Wahrscheinlich macht es keinen Sinn, #anzx für das Eintragen des Wertes und #ampx für das Triggern des change zu verwenden.

Die vorletzte Fehlermeldung kannst Du leicht beheben, wenn Du der Empfehlung dort folgst. Ich erwarte aber nicht, dass das das Problem löst.

Zitat

solange ich die console aus habe aktualisiert sich der wert nicht.

Wenn ich aber dann die console an mache dann wird der Wert aktualisiert.

Das ist mir ein Rätsel. Poste doch mal mehr Code aus dem Umfeld des Ajax. Die ganze Seite ist wahrscheinlich zu umfangreich, das ganze Zeichnen.

let ist ähnlich wie var aber mit dem Unterschied, wie bei deinem Beispiel, dass, wenn der Click-Handler aufgerufen wird, er wieder den selben Variablenwert vorfindet, wie zu dem Zeitpunkt als er registriert wurde. Während bei var er den Endwert nach Durchlauf der Schleife vorfindet.

Versuche es so:

In database.php:

$vars = [$rowanzeige1->wert00, $rowanzeige1->wert02];
echo json_encode($vars);

Und das Javascript:

            $.getJSON('database.php', function(data) {
                $('#anz1').val(data[0]);
                $("#amp1").trigger('change');
                $('#anz2').val(data[1]);
                $("#amp2").trigger('change');
            });

Beliebter Fehler, es passiert folgendes: Die Eventlistener werden registriert und die Schleife ist zu Ende. Danach hat a den Wert 3. Wenn jetzt später geklickt wird, funktioniert nichts, weil es für 3 keine Elemente gibt.

Abhilfe, indem man "let" verwendet:

for(let a=0;a<=2;a++){

Das ganze sollte auch viel einfacher gehen: Gib den Pfeilbuttons eine einheitliche Klasse und verwende dieses jquery:

    $(".xppfeil").addClass("xpdown").click(function(){
           if($(this).hasClass('xpdown')) {
                 $(this).removeClass("xpdown").addClass("xpup")
           }else{
                 $(this).removeClass("xpup").addClass("xpdown")
           }
     });

Bastis Empfehlungen waren soweit alle richtig. Ich würde das Zurücksetzen der Formularelemente dem Reset überlassen und nur die, die damit nicht abgedeckt sind, ausprogrammieren. Also ein Resetbutton wie in Posting #5 und dann die Funktion:

        function reset() {
            for (var nr = 1; nr <= anzahl; nr++) {
                document.getElementById("ergebnis" + nr).innerHTML = '';
            }
            document.getElementById("summe").innerHTML = '';
        }
        document.getElementById("resetbtn").addEventListener("click", reset);

Zitat

Absolute und relative positionierungen verstehe ich ja,aber was macht die positionierung "STATIC", was macht die den genau?

Static ist der Defaultwert, der gültig ist, wenn man nichts anderes angibt. Die Elemente werden dann nacheinander angeordnet, so wie man sie im HTML notiert.

Der IE macht häufig Probleme, aber in diesem Fall habe ich keinen Anhaltspunkt dafür, dass es daran liegt. Du kannst trotzdem probeweise einen anderen Browser testen.

Versuche, einen Checkpoint in den Code einzubauen und beobachte die Console:

    hR.onreadystatechange = function(){
        if ( hR.status == 200 && hR.readyState == 4 ){
            console.log("response");
            strResponseText = hR.responseText;
            Zeichnen(strResponseText);
        }
    };

Zitat

was ist das onreadystatechange?

Damit meine ich dies:

    hR.onreadystatechange = function(){
        if ( hR.status == 200 && hR.readyState == 4 ){
            strResponseText = hR.responseText;
            Zeichnen(strResponseText);
        }
    };

Dort wird die Funktion Zeichnen() aufgerufen, sobald die Antwort vom Server eintrifft und Du darfst sie auch nur dort aufrufen, weil sonst die Daten nicht zur Verfügung stehen.

Zitat

Warum aktualisiert er das denn nur wenn ich die console offen habe ?

Dafür habe ich keine Erklärung. Bist Du sicher, dass er nicht aktualisiert, wenn die Console nicht offen ist?

Mal ins Blaue geraten: Die Funktion Zeichnen() darfst Du nur im onreadystatechange aufrufen. Rufst Du sie vielleicht noch irgend wo anders auf?

Hat er das nicht gemacht, als Du die Seite noch neu geladen hast? Vermute, dass das neu Zeichnen nicht optimal organisiert ist. Aber schwer zu sagen, wenn man den Code nicht in Aktion sehen kann.

Ich meine gar nichts. In der Funktion aktualisieren() wird ja die Funktion Zeichnen() aufgerufen. Den Code, mit dem sie definiert wird, musst Du natürlich bei behalten.

Wenn er nicht aktualisiert, muss das einen anderen Grund haben. Ist irgend etwas in der Console zu erkennen?

Ah, jetzt verstehe ich, Du aktualisierst die ganze Seite, nur um die Daten zu aktualisieren. Da Du den Ajax-Code ja schon hast, ist es eine Kleinigkeit, es umzustellen: Den Code in eine Funktion packen und diese mit setInterval zyklisch aufrufen:

function aktualisieren() {
    var hR = new XMLHttpRequest();
    var strResponseText = "";
    hR.onreadystatechange = function(){
        if ( hR.status == 200 && hR.readyState == 4 ){
            strResponseText = hR.responseText;
            Zeichnen(strResponseText);
        }
    };

    hR.open("GET", "seite.php", true);
    hR.send(null);
}
setInterval(aktualisieren, 3000);

Zitat

er aktualisiert die ganze Geschicht nur über einen separaten Befehl.

Was heißt das genau? Was aktualisiert er, die ganze Seite oder nur bestimmte Daten/Inhalte? Poste den Code dieses separaten Befehls.

Zitat

Was muss ich denn ändern damit er mir die Daten regelmäßig zieht?

Die Daten zyklisch abfragen durch die Verwendung von setInterval().

Zitat

welche ich hart positioniert habe und welche ich auch von der Größe hart programmiert habe.

Das ist genau der Feind bei deinem Vorhaben, dass sich die Seite an verschieden Bildschirmauflösungen anpasst, d. h. sich responsiv verhält. Wahrscheinlich wirst Du nicht darum herum kommen, dies komplett zu überarbeiten und mit relativen Abmessungen zu arbeiten und auf absolute Positionierung zu verzichten.

Zitat

Im ersten Bild ist zu sehen, wie ich die Daten vom Webserver ziehe und diese Daten in Zeichnen(strResponseText) speicher.

Im zweiten Bild werden diese Daten der function übergeben und geparsed.

Jetzt möchte ich das alles mit AJAX machen und immer nur die Daten aktualisieren und nicht die ganze Seite.

Verstehe nicht ganz: Was Du da in deinem ersten Bild zeigst ist Ajax. Wenn trotzdem deine ganze Seite aktualisiert wird, musst Du irgend wo einen Fehler machen, der aber aus den beiden Bildern nicht zu erkennen ist. Am besten postest Du mal die URL der Seite, damit man es sich in Aktion ansehen kann.

Danke, jetzt ist es klar, Du benutzt Ajax, um das Feld zyklisch zu aktualisieren.

Zitat

und wenn das jetzt mit einem einfachen echo funktioniert von meiner database.php eine betimmte variable auszugeben,

wär ich schon glücklich.... nur weiß ich nicht wie.

Dann poste doch Mal den Code der database.php, dann kann man dir zeigen, wie es geht.

Ja, das geht z. B. mit diesem Javascript:

function shuffle(a) {
            var j, x, i;
            for (i = a.length - 1; i > 0; i--) {
                j = Math.floor(Math.random() * (i + 1));
                x = a[i];
                a[i] = a[j];
                a[j] = x;
            }
        }
        var nrtohighlight = 23;
        var tbl = document.getElementById("table1");
        var nrrows = tbl.rows.length;
        var idxes = [];
        for (var i = 0; i < nrrows; i++) {
            idxes.push(i);
        }
        shuffle(idxes);
        for (var i = 0; i < nrtohighlight; i++) {
            tbl.rows[idxes[i]].classList.add("highlight");
        }

Das Prinzip ist, ein Array mit den Indizes zu erzeugen, und zu mischen (shuffle), so dass die Reihenfolge zufällig wird. Dann die ersten 23 Indizes nehmen und die Zeile, die dazu gehört, hervorheben, hier durch Hinzufügen einer Klasse und Zuweisen einer Hintergrundfarbe.

*{
display:inline-block;
}

Das wirkt auf alle Elemente, bei jsfiddle im iFrame mit dem Ergebnis. Das Ergebnis ist schwer vorher zu sagen und kann überraschen, wie man hier sieht. Der Grund ist, das das style-Element als Standardeigenschaft display:none hat und man den Inhalt, d. h. das CSS, mit display:inline-block sichtbar macht.

Genau, das ist ein Akkordeon. Ich denke, so ist es einfacher:

https://jsfiddle.net/w7kmhfeL/3/