Website button linken aan web api - Softwareontwikkeling

dinsdag 4 augustus 2015 11:36

Acties:

0 Henk 'm!

Eet niet thuis vanavond

Topicstarter

Ingewikkelde titel voor wat waarschijnlijk een simpel probleem is:

Ik heb een Fibaro HC2 domotica controller in mijn meterkast. Dat ding heeft een web interface die het prima doet, maar veel te veel toeters en bellen heeft voor simpel aan en uit zetten van b.v. een lampje.

Zoals zo ongeveer alles tegenwoordig heeft de HC2 ook een web api. Als ik de url voor de actie in de browser zet, gaat m'n lamp aan, en komt het resultaat als tekst in het browser window te staan.

Ik heb geen verstand van html en/of javascript, en daarom loop ik vast met het maken van een eigen interface pagina.
Het plaatje is van een quick and dirty testje. Achter beide knoppen zit een hyperlink, de ene schakelt de lamp aan, de andere schakelt hem weer uit.
Probleem is dat de hyperlink ook een nieuwe pagina opent met het resultaat. Ik moet de back button gebruiken of de pagina opnieuw laden om de knoppen weer terug te krijgen.

Hoe fabriek ik het dat ik op dezelfde pagina blijf als ik op de knop klik?

Afbeeldingslocatie: http://www.xs4all.nl/~korteweg/webje.jpg

Afbeeldingslocatie: http://www.xs4all.nl/~korteweg/webje.jpg

May clinging breasts always come to your aid in the kitchen!

dinsdag 4 augustus 2015 11:38

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Door met javascript een AJAX-request te doen, of eventueel door de knopjes in een frame te zetten (maar dan verdwijnen na een klik wel je knoppen).

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

dinsdag 4 augustus 2015 17:45

Acties:

+1 Henk 'm!

JJ93

Error 418

Simpel voorbeeld van AJAX-request na klik op een button: https://jsfiddle.net/va53b3df/

Wat hier dus gebeurd:
Na een "click" event op een "button" wordt de methode uitgevoerd.
In deze methode wordt het "id" en "class" attribuut uitgelezen van het HTML-element waar op geklikt is.
Deze waardes worden gebruikt om een URL te creereren.
Vervolgens wordt er gebruik gemaakt van een AJAX-request.
Dit request verloopt of met "success" of met een "erorr".
In deze twee methodes kun je vervolgens nog meer dingen doen.

Bijvoorbeeld de button zijn class veranderen zodat hij groen wordt indien de lamp succesvol is aangezet. Maar dat hangt er ook van af wat de HC2 API voor responses terug geeft.

[ Voor 77% gewijzigd door JJ93 op 04-08-2015 17:49 ]

woensdag 5 augustus 2015 10:53

Acties:

0 Henk 'm!

Uitvreter

Eet niet thuis vanavond

Topicstarter

NMe schreef op dinsdag 04 augustus 2015 @ 11:38:
Door met javascript een AJAX-request te doen,

Ajax lijkt het goede (zij het ietwat korte) antwoord.

JJ93 schreef op dinsdag 04 augustus 2015 @ 17:45:
Simpel voorbeeld van AJAX-request na klik op een button: https://jsfiddle.net/va53b3df/

Hmmm, een simpelere oplossing is er niet he?

Oke, ik overdrijf, het voorbeeld op jsfiddle lijkt me precies wat ik zoek, en ik denk dat ik snap wat er gebeurt.
Hoe ik dat in een eigen site / pagina integreer is een ander verhaal. Had ik al gezegd dat ik geen verstand heb van javascript?

Dat wordt dus weer een dik boek en een paar avonden fronsen en zuchten en vloeken.
Bedankt voor jullie antwoorden!

Iemand een suggestie voor een goede, leesbare absolute beginners guide to javascript, jquery en ajax?

May clinging breasts always come to your aid in the kitchen!

woensdag 5 augustus 2015 14:00

Acties:

