[AJAX] Inputs worden niet geupdate

woensdag 17 augustus 2022 17:00

Acties:

0 Henk 'm!

Bas·ti·aan (de, m)

Topicstarter

Ik probeer binnen een formulier de waarden van verschillende input-velden te updaten op moment dat er een select-veld wordt gewijzigd. Dit wil ik doen middels ajax, en dat is dan ook tevens (pas) mijn eerste ervaring hiermee.

code:

// INDEX.PHP

<head>
    <script-tbv-jquery>
    <script type="text/javascript">
       $('#casus_id').change(function() {
            $.ajax({
              type:'GET',
              url:'loaddata.php',
              data:{casus_id: casus_id},
              dataType: 'json',
             success: function(response){
                var data = JSON.parse(response);
                $('#casus').val(response.casus);
                $('#omschrijving').val(response.omschrijving);
              }
          });
      });
    </script>
</head>

<body>
    <form method="post">

    <select name="casus_id" id="casus_id" class="form-control">
        <option value="1">Casus A</option>
        <option value="2">Casus B</option>
        <option value="3">Casus C</option>
    </select>

    <input id="casus" name="casus">
    <textarea id="omschrijving" name="omschrijving" rows="5"></textarea>

    </form>
</body>

Zoals ik het eindresultaat nu voor me zie wordt er bij een wijziging van het select-veld een call gedaan naar loaddata.php. Deze haalt op basis van de select-value een casus met hetzelfde ID op en creeert een JSON-string. Deze string moet vervolgens worden ingeladen over de input-velden.

code:

// LOADDATA.PHP

<?php

$casus_id = isset($_GET['casus_id']) ? htmlentities($_GET['casus_id']) : die;

$sql = "SELECT * FROM cas_casus WHERE casus_ident = :casus_id";

$statement = $pdo->prepare($sql);

$statement->bindParam(':casus_id', $casus_id, PDO::PARAM_INT);
$statement->execute();
$row = $statement->fetch(PDO::FETCH_ASSOC);

die(json_encode($row));

?>

Wanneer ik /loaddata.php?casus_id=2 direct aanroep krijg ik netjes de string met data geprint:

code:

1	{"ident":60,"casus_id":2,"actief":1,"verborgen":0,"aangemaakt":"2022-08-16 16:36:41","casus":"Demo.","omschrijving":"Dit is een democase."}

Mijn conclusie is dus dat dát werkt zoals het hoort. Echter, wanneer ik de selectie op de index-pagina wijzig, lijkt het of het script voor de call niet getriggerd wordt. Ik zie ook niets 'flikkeren' op beeld waardoor het idee dat er niets gebeurt versterkt. Daarom ben ik (vooral) aan het kijken naar de 1e regel van het call, en heb getest met verschillende waarden zoals ".change(function()" of "on('change', function()", data-waarden of verwerking van responses. Ik heb het script door een validator getrokken en daarin komen geen rare meldingen naar voren. Het weergeven van errors is ingeschakelt voor alles (E_ALL), maar geeft geen foutmeldingen terug. Ik weet ook zeker dat ik de juiste jquery aanroep, want andere afhankelijkheden daarvan werken wel.

Ik kan nu niet achterhaald waarom het niet werkt zoals het zou moeten. De onervarenheid met ajax zal vast een rol spelen, maar andere mogelijke oorzaken krijg ik met logisch beredeneren ook niet meer gevonden en daar heb ik even wat hulp nodig.

Waar zit nu de oorzaak van het niet updaten van de invoervelden bij het wijzigen van een selectie?

donderdag 18 augustus 2022 09:00

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

Bastiaan schreef op woensdag 17 augustus 2022 @ 19:13:
Ja, is dat zo? Met een geheel ander script/call (als in: het hele <form> opbouwen, uitspugen en weergeven) werkte wel met het script op dezelfde positie. Alleen: dat is bizar inefficiënt om voor een paar stukken inhoud een heel formulier op deze manier opnieuw te laten opbouwen. Dat is de reden dat ik zeker weet dat het moet kunnen werken, en dat de gebruikte jQuery in orde is. Is het niet zo dat dat script er staat, maar een actie/check pas wordt getriggerd door de select die wijzigt?

Uiteraard wel even getest door het script naar onder te verplaatsen, maar zonder resultaat. Ook als ik een onchange-parameter toevoeg aan het script en vanuit de select.

Een aanpassing om de code via de shorthand @ onReady uit te voeren, waarbij met alerts inzichtelijk wordt of de functie uberhaupt wordt aangeroepen, succesvol is (en wat de output is) of resulteert in een foutmelding (en welke):

JavaScript:

