AJAX dmv click event aan button
Ik probeer een AJAX uit te voeren zodra er op een element is geklikt.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
document.getElementById("save").addEventListener("click", save);
function save(){
var id = document.getElementById('id').textContent;
var new_quantity = document.getElementById('stock_q').value;
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "update.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send('id='+id, 'new_quantity'+new_quantity);
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
function save(){
var id = document.getElementById('id').textContent;
var new_quantity = document.getElementById('stock_q').value;
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "update.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send('id='+id, 'new_quantity'+new_quantity);
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
Ik krijg geen foutmelding in de console maar ook geen reactie.
Moet je dan niet het default gedrag van deze button afvangen?
Mogelijk wordt de pagina direct ververst, maar vindt de AJAX-call wel plaats?
Het normale gedrag van je developer toolbar is dat je console en netwerk-historie wordt leeggeveegd als er een refresh plaatsvindt. Dit kun je zo configureren dat alle historie continu blijft behouden, dit geeft je mogelijk meer inzicht?
Mogelijk zijn er meerdere buttons met id "save"?
Heb je al geprobeerd om simpelweg een alert te laten zien wanneer je op deze knop drukt om te zien of "save" uberhaupt vuurt? Of iets in je console?
En waarom schrijf je in puur JavaScript als er frameworks zijn die je werk uit handen kunnen nemen?
Denk niet dat de code echt het probleem is hier, maar ontbrekende handvaten voor het debuggen ervan? Je mist nu informatie over wat er misgaat, en je lijkt geen idee te hebben hoe je dit moet aanpakken.
Ik moet het zoeken in de AJAX request.
Dadelijk maar eens even voor gaan zitten :)
Gewijzigd op 07/06/2020 17:57:24 door Thomas van den Heuvel
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function update_stock(){
var id = document.getElementById('id').textContent;
var new_quantity = 'heey';
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "update.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//ampersand toegevoegd
xhttp.send('id='+id+'&'+'new_quantity='+new_quantity);
//onderstaande functie toegevoegd
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
}
}
var id = document.getElementById('id').textContent;
var new_quantity = 'heey';
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "update.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//ampersand toegevoegd
xhttp.send('id='+id+'&'+'new_quantity='+new_quantity);
//onderstaande functie toegevoegd
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
}
}
Op dit moment gaat het niet fout, maar je sluit in principe een contract af op het moment dat je aangeeft dat het MIME-type application/x-www-form-urlencoded is. Het is dan jouw verantwoordelijkheid om alle data ook op die manier aan te leveren.
Vervolgens encodeer je "id" en "new_quantity" niet expliciet als zodanig (noch de keys, noch de waarden). Dat levert misschien nu geen problemen op, maar dit hangt volledig af van de waarden van "id" en "new_quantity", en wellicht ook van de namen voor de keys die je hiervoor gebruikt. Het is waarschijnlijk verstandig om dit toch expliciet te doen, zodat er niets verkeerd kan gaan.
Daarbij geef je ook niet aan wat voor character encoding deze data heeft - weet eigenlijk ook niet of dat gebruikelijk is bij setRequestHeader(), maar als je expliciet dingen in kunt stellen (en er dan dus ook zorg voor draagt dat het ook echt in het/de voorgedefinieerde formaat/encodering wordt aangeleverd) is dat meestal het beste, omdat er op die manier geen enkele verwarring kan bestaan over wat er wordt bedoeld.
Simpelweg omdat iets werkt, maakt het nog niet juist.