&lt;div class&gt; veranderen vanuit een ajax functie.

dinsdag 21 november 2023 20:49

Stanleyvc schreef op dinsdag 21 november 2023 @ 23:24:
Normaal gebruik ik het volgende om een waarde die vanuit een ajax routine komt te gebruiken:

document.getElementById(test)\.innerHTML =this.responseText;

nu heb ik het volgende gebruikt, in de hoop dat de tekst die vanuit ajax word geretourneerd word uitgevoerd:

this.responseText;

Het scriptje word netjes uitgevoerd, de ajax routine werkt, alleen de script data word niet uitgevoerd.

De ontvangen data in de browser:
[Afbeelding]

Alleen is de naam van de div nu: "lr_3" en moet deze van grijs, rood worden.

Alvast dank.

code:

1	this.responseText

is specifiek om een tekst node aan te passen / toe tevoegen aan een HTMLElement,

Wat ik zou maken is iets als dit:
JSON Response:

code:

[{
 "ID": "lr_3",
 "Action": "ElementReplaceClass",
 "OldClass": "led-grey",
 "NewClass": "led-red"
}]

Waarbij de Action optioneel is en meer voor als je het als generieke update mechanisme gaat bouwen.

De AJAX (welke ik zou vervangen door een FetchAPI call) kan dna de JSON parsen en omzetten in een Function call die de code uitvoert zoals je nu in je return hebt maar dan met variables.

Alle reacties

Acties:

0 Henk 'm!

CyBeRSPiN

sinds 2001

Prima vraag om aan chatgpt te vragen:

Om de kleur van de <div> vanuit een AJAX-routine te veranderen, kun je de DOM-manipulatiefuncties van JavaScript gebruiken. Hier is een voorbeeld van hoe je dit kunt doen:
code:
1
2
3
4
5
6
7
8
9
10
11
12
// Jouw AJAX-routine, bijvoorbeeld met behulp van de fetch API
fetch('jouw_api_endpoint')
  .then(response => response.json())
  .then(data => {
    // Verkrijg de referentie naar de <div> door het ID te gebruiken
    const ledDiv = document.getElementById('test');

    // Verwijder de oude klasse (led-red) en voeg de nieuwe klasse (led-blue) toe
    ledDiv.classList.remove('led-red');
    ledDiv.classList.add('led-blue');
  })
  .catch(error => console.error('Fout bij het ophalen van gegevens:', error));
Zorg ervoor dat je dit script uitvoert nadat de DOM volledig is geladen. Je kunt dit doen door het in een eventlistener voor het 'DOMContentLoaded'-evenement te plaatsen of door het script onderaan de HTML-pagina te plaatsen, net voor de sluiting van de <body>-tag.

Dit script haalt gegevens op via een AJAX-aanroep (in dit geval met fetch), en zodra de gegevens beschikbaar zijn, wordt de klasse van het element met het ID 'test' gewijzigd van 'led-red' naar 'led-blue'. Hierdoor wordt de kleur van de ronde cirkel aangepast volgens de opgegeven CSS-stijlen.

dinsdag 21 november 2023 20:50

Acties:

0 Henk 'm!

Ramon

even uit de losse pols:

JavaScript:

1 2	const div = document.querySelector('#test') div.classList.replace("led-red", "led-blue")

Zie ook https://developer.mozilla...Web/API/Element/classList en https://developer.mozilla...PI/Document/querySelector

Check mijn V&A ads: https://tweakers.net/aanbod/user/9258/

dinsdag 21 november 2023 23:24

Acties:

0 Henk 'm!

dinsdag 21 november 2023 23:27

Topicstarter

Allereerst dank voor de snelle reacties.

Normaal gebruik ik het volgende om een waarde die vanuit een ajax routine komt te gebruiken:

document.getElementById(test)\.innerHTML =this.responseText;

nu heb ik het volgende gebruikt, in de hoop dat de tekst die vanuit ajax word geretourneerd word uitgevoerd:

this.responseText;