$(function() {
       $('#casus_id').change(function() {
            alert("Onchange is getriggered");
            $.ajax({
              type:'GET',
              url:'loaddata.php',
              data:{casus_id: casus_id},
              dataType: 'json',
             success: function(response){
                alert("Response: " + repsonse);
                var data = JSON.parse(response);
                $('#casus').val(response.casus);
                $('#omschrijving').val(response.omschrijving);
              },
             error: function(jqXHR, textStatus, errorThrown){
                alert("Error: " + errorThrown);
              },
          });
      });
});

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

woensdag 17 augustus 2022 17:06

Acties:

+1 Henk 'm!

Rannasha

Does not compute.

Het eerste dat mij opvalt is dit stukje:

code:

             success: function(response){
                var data = JSON.parse(response);
                $('#casus').val(response.casus);
                $('#omschrijving').val(response.omschrijving);
              }

Je parsed de respons en slaat die op in de variabele data, maar vervolgens ga je werken met de ongeparsde gegevens in het response-object. Ik neem aan dat je in plaats van "response.casus" eigenlijk "data.casus" wil gebruiken (en hetzelfde verhaal bij de regel erna).

Denk ook aan wat basis debug-stappen. Zo kun je in de success-sectie de respons in z'n geheel laten weergeven (bijvoorbeeld heel simpel met window.alert(response);). Hieraan kun je vrij snel zien of er antwoord komt van de server en of dat antwoord zinnig is. Om er dieper op in te duiken, kun je het beste de developer console van de browser openen (default hotkey: F12). Daar valt van alles te achterhalen over fouten, zaken die over het netwerk worden gestuurd, enz...

|| Vierkant voor Wiskunde ||

woensdag 17 augustus 2022 17:20

Acties:

0 Henk 'm!

Bastiaan

Bas·ti·aan (de, m)

Topicstarter

Scherp! Dat was een misser, maar heeft 'm niet opgelost.

In de console heb ik ook gezeten, maar daar komt niets naar voren als ik de selectie wijzig (geen fouten, geen bevestigingen). Daarom denk ik nog steeds dat de trigger niet werkt. Je window-alert was een slimme! Die had ik als enige actie toegevoegd bij de change function, maar ook die popt niet op. Ook niet met een statische meldtekst.

[ Voor 5% gewijzigd door Bastiaan op 17-08-2022 17:21 ]

woensdag 17 augustus 2022 17:58

Acties:

+1 Henk 'm!

ThomasG

Bastiaan schreef op woensdag 17 augustus 2022 @ 17:20:
Scherp! Dat was een misser, maar heeft 'm niet opgelost.

In de console heb ik ook gezeten, maar daar komt niets naar voren als ik de selectie wijzig (geen fouten, geen bevestigingen). Daarom denk ik nog steeds dat de trigger niet werkt. Je window-alert was een slimme! Die had ik als enige actie toegevoegd bij de change function, maar ook die popt niet op. Ook niet met een statische meldtekst.

