JavaScript AJAX PHP-Script soll direkt nach range-Änderung ausgeführt werden

[xep22]

Moin,

folgendes habe ich:

<input type="range" id="range" name="range" min="1" max="10" value="1" onchange="gen()">
<p>Wert <b><span id="wert"></b></span></p>
<br><br>
<input id="output">
</html>

<script>
function gen(){
    jQuery.ajax({
    url: "gen.php",
    data: {
        "range":$("#range").val()
    },
    type: "POST",
    success:function(data){
        $("#output").val(data);
    }});
}
</script>

<script>
var slider=document.getElementById('range');
var output=document.getElementById('wert');
output.innerHTML=slider.value;

slider.oninput=function(){
    output.innerHTML=this.value;
}
slider.oninput();
</script>

<script src="jquery.min.js"></script

gen.php:

$zahlen='0123456789';
$tmp=str_shuffle($zahlen);
echo substr($tmp, 0, 1);

Die Länge wird direkt geändert wenn ich die Maus gedrückt halte und den slider bewege. aber das PHP-script wird immer erst ausgeführt wenn ich die Maus dann los lasse.

wie mache ich das dass es sich direkt ändert wie auch das ausgeben der zahl ? Mit oninput anstatt onchange kommt gar keine PHP ausgabe mehr.

 

[cppnap]

du hast doch die Frage schon selbst beantwortet - du musst auf das input feld ein onchange-event legen.

 

[DubZ]

nein oninput ist schon der richtige Event der eingesetzt werden muss.

Das muss so eigentlich funktionieren... siehe hier: https://jsfiddle.net/qgc2o0jp/

ich habe deinen quellcode mal genommen und nur das ajax rausgenommen (hab gerade keinen Webservice der mir nur ein Wort oder so liefert ). Dort siehst du, dass oninput genau so funktioniert, wie du es haben möchtest.

 

[xep22]

hä? aber das ändert doch nichts daran dass die PHP-Ausgabe erst nach dem Maus los lassen kommt... darum gehts ja.

 

[DubZ]

dein ernst? ich habe damit deinen Fehler eingekreist... ein bisschen selbst testen und mitdenken solltest du schon selbst.

Eventuell auch schon mal daran gedacht dass der Fehler womöglich vor dem Monitor sitzt, in dem er den Slider direkt los lässt und die Latenz bis der Webservice Antwortet einfach so hoch ist, dass es so vor kommt, als wenn der ajax Aufruf erst beim los lassen ausgeführt wird?

Für mich sieht alles richtig aus, den ajax aufruf kann ich leider nicht testen außer du gibst mir eine FQDN welche aus dem Internet aus erreichbar ist

 

[xep22]

Aber sicher braucht der webserver mehrere sekunden 1 Zeichen auszugeben. ist dann immer zufälligerweise genau dann wenn ich die Maus los lasse fertig.....

wie hast du es eingekreist?? das problem ist das AJAX. oder geht das einfach nicht dass die Antwort direkt kommt nach jedem step beim range??

 

[DubZ]

das Problem ist nicht das ajax...
hier bitte, habe eben was für dich gemacht wo du auch erkennst, dass es funktioniert:
https://jsfiddle.net/qgc2o0jp/1/

ich lasse dir das 1h online und nehme den Webservice danach wieder offline.

@xep22 Problem gelöst?

 

[r15ch13]

Wenn man schnell an dem Regler rumschiebt und los laesst kommt manchmal das falsche Ergebnis raus. (Siehe Screenshot)

Muss das wirklich bei jedem einzelnen Schritt einen Request abfeuern?
Ich wuerde das Event mit debounce erst nach 100ms abschicken: https://jsfiddle.net/xsu7b082/