Het scriptje word netjes uitgevoerd, de ajax routine werkt, alleen de script data word niet uitgevoerd.

De ontvangen data in de browser:
Afbeeldingslocatie: https://tweakers.net/i/d_QnStRTgBuBrJiQR6-67sfzbE4=/full-fit-in/4000x4000/filters:no_upscale():fill(white):strip_exif()/f/image/lbxgdkdCXviz6TpOrOn9tVWt.png?f=user_large

Afbeeldingslocatie: https://tweakers.net/i/d_QnStRTgBuBrJiQR6-67sfzbE4=/full-fit-in/4000x4000/filters:no_upscale():fill(white):strip_exif()/f/image/lbxgdkdCXviz6TpOrOn9tVWt.png?f=user_large

Alleen is de naam van de div nu: "lr_3" en moet deze van grijs, rood worden.

Alvast dank.

[ Voor 6% gewijzigd door Stanleyvc op 21-11-2023 23:25 ]

Acties:

0 Henk 'm!

Sito

Ik weet niet hoe je HTML en response er volledig uitziet, maar Javascript wat op deze manier ingeladen wordt, wordt nooit direct uitgevoerd door je browser.

Dat moet minstens gewrapped zijn in een document event (ready, load etc.).

Ik kan me vergissen, maar dit heb ik in ieder geval nog niet eerder gezien.

dinsdag 21 november 2023 23:44

Acties:

0 Henk 'm!

Nickname55

Stanleyvc schreef op dinsdag 21 november 2023 @ 23:24:
Het scriptje word netjes uitgevoerd, de ajax routine werkt, alleen de script data word niet uitgevoerd.

Dat klopt. Code die je via ajax binnen haalt word zomaar niet uitgevoerd. Dat moet je volgens mij via eval() uitvoeren. Maar persoonlijk vind ik dat een vuile constructie. Naar mijn mening moet je nooit code binnen halen en deze zomaar uitvoeren. Je haalt variabelen binnen. Naar gelang de waarde van die variabelen pas je de html code aan.

[ Voor 9% gewijzigd door Nickname55 op 21-11-2023 23:50 ]

Euhm... \n ...

dinsdag 21 november 2023 23:52

Acties:

0 Henk 'm!

dinsdag 21 november 2023 23:59

Topicstarter

Al gevonden, met "eval" word word het scriptje netjes uitgevoerd.

Acties:

+3 Henk 'm!

woensdag 22 november 2023 11:17

Can I get uhm...

Stanleyvc schreef op dinsdag 21 november 2023 @ 23:52:
Al gevonden, met "eval" word word het scriptje netjes uitgevoerd.

eval() en "netjes" passen nooit in dezelfde zin.

Waarom komt er JavaScript uit die call? Waarom weet je server hoe je DOM en CSS eruitzien? Waarom stuurt de server niet het antwoord:

JSON:

1	{ "led": 3, "status": "on" }

[ Voor 21% gewijzigd door CodeCaster op 22-11-2023 00:49 ]

https://oneerlijkewoz.nl
Op papier is hij aan het tekenen, maar in de praktijk...

Acties:

0 Henk 'm!

woensdag 22 november 2023 16:42

Topicstarter

Ik ben bezig met een "Teensy" besturing 's systeempje, de microcontroller produceert de webpagina en vult vervolgens de webpagina met gegevens. De gegevens worden om de 1000mS ververst.

Wanneer een ledje uit is, zie je een grijs rondje en wanneer deze aan is, zie je een Rood, Groen, Blauw, Geel of Oranje rondje, dit afhankelijk van de gekozen kleur.

Ik moet wat betreft de moderne technieken als JSON nog een hoop leren

dat zegt mij nog helemaal niets. $_/-\o_$

Acties:

Beste antwoord ✓
+1 Henk 'm!

woensdag 22 november 2023 16:44

Stanleyvc schreef op dinsdag 21 november 2023 @ 23:24:
Normaal gebruik ik het volgende om een waarde die vanuit een ajax routine komt te gebruiken:

document.getElementById(test)\.innerHTML =this.responseText;