Op het moment dat je javascript wordt uitgevoerd bestaat het select element nog niet, dat staat immers pas later op de pagina. Dit kun je oplossen door óf de javascript te verplaatsen naar na het betreffende element (mooier zou zijn voor de </body>; Óf het stukje code wrappen in jQuery.ready().

woensdag 17 augustus 2022 19:13

Acties:

0 Henk 'm!

Bastiaan

Bas·ti·aan (de, m)

Topicstarter

Ja, is dat zo? Met een geheel ander script/call (als in: het hele <form> opbouwen, uitspugen en weergeven) werkte wel met het script op dezelfde positie. Alleen: dat is bizar inefficiënt om voor een paar stukken inhoud een heel formulier op deze manier opnieuw te laten opbouwen. Dat is de reden dat ik zeker weet dat het moet kunnen werken, en dat de gebruikte jQuery in orde is. Is het niet zo dat dat script er staat, maar een actie/check pas wordt getriggerd door de select die wijzigt?

Uiteraard wel even getest door het script naar onder te verplaatsen, maar zonder resultaat. Ook als ik een onchange-parameter toevoeg aan het script en vanuit de select.

woensdag 17 augustus 2022 20:30

Acties:

+1 Henk 'm!

sig69

Bastiaan schreef op woensdag 17 augustus 2022 @ 17:00:
...
maar andere mogelijke oorzaken krijg ik met logisch beredeneren ook niet meer gevonden en daar heb ik even wat hulp nodig.

Stop met beredeneren, start met debuggen

Roomba E5 te koop

woensdag 17 augustus 2022 21:52

Acties:

0 Henk 'm!

Bastiaan

Bas·ti·aan (de, m)

Topicstarter

Dit is net zoiets als vroeger: dat je iets kwijt bent op een plek waar je nog nooit geweest bent en je ouders zeggen alleen maar dat je "gewoon maar een beetje beter moet zoeken, knul"

Dat is wat ik probeerde te zeggen: zoeken en debuggen ben ik op verschillende manieren mee bezig geweest, en het blijkt niet voldoende om de oorzaak te achterhalen. Ik krijg geen foutmeldingen meer in de code volgens server, browser of externe validators, er is geen activiteit na het selecteren van een andere optie in de drop-down, diverse geprobeerde soorten scripts lijken elders (aldus plekken als StackOverflow) wel te werken en bij het ombouwen naar mijn omgeving niet altijd meer. Als het nodig is kan ik dit allemaal weer reproduceren en met screenshots onderbouwen - duurt alleen wel weer even

Op een gegeven moment verzand je dus in datzelfde cirkeltje met trial and error. Inmiddels weet ik niet eens meer wáár ik naar moet zoeken. Dat is juist de aanleiding geweest om het topic te starten.

woensdag 17 augustus 2022 22:03

Acties:

+1 Henk 'm!

Juup

Google anders eens op "how to debug in Firefox" (of Chrome) ofzo.
Debuggen moet je leren.

Ik denk trouwens dat @ThomasG het juiste antwoord al gegeven heeft maar dat beredeneer je weg.

[ Voor 49% gewijzigd door Juup op 17-08-2022 22:05 ]

Een wappie is iemand die gevallen is voor de (jarenlange) Russische desinformatiecampagnes.
Wantrouwen en confirmation bias doen de rest.

woensdag 17 augustus 2022 22:10

Acties:

+1 Henk 'm!

ID-College

Debuggen, debuggen, debuggen. Als je vermoedt dat je change() niet werkt, dan doe je een simpele alert('1') erachter om te kijken of dat werkt. Als dat ook niet werkt, dan zit jaar je probleem inderdaad.

Zelfde geldt voor je output: als je query werkt, maar je ziet de data niet, dan 'alert' je desnoods de data om te kijken of je variabele überhaupt data bevat.. kortom: er is van alle mogelijk en het start bij debuggen..

woensdag 17 augustus 2022 22:48

Acties:

+1 Henk 'm!

sig69

Open de developer tools van je browser en zet hier en daar wat breakpoints en inspecteer wat er gebeurt en welke waarden variabelen hebben, dan ben je er zo uit denk ik.

Roomba E5 te koop

donderdag 18 augustus 2022 08:18

Acties:

+1 Henk 'm!

Woy

Moderator Devschuur®

Inderdaad zoals @sig69 aangeeft is het belangrijk dat je eerst de beginselen van debuggen doorkrijgt. De meest basic variant van debuggen gebruikt gewoon console.log regels, en kijkt in de console wat er gebeurt. Maar als je daadwerkelijk met de debugger gaat werken kun je zoveel meer informatie krijgen, en is het een stuk makkelijker om je probleem op te lossen.

“Build a man a fire, and he'll be warm for a day. Set a man on fire, and he'll be warm for the rest of his life.”

donderdag 18 augustus 2022 08:39

Acties:

+1 Henk 'm!

Belindo

▶ ─🔘─────── 15:02

Kan het zijn dat je de variable casus_id niet vult?

code:

1	data:{casus_id: casus_id},

Als ik even kijk naar mijn recentelijke Ajax call (niet héél veel ervaring mee), vul ik eerst de variabele met Jquery:

code:

sortByColumn = $('#sortByColumn').val();
//Ajax call:
data: {
     sortByColumn: sortByColumn,
},

Coding in the cold; <brrrrr />

donderdag 18 augustus 2022 08:54

Acties:

+1 Henk 'm!

itons

Kijk even goed naar de antwoorden van @Belindo en @ThomasG, en naar de signature van jquery's .change: https://api.jquery.com/change/. Daarmee kan je je probleem oplossen.

donderdag 18 augustus 2022 09:00

Acties:

Beste antwoord ✓
+1 Henk 'm!

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

Bastiaan schreef op woensdag 17 augustus 2022 @ 19:13:
Ja, is dat zo? Met een geheel ander script/call (als in: het hele <form> opbouwen, uitspugen en weergeven) werkte wel met het script op dezelfde positie. Alleen: dat is bizar inefficiënt om voor een paar stukken inhoud een heel formulier op deze manier opnieuw te laten opbouwen. Dat is de reden dat ik zeker weet dat het moet kunnen werken, en dat de gebruikte jQuery in orde is. Is het niet zo dat dat script er staat, maar een actie/check pas wordt getriggerd door de select die wijzigt?

Uiteraard wel even getest door het script naar onder te verplaatsen, maar zonder resultaat. Ook als ik een onchange-parameter toevoeg aan het script en vanuit de select.

Een aanpassing om de code via de shorthand @ onReady uit te voeren, waarbij met alerts inzichtelijk wordt of de functie uberhaupt wordt aangeroepen, succesvol is (en wat de output is) of resulteert in een foutmelding (en welke):

JavaScript:

$(function() {
       $('#casus_id').change(function() {
            alert("Onchange is getriggered");
            $.ajax({
              type:'GET',
              url:'loaddata.php',
              data:{casus_id: casus_id},
              dataType: 'json',
             success: function(response){
                alert("Response: " + repsonse);
                var data = JSON.parse(response);
                $('#casus').val(response.casus);
                $('#omschrijving').val(response.omschrijving);
              },
             error: function(jqXHR, textStatus, errorThrown){
                alert("Error: " + errorThrown);
              },
          });
      });
});

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

donderdag 18 augustus 2022 12:48

Acties:

+2 Henk 'm!

DJMaze

Bastiaan schreef op woensdag 17 augustus 2022 @ 17:00:
Dit wil ik doen middels ajax, en dat is dan ook tevens (pas) mijn eerste ervaring hiermee.

Gefeliciteerd met je eerste ervaring!

AJAX = Asynchronous JavaScript and XML
In eerste instantie begreep ik je verhaal niet helemaal omdat ik JSON voorbij zag komen.
En toen zag ik dat je jQuery gebruikt (en die dat dus "ajax()" noemt).

Misschien een idee om Fetch te gebruiken?
Daarmee kan je veiligheid van je scripts namelijk iets beter finetunen.

JavaScript:

const casus_id_field = document.getElementById('casus_id');
casus_id_field.addEventListener('change', () => {
    fetch('loaddata.php', {
        method: 'POST',
        mode: 'cors',
        cache: 'no-cache',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json'
        },
        redirect: 'error',
        referrerPolicy: 'no-referrer',
        body: JSON.stringify({
            casus_id: casus_id_field.value
        })
    })
    .then(response => response.json())
    .then(data => {
        $('#casus').val(data.casus);
        $('#omschrijving').val(data.omschrijving);
    });
});