0 Henk 'm!

JJ93

Error 418

Uitvreter schreef op woensdag 05 augustus 2015 @ 10:53:
Hoe ik dat in een eigen site / pagina integreer is een ander verhaal. Had ik al gezegd dat ik geen verstand heb van javascript?

Iemand een suggestie voor een goede, leesbare absolute beginners guide to javascript, jquery en ajax?

In principe vrijwel hetzelfde als op jsfiddle, alleen wat uitgebreider. Dus een .html file met <head> en <body>, in de <head> een verwijzing naar het jquery-xxx.js bestand. En nog een .js file aanmaken met de javascript code, en die ook verwijzen. En een .css file met de CSS als je wilt gaan stylen, en die dus ook verwijzen.

Ik ben zelf begonnen door gewoon wat te proberen en te zoeken hoe je iets kan doen.

http://www.w3schools.com/jquery/jquery_ajax_intro.asp
http://www.sitepoint.com/use-jquerys-ajax-function/

Voordat je echt begrijpt wat er gebeurt kun je beter een paar beginners html5 en javascript tutorials volgen.

woensdag 25 oktober 2017 23:04

Acties:

0 Henk 'm!

mvrossum

Ik zat met hetzelfde probleem, maar onderstaande script werkt !

misschien heeft iemand er wat aan.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function myFunction() {
$.ajax({
url: 'http://192.168.1.7/api/callAction?deviceID=5&name=turnOff',
dataType: 'jsonp',
});
}
</script>
<button id="mike" onclick="myFunction()">mike</button>
</head>
</html>

Mike.

woensdag 25 oktober 2017 23:13

Acties:

+1 Henk 'm!

AW_Bos

Liefhebber van nostalgie... 🕰️

Dat kan ook, maar de manier van @JJ93 zijn Fiddle is unobtrusive, en ook veel netter.
Waarom een functie gebruiken, als je ook kan identificeren met een id-element?

☎ Telecommunicatie van vroeger
🚅Alles over spoor en treintjes

woensdag 25 oktober 2017 23:38

Acties:

+4 Henk 'm!

mcDavid

waarom moet er toch altijd jQuery ingeladen worden voor iets wat zo doodeenvoudig is?

JavaScript:

1
2
3

document.getElementById('button-id').addEventListener('click', function (){
  new XMLHttpRequest().open('get', 'http://call.to/api');
});

of in een fiddle: http://jsfiddle.net/acrezgo4/

ok, ik snap dat ditsoort projectjes een hoog "als het werkt, werkt het" gehalte hebben.... maar gewoon een vanllla JS voorbeeldje geven kan geen kwaad. Je zou haast vergeten dat het bestaat als je de gemiddelde zoekresultaten op een javascript-vraag bekijkt.

donderdag 26 oktober 2017 09:31

Acties:

0 Henk 'm!

AW_Bos

Liefhebber van nostalgie... 🕰️

Het werkt wel crossbrowser met jQuery.

Een normale AJAX-request via Vanilla JS (good old plain JavaScript) is niet crossbrowser, en moet je dan nog enkele andere methods meegeven, en zelfs een catch.

☎ Telecommunicatie van vroeger
🚅Alles over spoor en treintjes

donderdag 26 oktober 2017 10:07

Acties:

+3 Henk 'm!

mcDavid

AW_Bos schreef op donderdag 26 oktober 2017 @ 09:31:
Het werkt wel crossbrowser met jQuery.

Een normale AJAX-request via Vanilla JS (good old plain JavaScript) is niet crossbrowser, en moet je dan nog enkele andere methods meegeven, en zelfs een catch.

Welke moderne browser mis je dan? IE9 wordt zelfs door de meeste grote websites al jaren niet meer gesupport, daar hoef je je voor een hobbyprojectje écht niet druk om te maken.

donderdag 26 oktober 2017 15:27

Acties:

0 Henk 'm!

BarôZZa

jQuery is de duivel en geheel overbodig.