AJAX dmv click event aan button

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jop B

Jop B

07/06/2020 16:58:08
Quote Anchor link
Hoi hoi,


Ik probeer een AJAX uit te voeren zodra er op een element is geklikt.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
              }


Ik krijg geen foutmelding in de console maar ook geen reactie.
 
PHP hulp

PHP hulp

27/10/2021 02:36:56
 
Thomas van den Heuvel

Thomas van den Heuvel

07/06/2020 17:22:00
Quote Anchor link
Is dit een submit-button?
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.
 
Jop B

Jop B

07/06/2020 17:37:31
Quote Anchor link
Een simple alert werkt.
Ik moet het zoeken in de AJAX request.

Dadelijk maar eens even voor gaan zitten :)
 
Thomas van den Heuvel

Thomas van den Heuvel

07/06/2020 17:53:19
Quote Anchor link
Er mist in ieder geval een =-teken voor "new_quantity"? Moet dit ook echt komma-gescheiden zijn? Moet dit niet gescheiden zijn met ampersands? En was hier niet een standaard functie voor om dat alles te URL-encoden? Of schrijf er zelf een, of maak gebruik van een framework.
Gewijzigd op 07/06/2020 17:57:24 door Thomas van den Heuvel
 
Jop B

Jop B

07/06/2020 21:07:57
Quote Anchor link
Opgelost
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
                  }
              }
        }
 
Thomas van den Heuvel

Thomas van den Heuvel

08/06/2020 00:01:50
Quote Anchor link
Ik zou jezelf aanleren om dingen ook op de goede manier te transformeren en encoderen.

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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.