Maak je niet druk, dat doet de compressor maar

donderdag 18 augustus 2022 16:16

Acties:

+1 Henk 'm!

method84

Je zou ook de jquery $.get kunnen proberen. Iets minder opties om rekening mee te houden :

code:

$(function(){
     $('#casus_id').change(function() {
          $.get( 'loaddata.php', { 'casus_id': casus_id }).done(function(data) {
              console.log(data); // f12 devtools console output
             });
     });
})

[ Voor 20% gewijzigd door method84 op 18-08-2022 16:19 ]

vrijdag 19 augustus 2022 07:28

Acties:

0 Henk 'm!

Bastiaan

Bas·ti·aan (de, m)

Topicstarter

Ik duik hier later vandaag weer in, thanks allemaal, maar...

ThomasG schreef op woensdag 17 augustus 2022 @ 17:58:
[...]
Op het moment dat je javascript wordt uitgevoerd bestaat het select element nog niet, dat staat immers pas later op de pagina. Dit kun je oplossen door óf de javascript te verplaatsen naar na het betreffende element (mooier zou zijn voor de </body>; Óf het stukje code wrappen in jQuery.ready().

Juup schreef op woensdag 17 augustus 2022 @ 22:03:
Ik denk trouwens dat @ThomasG het juiste antwoord al gegeven heeft maar dat beredeneer je weg.

...laat me vooral vast gezegd hebben dat dat zeker de insteek niet is geweest

maandag 22 augustus 2022 22:45

Acties:

+2 Henk 'm!

Bastiaan

Bas·ti·aan (de, m)

Topicstarter

Wat later dan ik wilde maar uiteindelijk is het geluk en begrijp ik (volgens mij) ook behoorlijk wat er nu achter de schermen gebeurt.

Dit is het werkende resultaat geworden en heb ik onderaan de body geplaatst:

code:

    $(function() {
        $('#casus_id').change(function() {
        var inputValue = $('#casus_id').val();
            $.ajax({
                type:'GET',
                url:'loaddata.php?casus_id=',
                data:{'casus_id':inputValue},
                dataType: 'text',
                success: function(response){
                    console.log("JSON: " + response);
                    var data = JSON.parse(response);
                    $('#casus').val(data.onderwerp);
                    $('#omschrijving').val(data.omschrijving);
                    [i][etc, etc][/i]
                    },
                error: function(jqXHR, textStatus, errorThrown){
                alert("Error: " + errorThrown);
                },
            });
        });
    });

Het voorbeeld van @Thijsmans heeft daar overduidelijk aan ten grondslag gelegen, maar het geeft me wel de handvatten die ik zocht om te zien en beter te begrijpen wat het doet, maar vooral ook hoe ik hier op een slimme manier ook andere dingen mee kan gaan doen. Ook om dit weer om te gaan bouwen en door te gaan pakken op het stukje security, zoals @DJMaze noemde.

Bedankt allemaal! Heeft me op verschillende enorm verder geholpen

Vraag

Beste antwoord (via Bastiaan op 22-08-2022 22:45)

Alle reacties