nu heb ik het volgende gebruikt, in de hoop dat de tekst die vanuit ajax word geretourneerd word uitgevoerd:

this.responseText;

Het scriptje word netjes uitgevoerd, de ajax routine werkt, alleen de script data word niet uitgevoerd.

De ontvangen data in de browser:
[Afbeelding]

Alleen is de naam van de div nu: "lr_3" en moet deze van grijs, rood worden.

Alvast dank.

code:

1	this.responseText

is specifiek om een tekst node aan te passen / toe tevoegen aan een HTMLElement,

Wat ik zou maken is iets als dit:
JSON Response:

code:

[{
 "ID": "lr_3",
 "Action": "ElementReplaceClass",
 "OldClass": "led-grey",
 "NewClass": "led-red"
}]

Acties:

+1 Henk 'm!

woensdag 22 november 2023 19:11

@Stanleyvc
Deze MDN pagina had mij veel geleerd over hoe je dit kan doen met de FetchAPI.
https://developer.mozilla...API/Fetch_API/Using_Fetch

zou dat je ook helpen? of heb je wat pointers nodig over hoe je met JSON om kan gaan?

Acties:

0 Henk 'm!

woensdag 22 november 2023 20:34

Topicstarter

Alle hartelijk dank.

@Sysosmaster, ik ga het eens doornemen. Nogmaals dank

Acties:

0 Henk 'm!

DJMaze

CodeCaster schreef op dinsdag 21 november 2023 @ 23:59:
eval() en "netjes" passen nooit in dezelfde zin.

En deze dan?

JavaScript:

1
2
3

const s = document.createElement('script'):
s.textContent = 'evil code';
document.head.append(s);

Maak je niet druk, dat doet de compressor maar

woensdag 22 november 2023 20:49

Acties:

0 Henk 'm!

woensdag 22 november 2023 20:53

Can I get uhm...

Sysosmaster schreef op woensdag 22 november 2023 @ 16:42:
[...]
code:
1
this.responseText
is specifiek om een tekst node aan te passen / toe tevoegen aan een HTMLElement,

Wat ik zou maken is iets als dit:
JSON Response:
code:
1
2
3
4
5
6
[{
 "ID": "lr_3",
 "Action": "ElementReplaceClass",
 "OldClass": "led-grey",
 "NewClass": "led-red"
}]
Waarbij de Action optioneel is en meer voor als je het als generieke update mechanisme gaat bouwen.

De AJAX (welke ik zou vervangen door een FetchAPI call) kan dna de JSON parsen en omzetten in een Function call die de code uitvoert zoals je nu in je return hebt maar dan met variables.

Dus je gaat een JSON-structuur definiëren en vullen om een stuk HTML-modificatie met JS aan te sturen, en daarbij zelfs de CSS-klassenamen declareren aan de serverkant? Over tight coupling gesproken.

DJMaze schreef op woensdag 22 november 2023 @ 20:34:
[...]

En deze dan?
JavaScript:
1
2
3
const s = document.createElement('script'):
s.textContent = 'evil code';
document.head.append(s);

Ook gewoon nee.

https://oneerlijkewoz.nl
Op papier is hij aan het tekenen, maar in de praktijk...

Acties:

+1 Henk 'm!

Ramon

Sysosmaster schreef op woensdag 22 november 2023 @ 16:42:
[...]
code:
1
this.responseText
is specifiek om een tekst node aan te passen / toe tevoegen aan een HTMLElement,

Wat ik zou maken is iets als dit:
JSON Response:
code:
1
2
3
4
5
6
[{
 "ID": "lr_3",
 "Action": "ElementReplaceClass",
 "OldClass": "led-grey",
 "NewClass": "led-red"
}]
Waarbij de Action optioneel is en meer voor als je het als generieke update mechanisme gaat bouwen.

De AJAX (welke ik zou vervangen door een FetchAPI call) kan dna de JSON parsen en omzetten in een Function call die de code uitvoert zoals je nu in je return hebt maar dan met variables.

