Jquery Mobile: dynamisch updaten van de pagina

[argon007]

Hallo,

Ik ben een kleine website aan het maken om mijn GPIO's van de Raspberry Pi aan te sturen. De bedoeling is om een rolluik op en neer te laten gaan.

Momenteel heb ik een doodsimpel html bestandje aangemaakt met wat Jquery in. De webpagina bestaat uit een flipswitch (Rolluik Omhoog / Rolluik Omlaag). Als ik met mijn laptop naar de pagina surf en op "Rolluik Omhoog" druk dan brand er een ledje (tot hier toe alles goed). Als ik echter x minuten daarna met mijn smartphone ook naar die pagina surf dan staat de flipswitch nog altijd op "Rolluik Omlaag" terwijl de webpagina op mijn computer op "Rolluik Omhoog" staat.

Hoe kan ik dus maken dat de pagina bijvoorbeeld zichzelf herlaad en de laatste stand van de button doorgeeft als er meerdere devices aan het kijken zijn naar de pagina.

Indien dit niet lukt zit ik dus met een probleem. Want je kan dan wel naar de website surfen, maar de knop zal altijd op "Rolluik Omlaag" staan terwijl dit niet altijd het geval zal zijn.

Iemand tips voor mij ?

[R4gnax]

Websockets en server-sent events zijn 2 zaken waar je naar zou kunnen kijken. En mocht je browsers willen ondersteunen die geen van beide standaarden implementeren, dan kun je nog terug vallen op een polling oplossing.

[Ramon]

R4gnax schreef op donderdag 24 april 2014 @ 20:38:
Websockets en server-sent events zijn 2 zaken waar je naar zou kunnen kijken.

Ja maak het meteen ingewikkeld

Doe gewoon een simpele ajax call om de paar seconden. Dat kan in deze situatie prima. Simpelste oplossing is denk ik om je webserver een pagina te laten serveren met JSON die een key-value teruggeeft als in:

led-enabled > true/false

In je webpagina kijk je dan of de ajax call true of false teruggeeft en pas je de flipswitch aan.

[ Voor 11% gewijzigd door Ramon op 24-04-2014 20:42 ]

[Biersteker]

Ik weet niet precies hoe je de switches doet. Maar je heb een aantal technieken die een stuk beter zijn dat serverside events/web sockets in dit geval.

pseudojs

JavaScript:

//laat maar

Dan onload en na een verandering de switch status checken.

*Disclaimer* Gepost via een RDP verbinding vanaf een mobiel voor copypasta.
(Voordat ik NMe weer over me heen krijg)

[ Voor 50% gewijzigd door Biersteker op 27-04-2014 10:07 ]

[Grijze Vos]

Biersteker schreef op donderdag 24 april 2014 @ 20:52:
Maar je heb een aantal technieken die een stuk beter zijn dat serverside events/web sockets in dit geval.

"Een stuk beter"? En dan produceer je een voorbeeld met maar liefst een expliciete eval, en nog een tweede impliciete eval in je setTimeout aanroep. Misschien wil je eerst even een cursus javascript anno 2014 doen voordat je tips gaat geven?

[StephanVierkant]

Wat Biersteker zegt, maar dan goed. En wat Ramon zegt: lekker simpel houden. GoT gebruikt ook een periodieke ajax-request om te checken of er nieuwe berichten in een topic zijn.

Vraag van het script terug of je rolluik omhoog/omlaag staat en verander dan de switch. Zorg dat je script true/false teruggeeft en je kunt het gelijk gebruiken:

JavaScript:

$('#switch').prop( "checked", data.led );

Er zijn genoeg scripts te vinden die $.ajax i.c.m. setTimeout gebruiken, dus daar moet je ongetwijfeld uit komen.

[ Voor 9% gewijzigd door StephanVierkant op 25-04-2014 14:04 ]

[Biersteker]

Grijze Vos schreef op vrijdag 25 april 2014 @ 13:28:
[...]


"Een stuk beter"? En dan produceer je een voorbeeld met maar liefst een expliciete eval, en nog een tweede impliciete eval in je setTimeout aanroep. Misschien wil je eerst even een cursus javascript anno 2014 doen voordat je tips gaat geven?

Wijst naar de disclaimer onder z'n post. Een websocket opzetten voor de status van een knop is imo overdreven.

[Grijze Vos]

Biersteker schreef op vrijdag 25 april 2014 @ 14:32:
[...]

Wijst naar de disclaimer onder z'n post. Een websocket opzetten voor de status van een knop is imo overdreven.

Dat die websocket overdreven is kan zo zijn, maar dat is niet mijn punt. Die boodschap is al gegeven door Ramon. Jij post vervolgens een code voorbeeld waar je niemand blij mee maakt. Als je de moeite neemt om een copy/paste-baar code snippet te posten, zorg dan dat dat ding niet vol zit met bad practices.

[Biersteker]

voor de ts. http://electronicsbyexamp...l-from-mobile-device.html

[argon007]

Bedankt voor jullie antwoorden. Is mij ondertussen gelukt.

Nog een vraagje:
De flip switch laat dus een rolluik op en neer gaan. Ik kan nu de status zien van de rolluiken (als ze omhoog of omlaag zijn) aan de hand van de stand van de flip switch. Nu refresht de pagina niet automatisch. Is het aangeraden om één of ander script in de pagina te stoppen die de pagina om de x seconden herlaad, of zijn hier andere manieren voor?

Ik ben een volledige nieuweling op vlak van html/jquery/javascript/... dus hou het simpel aub :-)

[Ramon]

Op zich hebben we al antwoord gegeven op je vraag (in hoeverre verschilt die van de originele vraag?) maar misschien kunnen we gerichter helpen als je wat code plaatst die je hebt gemaakt.

Het antwoord is dus, doe een ajax request naar een url die de state van de rolluiken teruggeeft in JSON-formaat, lees dit uit en update je interface. Doe die functie dan in een setInterval bijv om de 5 seconden en je bent klaar. Hiervoor hoeft dus niet de pagina te refreshen.