Új hozzászólás Aktív témák

• Silεncε őstag

  #8166

  #8165 Keem1

  2021-01-24 12:06:54

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Silεncε

  őstag

  #8165 Keem1

  #8165 Keem1

  Neem, természetesen JSON a fogadott data.

  A "bajom" az, hogy beágyazott webserverrel kell dolgoznom (C# HTTPListener), így a HTML-en felüli dinamikus részt muszáj JSON API-val és kliensoldali scripttel megoldanom. Ez utóbbihoz viszont nem értek igazán, legalábbis eddig kevés dolgom volt még vele.

  $.getJSON(hubaddress+"/smarthomeapi/"+homeexternalid+"/devices", (responsejson) =>
  {
  $.each(responsejson, function (key, val)
  {
  console.log("Filling up devices box: " + val.displayname);
  $(".devices").append("<div><span class='icon icon"+val.devicekind+"' data-homeid='"+val.homeexternalid+"' data-deviceid='"+val.deviceid+"' data-action='ledtoggle'></span>"+val.displayname+"<small>"+val.manufacturer+"</small></div>");
  });
  });

  jQueryben nem vagyok otthon, de ez segíthet: [link]. Ezzel csinálsz egy új DOM elemet, amit eltárolsz egy változóban vagy constansban, majd [link] ezzel teszel rá egy event listenert, azzal az event típussal, amit figyelni akarsz, végül pedig ezt az elemet adod hozzá az appenddel a listához.

  A korábbi megoldásod pedig azért nem működött, mivel amikor lefutattod az event listener hozzáadását, az a class alapján hozzáadja az összes megfelelő elemhez a listenert, de csak ahhoz, ami éppen benne van a DOMban, ha késöbb adsz hozzá, ahhoz nem. (mivel a listener nem a CSS-hez lesz adva, hanem a DOM elemekhez)

• Silεncε őstag

  #8164

  #8163 Keem1

  2021-01-24 11:54:55

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Silεncε

  őstag

  #8163 Keem1

  #8163 Keem1

  Igen, tegnap dobtam össze a pár HTML, CSS és JS kódot, szóval tegnap kezdtem a nulláról, a frontend részét legalábbis. A vezérlő apit, ami már C#, azt legalább egy hete hegesztem.

  Sokat agyaltam én is hogy mi legyen a frontend része. Ez egy családi-baráti projekt (egyelőre nem szánom publikusnak, de nem csak én használnám), ezért a natív android appot kizártam (egyrészt nem fejlesztettem még androidra, másrészt ágyúval veréb esete, harmadrészt rühellem az összes olyan appot, ami egy frankó webappal tökéletesen megoldható [meki kupon app ], negyedrészt kell több platform, és értelmetlen android, ios, windows külön alkalmazásokat gyártani, ha egyben egy frankó webes megoldással kivitelezhető).
  A frontend nagy része akár Apache+MySQL+PHP vonalon gyorsan és egyszerűen leprogramozható lenne, talán még frontend script nélkül is (bár ilyen esetben a page reload nem biztos sokat rontana a felhasználói élményen), de sajnos ez sem jöhet szóba. Van egy minimál JSON API-t kezelő C# service, mögötte egy SQLite database, ami eddig a pontig király. Már "csak" egy jó kis GUI-t kellene hozzá gyártanom.

  Eredetileg Angular volt a kiszemelt, de azt se ismerem semennyire. Nem tudtam, hogy a jquery már elavultnak számít (5-6 éve használtam, minimál saját kóddal, inkább internetes example bedolgozásával - elég volt a célhoz).
  Még nem biztos, hogy az eddigieket nem dolgozom át, de majd meglátjuk.

  Más:
  Hogy tudok eseményt rendelni (a fenti click) a dom-hoz ajax-szal hozzáadott objektumokhoz? A fenti, beégetett HTML-lel jól megy már a kapcsolás, viszont az egyes device-okat reprezentáló div-ek is ajax jsonból jönnének (és már jönnek is), de az oldal létrehozásakor nem létező objektumokra nem megy az event. Pedig pont egyszerű selectort választottam: css class. Azt hittem/reméltem, hogy ez a classhoz adja az eventet, függetlenül attól, hogy épp hány birtokolja a lapon, illetve utólag változik-e a számuk.

  Egyébként valami ilyesmi lesz a cél (csak példa):

  |-- Misi Home (https://192.168.0.xxx/misihome/ --- Raspberry Pi)
  |------------ Bejárati lámpa
  |------------ Hajdú bojler
  |------------ Nappali lámpa
  |-- Anett Home (https://192.168.0.xxx/anetthome/ --- Raspberry Pi)
  |------------ Fürdőszoba lámpa
  |------------ Hálószoba lámpa
  |------------ Nappali lámpa
  |-- Gyuri Home (https://192.168.0.xxx/gyurihome/ --- Raspberry Pi)
  |------------ Műhely lámpa
  |------------ Borotválkozós lámpa
  |------------ Nappali lámpa
  |------------ Kazán

  egyes device-okat reprezentáló div-ek is ajax jsonból jönnének

  Ez így biztos jó megoldás? HTML kódot küldesz JSON-ban? Vagy rosszul értem? JSON-ban adatot kell küldeni, majd abból kigenerálni a DOM elemeket.

  Egyébként ezt a kodreszletet megmutathatnád, de van rá egyszerű (bár nem olyan szofisztikált) megoldás: az event bubbling miatt a document-re is tehedet a listenert

• martonx veterán

  #8160

  #8159 Keem1

  2021-01-23 22:06:40

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  martonx

  veterán

  #8159 Keem1

  #8159 Keem1

  Ééés valóban ez a megoldás, hálásan köszönöm!

  Szerintem jövök még hozzátok, mivel a készülő smart home projectem backend része C#, abban azért otthon vagyok (igaz, nem vagyok ám programozó), de a GUI az HTML5 + javascript, emiatt biztos lesz szükségem segítségre.

  Ha ezt most kezdted nulláról, akkor még nem késő gyorsan kidobnod az elavult jquery-t. Ha trendi akarsz lenni, és nagyon egyszerű dolgok elegek, akkor javaslom a svelte-t, vagy a vanilla js-t.

• cattus addikt

  #8158

  #8157 Keem1

  2021-01-23 19:46:05

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  cattus

  addikt

  #8157 Keem1

  #8157 Keem1

  Hmm... valami ilyesmire gondolsz? (kis guglizás)

  $.getJSON(hubaddress+"/smarthomeapi/toggle/"+$(this).data("deviceid"), responsejson => function()
  //.....

  Mert sajnos az eredmény ugyanaz...

  Nem, erre:

  $.getJSON(hubaddress+"/smarthomeapi/toggle/"+$(this).data("deviceid"), (responsejson) => {  
// itt a this elvileg a megfelelő lesz  
$("#status").text(responsejson.displayname + (responsejson.state != true ? " kikapcsolva": " bekapcsolva"));
});

• cattus addikt

  #8156

  #8155 Keem1

  2021-01-23 18:00:30

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  cattus

  addikt

  #8155 Keem1

  #8155 Keem1

  Srácok, a jQuery topik nem igazán aktív, így kicsit offként, de ide írom a problémámat.

  Adott ez a kódrészlet:
  $(document).ready(function()
  {
  $(".iconlamp").click(function()
  {
  if ($(this).data("deviceid") != null)
  {
  $.getJSON(hubaddress+"/smarthomeapi/toggle/"+$(this).data("deviceid"), function (responsejson)
  {
  $("#status").text(responsejson.displayname + (responsejson.state != true ? " kikapcsolva" : " bekapcsolva"));
  });
  }
  });
  });
  

  Ez pedig a related HTML:
  <h1>Smart Home</h1>
  <div class="devices">
  <div><span class="icon iconlamp" data-deviceid="vfNVnFFZX9XrAgQF"></span>Spotlight<small>SonOff</small></div>
  <div><span class="icon iconlamp" data-deviceid="twYSpcyO4Z2Dt9vX"></span>Desk Lamp<small>Xiaomi</small></div>
  <div><span class="icon iconboiler" data-deviceid="KSnlcaoerJkPv8xw"></span>Bojler<small>SonOff</small></div>
  </div>
  <div id="status"></div>

  Ez gyakorlatilag egy Sonoff mögötti lámpát kapcsolgat, frankón. Viszont, az API egy JSON-t ad vissza, amiben többek között benne van, hogy fel- vagy lekapcsolt állapotú-e a lámpa, ezt a GUI-n lévő ikonra is rávezetném (lekapcsolt, felkapcsolt lámpa ikon, pure css). De a $.getJSON alatt sehogysem tudom elérni a parent objektumokat, nekem igazából az AJAX fölötti, if-ben lévő $(this) kellene, de a xy.parent() se vezet eredményre, az xy.parent().parent() se működik, ezt halmozhatom akármeddig, az ajax objektumba beszorul az egész, följebb nem tudok menni.

  Tehát összefoglalva... Van pár div-em (jelenleg 3 db), amikben egy-egy lámpa ikon (inline-block span) a backgroundja. A span (majd később pedig a parent div, de ez most mellékes) elemre kattintva ki/bekapcsolom a lámpát (toggle API), amire visszajön egy JSON, benne az aktuális státusz (responsejson.state = true/false). Eddig minden fasza. Viszont a true/false alapján, az adott span-nek kéne a class listáját módosítani [addClass() / removeClass()], de nincs mit, mert a span objektumra nem tudok hogy hivatkozni. a $(this).parent() nem működik, folyamatosan a getJSON objektumot kapom vissza.

  Hogy tudnám ezt a problémát áthidalni?

  A $(this) a legbelső callback-ben más lesz, mivel minden
  function(params) {
  // asdasd
}

  létrehozza a saját this context-jét. A legegyszerűbb megoldás, ha a getJSON callback-ben ehelyett arrow function callback-et használsz.

Új hozzászólás Aktív témák