Nu ga je vanuit je backend bepalen wat de frontend moet doen. Ik zou eerder de json beperkt houden tot de feitelijke zaken:

JSON:

1	{"led-status": "on", "color": "blue"}

Dan kan je dat in de JS mee doen wat je wil.

Check mijn V&A ads: https://tweakers.net/aanbod/user/9258/

woensdag 22 november 2023 21:21

Acties:

+2 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

Wat mensen hierboven proberen te zeggen: Je moet / wil data versturen in je JSON, geen code / instructies. Hou het puur, alléén data.

DJMaze schreef op woensdag 22 november 2023 @ 20:34:
[...]

En deze dan?

Als je alleen maar komt om te trollen of verwarring te zaaien: kap es.

[ Voor 45% gewijzigd door RobIII op 22-11-2023 21:23 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 22 november 2023 21:23

Acties:

0 Henk 'm!

woensdag 22 november 2023 21:28

CodeCaster schreef op woensdag 22 november 2023 @ 20:49:
Dus je gaat een JSON-structuur definiëren en vullen om een stuk HTML-modificatie met JS aan te sturen, en daarbij zelfs de CSS-klassenamen declareren aan de serverkant? Over tight coupling gesproken.

om zo dicht mogenlijk te blijven bij wat @Stanleyvc al aan het doen was, gebruik ik de CSS classen in de JSON. Verder is er niets "tight coupeling" aan... er zijn namelijk niet eens classe waar je het over hebt, dit gaat over een interface tussen Javascript client en server.

Tight coupeling gaat over Inheritance en het gebruiken van directe Class referenties, waardoor je solution geen tot slechte reusability heeft... iets wat hier niet van toepassing is.

Acties:

0 Henk 'm!

woensdag 22 november 2023 21:31

Ramon schreef op woensdag 22 november 2023 @ 20:53:
[...]

Nu ga je vanuit je backend bepalen wat de frontend moet doen. Ik zou eerder de json beperkt houden tot de feitelijke zaken:
JSON:
1
{"led-status": "on", "color": "blue"}
Dan kan je dat in de JS mee doen wat je wil.

Nee, ik geef de frontend de instructies over state die de backend heeft... of je dit via een Class doet of via een "Enum" maakt geen eene donder uit... maar wat wel uit maakt is het leer proces...

Jouw suggestie is beter want je gebruikt dan een statemachine,
en die moet je bouwen.

als iemand bij 0 begint, begin je niet met het eerst optuigen van allerlei ingewikkelde processen.. je leert iemand eerst om iets 'quick en dirty' te doen.

zo heb jij het toch ook geleerd?

Acties:

+1 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

Sysosmaster schreef op woensdag 22 november 2023 @ 21:23:
Tight coupeling gaat over Inheritance en het gebruiken van directe Class referenties

Tight coupling is wanneer verschillende componenten 'intiem' aan elkaar geknoopt zijn en niet (of niet goed) onafhankelijk van elkaar kunnen werken. Dat kan met inheritance te maken hebben maar dat is maar één voorbeeld.

Mooie illustratie (bron):


Tight coupling	Loose coupling

quote: https://en.wikipedia.org/...ng_(computer_programming)
In software engineering, coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.

[ Voor 71% gewijzigd door RobIII op 22-11-2023 21:38 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 22 november 2023 21:34

Acties:

0 Henk 'm!

woensdag 22 november 2023 21:37

@RobIII Ik heb het altijd geleerd als specifiek slaan op classen en interfaces.

maar in essentie is dat hetzelfde.

Maar dan nog heeft mijn voorbeeld geen tight coupeling.... er is geen vereiste dat er iets van de response ook aanwezig is in de frontend (dat deze dan niet werkt met het antwoord is niet relevant), ze werken gewoon onafhankelijk van elkaar en er is niet meer coupeling dan in welke presentation layer <-> Domain layer dan ook. (tenminste, zo zie ik het)

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

Sysosmaster schreef op woensdag 22 november 2023 @ 21:34:
@RobIII Ik heb het altijd geleerd als specifiek slaan op classen en interfaces.

Het is dus breder dan dat.

Sysosmaster schreef op woensdag 22 november 2023 @ 21:34:
Maar dan nog heeft mijn voorbeeld geen tight coupeling....

Dat heb ik ook nergens gezegd; ik nuanceerde je uitspraak alleen

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 22 november 2023 21:42

Acties:

0 Henk 'm!

woensdag 22 november 2023 21:44

RobIII schreef op woensdag 22 november 2023 @ 21:37:
Het is dus breder dan dat.

Ik denk dat dit een kwestie is van hoelang geleden ik dit geleerd heb vs waneer jij dit hebt gedaan.
Ik snap wat je bedoeld. mijn uitleg was een verklaring voor hoe ik het tot nog toe heb gebruikt & begrepen.
(ik gebruikte altijd dependent / independent interfacing om aan te geven waar jij hier tight / louse coupeling voor gebruikt... in essentie gewoon hetzelfde beestje, alleen andere naam)

[b]RobIII in "<div class> veranderen vanuit een ajax functie."
Dat heb ik ook nergens gezegd; ik nuanceerde je uitspraak alleen

Klopt, @Ramon inssueerde dat.

ik probeerde niet je woorde in de mond te leggen... (ook niet bij Ramon trouwens)

Acties:

+1 Henk 'm!

woensdag 22 november 2023 21:50

Can I get uhm...

Sysosmaster schreef op woensdag 22 november 2023 @ 21:34:
@RobIII Ik heb het altijd geleerd als specifiek slaan op classen en interfaces.

maar in essentie is dat hetzelfde.

Maar dan nog heeft mijn voorbeeld geen tight coupeling.... er is geen vereiste dat er iets van de response ook aanwezig is in de frontend (dat deze dan niet werkt met het antwoord is niet relevant), ze werken gewoon onafhankelijk van elkaar en er is niet meer coupeling dan in welke presentation layer <-> Domain layer dan ook. (tenminste, zo zie ik het)

Als de backend iets stuurt zoals ik eerder voorstelde of zoals @Ramon zegt, namelijk "hey, front-end, led 3 brandt nu rood", heb je low coupling. De front-end kan helemaal zelf bepalen hoe daarop te reageren.

Met jouw voorstel moet de back-end weten hoe de front-end in elkaar zit, welke css-klasse bij een bepaalde kleur led hoort, én dat die vervangen moet worden door JavaScript.

Zo kun je geen van beide wijzigen zonder dat er iets omvalt. De definitie van tight coupling: te veel weten van de implementatie van de andere kant.

[ Voor 3% gewijzigd door CodeCaster op 22-11-2023 21:45 ]

https://oneerlijkewoz.nl
Op papier is hij aan het tekenen, maar in de praktijk...

Acties:

0 Henk 'm!

woensdag 22 november 2023 22:11

CodeCaster schreef op woensdag 22 november 2023 @ 21:44:
[...]

Als de backend iets stuurt zoals ik eerder voorstelde of zoals @Ramon zegt, namelijk "hey, front-end, led 3 brandt nu rood", heb je low coupling. De front-end kan helemaal zelf bepalen hoe daarop te reageren.

Met jouw voorstel moet de back-end weten hoe de front-end in elkaar zit, welke css-klasse bij een bepaalde kleur led hoort, én dat die vervangen moet worden door JavaScript.

Zo kun je geen van beide wijzigen zonder dat er iets omvalt. De definitie van tight coupling: te veel weten van de implementatie van de andere kant.

je hebt in beide gevallen de zelfde maten van coupeling. de backend hoeft in geen van beide gevallen te weten hoe de front end werkt namelijk, want in de interface is afgesproken welke opties er kunnen zijn.

dat de ene css classen zijn of niet, is niet relevant. en heeft ook 0 effect op coupleing. (een element een niet bestaande CSS class geven heeft 0 effect).

zo wie zo, is het toevoegen van opties stap 3, terwijl we bij stap 1 zijn. voor stap 3 heb je een state machine nodig.... voor stap 1... niet perse.

Acties:

+1 Henk 'm!

woensdag 22 november 2023 22:14

Can I get uhm...

Sysosmaster schreef op woensdag 22 november 2023 @ 21:50:
[...]

je hebt in beide gevallen de zelfde maten van coupeling. de backend hoeft in geen van beide gevallen te weten hoe de front end werkt namelijk, want in de interface is afgesproken welke opties er kunnen zijn.

dat de ene css classen zijn of niet, is niet relevant. en heeft ook 0 effect op coupleing. (een element een niet bestaande CSS class geven heeft 0 effect).

zo wie zo, is het toevoegen van opties stap 3, terwijl we bij stap 1 zijn. voor stap 3 heb je een state machine nodig.... voor stap 1... niet perse.

Jouw back-end moet wél weten hoe de front-end eruitziet, want de back-end stuurt element-id's en css-klassen terug:

Sysosmaster schreef op woensdag 22 november 2023 @ 16:42:

JSON:

[{
 "ID": "lr_3",
 "Action": "ElementReplaceClass",
 "OldClass": "led-grey",
 "NewClass": "led-red"
}]

Dat betekent dus dat je, als je de front-end wil aanpassen op die gebieden, dat je tegelijk de back-end ook moet aanpassen. Dat is onnodig, en daar zijn geen opties of state machines voor nodig.

Stel de back-end stuurt zo'n structuur:

JSON:

{ 
  "led": 3,
  "status": "on",
  "color": "red" 
}

Dan kan je script er zo uitzien:

JavaScript:

fetch('/led_status')
  .then(response => response.json())
  .then(data => updateLed(data));

function updateLed(data) {
  const ledElement = document.getElementById('led-' + data.led);
  
  // if (data.status === 'on') ...
  ledElement.setAttribute('class', '');
  ledElement.classList.add('led-' + data.color);
}

Natuurlijk missen hier een boel details, maar mijn punt blijft: de front-end (de code die de call doet), bepaalt wat die met het generieke, niet "coupled" antwoord van de server doet.

Het topic begon met dat TS serverside een stuk JavaScript wil genereren en dat letterlijk door de client wil laten uitvoeren. Dát idee probeerde ik meteen in de kiem te smoren.

[ Voor 6% gewijzigd door CodeCaster op 22-11-2023 22:13 ]

https://oneerlijkewoz.nl
Op papier is hij aan het tekenen, maar in de praktijk...

Acties:

0 Henk 'm!

woensdag 22 november 2023 22:14

CodeCaster schreef op woensdag 22 november 2023 @ 22:11:
[...]

Jouw back-end moet wél weten hoe de front-end eruitziet, want de back-end stuurt element-id's en css-klassen terug. Dat betekent dus dat je, als je de front-end wil aanpassen op die gebieden, dat je tegelijk de back-end ook moet aanpassen. Dat is onnodig, en daar zijn geen opties of state machines voor nodig.

Stel de back-end stuurt zo'n structuur:
JSON:
1
2
3
4
5
{ 
  "led": 3,
  "status": "on",
  "color": "red" 
}
Dan kan je script er zo uitzien:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
fetch('/led_status')
  .then(response => response.json())
  .then(data => updateLed(data));

function updateLed(data) {
  const ledElement = document.getElementById('led-' + data.led);
  
  // if (data.status === 'on') ...
  ledElement.setAttribute('class', '');
  ledElement.classList.add('led-' + data.color);
}
Natuurlijk missen hier een boel details, maar mijn punt blijft: de front-end (de code die de call doet), bepaalt wat die met het generieke, niet "coupled" antwoord van de server doet.

Het topic begon met dat TS serverside een stuk JavaScript wil genereren en dat letterlijk door de client wil laten uitvoeren. Dát idee probeerde ik meteen in de kiem te smoren.

bij deze oplossing moet de backend nog steeds weten hoe de front end werkt...

zo makkelijk is het ontkoppelen niet.

Acties:

0 Henk 'm!

woensdag 22 november 2023 22:21

Can I get uhm...

Sysosmaster schreef op woensdag 22 november 2023 @ 22:14:
[...]

bij deze oplossing moet de backend nog steeds weten hoe de front end werkt...

zo makkelijk is het ontkoppelen niet.

Wat is hier front-end-specifiek aan:

JSON:

{ 
  "led": 3,
  "status": "on",
  "color": "red" 
}

En wat kan een niet-HTML-front-end met:

JSON:

{
 "ID": "lr_3",
 "Action": "ElementReplaceClass",
 "OldClass": "led-grey",
 "NewClass": "led-red"
}

[ Voor 41% gewijzigd door CodeCaster op 22-11-2023 22:19 ]

https://oneerlijkewoz.nl
Op papier is hij aan het tekenen, maar in de praktijk...

Acties:

0 Henk 'm!

woensdag 22 november 2023 22:29

OM dit te kunnen sturen moet de Backend weten:
- Welke led ID's er zijn
- Welke LED Classes er zijn.

JSON: ledupdate.json

{ 
  "led": 3,
  "status": "on",
  "color": "red" 
}

JavaScript: frontend.js

fetch('/led_status')
  .then(response => response.json())
  .then(data => updateLed(data));

function updateLed(data) {
  const ledElement = document.getElementById('led-' + data.led);
  // if (data.status === 'on') ...
  ledElement.setAttribute('class', '');
  ledElement.classList.add('led-' + data.color);
}

En bij deze oplossing doe je alle classen van het element weggooien en dan vervangen door 1 nieuwe, iets wat een andere functie is dan Oorspronkelijk werd gedaan (dit kan goed zijn overigens, kan ik nu niet beoordelen, dat kan @Stanleyvc alleen)

met andere woorden, je kan nog steeds de backend niet aanpassen zonder ook de frontend aan te passen.
wel iets meer dan met mijn code, maar hij is nog steeds net zo sterk gekoppeld.

--
begrijp jij me nu?

[ Voor 4% gewijzigd door Sysosmaster op 22-11-2023 22:24 . Reden: improvements ]

Acties:

0 Henk 'm!

woensdag 22 november 2023 22:50

Can I get uhm...

Sysosmaster schreef op woensdag 22 november 2023 @ 22:21:
OM dit te kunnen sturen moet de Backend weten:
- Welke led ID's er zijn
- Welke LED Classes er zijn.
[...]
En bij deze oplossing doe je alle classen van het element weggooien en dan vervangen door 1 nieuwe, iets wat een andere functie is dan Oorspronkelijk werd gedaan (dit kan goed zijn overigens, kan ik nu niet beoordelen, dat kan @Stanleyvc alleen)

Het is niet de UI die bepaalt welke kleuren een led heeft of hoeveel er zijn en welk nummer ze hebben; dat bepaalt de hardware, en dat is daarmee iets dat door de back-end/API/server wordt gedicteerd.

Het is vervolgens aan de client/UI om alle kleuren van de leds te mappen naar UI-kleuren. Als je dat met CSS-klassen doet, dan kán dat met concatenatie à la "led-red". Het kan ook met een andere mapping, maar mapping moet plaatsvinden, en dat moet in de client.

Dat mijn code een naïeve mapping doet van "red" naar "led-red" en alle overige CSS-klassen weggooit, is een simplificatie die het verder niet meer of minder tightly coupled maakt dan jouw oplossing.

Nogmaals, bij jouw oplossing stuurt juist de server de HTML-id's en CSS-klassen. Mijn code laat die beslissing aan de client.

De client kan ook een Android-app zijn, of een MAUI-app, of een Windows Forms-applicatie die de hardware uitleest door die API aan te roepen, en het antwoord in kleuren weergeeft op een scherm. Wat moeten dergelijke apps met "OldClass/NewClass"? Met "led 3 is nu rood" kunnen ze wél wat.

https://oneerlijkewoz.nl
Op papier is hij aan het tekenen, maar in de praktijk...

Acties:

0 Henk 'm!