Tökéletes
Hálás vagyok és köszi, hogy időt szántál rám

Sziasztok, segítséget szeretnék kérni az alábbiakban.

Van egy oldalsómenüm, ahol szeretném ha az egyik menüpont betöltené a két jobb oldali frame-et különböző oldalakkal. Ez annyira egyszerűnek tűnt számomra azonban már 1 órája szenvedek vele. Valaki esetleg tudna segíteni?

Ezt szeretném egybegyúrni:
<a href='aggregated.php' target="aktiv">Aggregated</a>
<a href='bottomagg.php' target="bottom">Aggregated</a>

css grid

Én kérek elnézést!

top.frames['aktiv'].location.href = 'aggregated.php';
top.frames['bottom'].location.href = 'bottomagg.php';

pl ezt egy onclickben?

Everything that has a beginning... has an end

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.

Do the thing!

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"));
});

Do the thing!

Ééé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.

[ Szerkesztve ]

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.

Én kérek elnézést!

Tehát a react és a vue már sz.r?
Ezért nem vagyok frontendes. Minden héten új framework

Kisebb projektekhez én is Svelte-et vagy natúr JS-t ajánlanék, nem azért mert a többi már szar, hanem mert adott feladathoz érdemes a leginkább hozzávaló eszközt választani.

Do the thing!

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

[ Szerkesztve ]

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

[ Szerkesztve ]

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>");
});
});

[ Szerkesztve ]

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)

Sziasztok!

Tudnátok abban tanácsot adni, kérlek, hogy JS-tel hogyan tudnám egy külső HTML fájl tartalmát "behúzni"?

Jelenleg (ideiglenesen, és csak a teszt szerveren - nagyon kezdő vagyok még, így számomra egyelőre még mindig csak ideiglenes és teszt) szerver oldalon generálódik (SQL, PHP) a tartalom (töltődik fel adatbázisból tartalommal ez a külső HTML, és ez megy a kliensnek), de szeretném áthozni kliens oldalra, hogy csak a feltöltendő/kiegészítendő adatokat kelljen küldeni, a fix HTML kód a kliensen generálódjon.

Axios van használatban a PHP topikban tanácsoltak hatására. (@instantwater: Köszönöm!)
jQuery is van használatban - de csak a használt HTML template miatt, én még nem igazán használtam magamtól semmire.

Illetve @instantwater: Javasoltad, hogy
Igen, célszerű az adatot JSONban leküldeni a kliensnek, és kliens oldalon React/Vue vagy valami hasonlóval generálni a HTMLt.
De a HTML már készen van, így gondolom, már nem tudom / nem kell használnom ezeket a keretrendszereket. Igazából ha kikerülhető, pár sor HTML kódért nem szeretnék (még) egy új keretrendszert bevezetni, ha nélküle is megoldható.

Ahogy "elképzeltem", úgy "kellene" hogy működjön, hogy megy a request a szerver felé, az visszaküldi az adatokat, aztán a JS fogja ezt a HTML kód "template"-et, belerakja az előbb kapott adatokat, aztán megjeleníti. Minden egyes feed elemnél újra és újra. És így a szervertől az ismétlődő fix HTML kódot már nem kellene mindig eljuttatni, csak a változó részeket.

Viszont ez mind egy feed-be megy, ahol akár több 100-szor is kellhet egymás után, szóval vagy csak egyszer kellene betöltenem a feed item HTML template-jét, vagy pedig eleve JS-ben generálni. (Bár akkor pedig az ajánlott React vagy Vue lehet, amit használnom kellene? Csak igazából nem használnék egy külön keretrendszert, ha JS-ből is megoldható. )

Szerintetek hogyan lenne jobb?
Illetve ha van megoldási javaslatotok, megtámogatnátok egy-egy (kéznél lévő) példával?

Saját keresésből erre futotta eddig (jQuery load() ), semmi más használhatót nem találtam:
https://www.tutorialrepublic.com/jquery-tutorial/jquery-ajax-load.php
Viszont itt azt nem értem, hogy hogyan adom meg neki a HTML fájlt. Mármint talán előbb azt is le kell kérni (Axios get)?

Nagyon nem vagyok jártas ezekben, és hiába vannak meg az alapok, ez már nem alap dolog, így nem igazán látom át, most hogyan lehetne tovább menni.
Vannak csúnya megoldásra ötleteim, de jó lenne valami időtállóbba energiát fektetni. Ehhez kérném a segítségetek.

Köszönöm!

Őskorban az Ajax volt erre (xmlhttprequest), de a friss-ropogós framework-ök biztos tudnak fancy-bb megoldást is.

JOGI NYILATKOZAT: A bejegyzéseim és hozzászólásaim a személyes véleményemet tükrözik; ezek nem tekinthetők a munkáltatóm hivatalos állásfoglalásának...

2 napja váltottam kb. Axiosra, előtte őskövültem én is. Ott hogy kellene ezt megoldani? Tudnál példát mutatni rá, kérlek?
De ha Ajax, akkor erre gondoltam én is a "csúnya" megoldás alatt. Vagy én nem tudom még, hogyan kell szépen megcsinálni.

Én nem igazán értem, mit akarsz csinálni. Vagy egy PHP által már kirenderelt HTML-ed, amit JS-ből akarsz még tovább bővíteni? Mert akkor csak megírod a JS-t és hivatkozol rá a HTML-ben.

Do the thing!

Axiosra sincs semmi szükség 2021-ben. Sima Fetch() kell neked.

Én kérek elnézést!

Pont most álltam át. (Oké, nem volt nagy kódolás, de akkor is, mire rájöttem (abszolút kezdőként), hogy mi-merre. Aztán így persze már látom, nem volt nagy ördöngösség.)

Persze abszolút nyitott vagyok, de miért jobb a Fetch mint az Axios? Illetve mit jelent az, hogy nincs rá szükség 2021-ben? Szeretném megérteni, hogy tudjam.
Ezt találtam összehasonlításnak: https://blog.logrocket.com/axios-or-fetch-api/

Azt látom, hogy ami elérhető egyikkel, elérhető a másikkal is, szóval igazából könnyen át tudom írni ezt a pár sor kódot Axiosról Fetch-re, ha arról van szó.

Köszi.

[ Szerkesztve ]

Azt ugye tudod hogy az axios is csak egy absztrakcios reteg az xhr felett?!

Ha jól látom, annyival többet tud, hogy auto fallback-el XMLHttpRequestre ha nincs fetch

Totálisan lényegtelen, hogy axiost használsz, fetch api-t, jquery ajaxot, vagy XMLHttpRequestet. A koncepció a zavaros, hogy mit kéne csináljon a szerver, mit kéne csináljon a kliens, milyen-mennyi adatot küldjön a szerver, milyen formátumban, satöbbi, satöbbi...

[ Szerkesztve ]

Rally against apathy draws small crowd

Azt nem tudom mit akarsz Csak teljesen felesleges 3rd party libraryket behúznod ahhoz, amit alapból tud a böngésző.

Én kérek elnézést!

A HTML-es kérdést már megoldottam, simán csak áthoztam a fájl tartalmát. (Axios.get-tel, de amúgy igen, sima fetch vagy xhr is jó lett volna.)

Azért kérlek, ne nagyon szabdaljatok fel. XHR-rel kezdtem, de a PHP topikban "rám szóltak" (nyilván jó szándékkal), hogy az múlt századi megoldás, használjak Axios-t. De abban én is egyetértek, hogy arra a minimális feladatra amúgy még az XHR is jó volt, (viszont tök kezdő vagyok, így hallgatok a tapasztaltabbakra). De ha jól látom, akkor az arany középút talán a fetch.

Annyi az előnye a dolognak mindenképp, hogy már van tapasztalatom így mással is.

Mármint jó kérdés még mindig hogy mit és hol szeretnél csinálni. Ugye a php a szerver oldalon fut, js meg - általában - kliens oldalon. Szóval minek mit kellene hogyan összeállítania?

1) kliens <--- te szervered <--- távoli szerver
2) kliens <-+- te szervered
|
+-> távoli szerver

[ Szerkesztve ]

JOGI NYILATKOZAT: A bejegyzéseim és hozzászólásaim a személyes véleményemet tükrözik; ezek nem tekinthetők a munkáltatóm hivatalos állásfoglalásának...

Mármint jó kérdés még mindig hogy mit és hol szeretnél csinálni.
Azt a részét már megoldottam. Azt akartam csak elérni, hogy míg az eredeti (ettől is kezdetlegesebb ) megoldásomban szerver oldalon (PHP) generálódott a komplett tartalom (a bejegyzésekhez (feed) kapcsolódó változók, és az azokat körbefogó HTML kódot is ott raktam össze, és ezt kérte le a kliens JS-tel), az új módszerrel a szervertől már csak a bejegyzésekhez (feed item) kapcsolódó változók érkezzenek, az azokat körbefogó HTML kódot pedig a kliens rakja össze "helyben".

Amúgy ha már külső library: hogyan érdemes használni őket?
A fejlesztőtől kapott elérési utat használva (pl. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>), vagy pedig lokálba leszedni, és onnan linkelni? (És időként ránézni, frissült-e, és ha fontos dolgokban, akkor manuálisan frissíteni.)

Célszerű lokálisan hosztolni, főleg ha nem túl megbízható a távoli szerver.

JOGI NYILATKOZAT: A bejegyzéseim és hozzászólásaim a személyes véleményemet tükrözik; ezek nem tekinthetők a munkáltatóm hivatalos állásfoglalásának...

Köszönöm!

Célszerű a CDN verziót használni mert így a böngésző be tudja tölteni cacheból ha máshol már találkozott vele, nem neked kell bajlódni a frissentartással, és a sávszélt sem eszi.

Azért az unpkg megbízhatóbb mint a saját webszerver.

[ Szerkesztve ]

Köszönöm szépen a tanácsot!

De nem csak CDN verzió van?

https://github.com/axios/axios
Using jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Using unpkg CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Mármint itt más különbséget nem látok, csak hogy melyik szerveren van.

Ebben a peldaban elofordulhat verzio kulonbseg is attol fuggoen melyik cdn-en eppen mi a latest.

Ugy erzem a CDN jelentese se teljesen tiszta szoval egy wiki link.

Vigyázat, csalok!

Ezt arra írtam, hogy sztanozs kolléga a saját hostolást javasolta.

Adott egy szépen működő HTML, benne egy időjárás widget ( [link] ), ami szintén szépen működik. Ez egy "beégetett" szkripttel működik a HTML kódon belül, <script></script> tagek között.
Ez a widget egy olyan területen van, ahova dinamikusan kell tartalmat beszúrnom. Ezért ezt a területet teljesen "kiszerveztem" egy külön html fájlba, amit indításnál, betöltés előtt egy JS behúz a szerverről a megfelelő adatokkal.
Az oldal más részein már működő kóddal csináltam, szépen be is húz mindent, és minden szépen működik - kivéve a JS-et.

Megpróbáltam egy tök egyszerű logolással is, de hozzá sem nyúl.
<script>
console.log("almafa");
</script>
Megpróbáltam külső JS fájlból behúzni függvényként ugyanezt, szintén hozzá sem nyúl.

Van tippetek, hogy az így behúzott, HTML kódban lévő JS-kódot miért nem dolgozza fel se így, se úgy?

Köszi!

Az Axios-szal lesz a gond:
Axios will simply return the raw html and since it is not a browser you won't get anything else.

Na erre akkor ki kell találnom valamit, más megközelítést.

Igen, ez volt a gond, meg is van. Ezt a plusz JS-es részt áthoztam ugyanabba a JS-be, amiben az Axios.get is van, és beraktam .then(function (response)) után (ahol hozzáfűzöm az előbb betöltött HTML megfelelő helyére), és így már szépen betölti a widgetet.

Nem az "axios-szal volt gond", hanem a böngésző nem fogja kiértékelni a script tag-ekben lévő kódot, amit innerHTML-ként megadsz biztonsági okokból. Egyes libek persze csinálnak olyat, hogy ezekre hívnak még egy eval-t, ami nem feltétlen jó.

Egyébként nincs sok szükséged a teljes js-re, amit a getcode ad, elég a 'https://weatherwidget.io/js/widget.min.js'-t behúznod az oldaladra és betölteni a getcode által adott linket (<a ... /a>) ugyanis az a kód is pont ugyanezt csinálja csak dinamikusan (létrehoz egy script tag-et megadja az src-t, beállít egy id-t neki és hozzáadja a dom-hoz).

“Yeah, well, you know, that’s just, like, your opinion, man.” — The Dude

Köszönöm szépen a választ és a magyarázatot! Ennek mindenképp utánanézek!

[ Szerkesztve ]

Sziasztok,

Szeretnék egy hónap választót csinálni az oldalamra de egyelőre csak teljes date picker-eket találtam neten. Valaki esetleg tud erre egy egyszerű kódot ami a kiválaszott értéket el is menti változóba?

Annyit szeretnék csak, hogy:

< January >

És itt a kacsacsőrökkel tudjam változtatni az inner html értéket.

Előre is köszönöm a segítséget!

select control pont erre való
HTML select tag (w3schools.com)

Én kérek elnézést!

Egyszerűen nem értem, hogyan (nem) működik ez a szkript. (https://weatherwidget.io/js/widget.min.js)

Már csak a widget miatt az ezt tartalmazó HTML részt kiszerveztem külön, mert utólag nem tudtam működésre bírni, hogy betöltsön (ezt segítettél megérteni múltkor). A HTML részt betöltötte (ami igazából csak a link az időjárási adatokra a város nevével, de az utána következő grafikus részt, amiért a JS felel, azt már nem. Csak akkor töltötte be, ha az ezt tartalmazó HTML részt az aktuális városadatokkal együtt generáltatom, és ezt töltöm be.
Ugye ezt is írtad: "a böngésző nem fogja kiértékelni a script tag-ekben lévő kódot, amit innerHTML-ként megadsz biztonsági okokból." Ez világos.
Viszont direkt ezért ezt a HTML "panelt" egy külön JS generálja és tölti be, működik szépen. Most viszont néha újra be kell tölteni, és hiába adom ismét hozzá a frissen generált HTML "panelt", így már nem működik. Pedig pontosan ugyanazt a JS függvényt hívom meg. Pontosan ugyanazt. Elsőre működik, másodikra nem. Az elsőt az oldal betöltések hívja meg, az lekér pár adatot adatbázisból, aztán beadja a widgetnek, és betölti. Működik.
De aztán pont ugyanezt a függvényt hívom meg, csak más adatokat kap, de a JS ugyanaz, csak más paraméterekkel dolgozik, és így már nem fut le a widget JS része.

Miért nem? Hogyan lehet ezt megoldani? Biztosan kell rá megoldásnak lennie.

Pl. itt van a widget készítőjének weboldala: https://weatherwidget.io/
Ott akárhányszor megadok egy városnevet, mindig újra és újra generálja a modult. Nem tölti be külön a HTML részt, nem tölti újra az oldalt, mégis, milliószor is betölti, lefut, kirajzolja, működik szépen.
Ezt hogyan kell elérni? Hogyan lehet a weboldal egy adott részén lévő JS-et újra és újra lefuttatni más és más adatokkal? Utólag nem lehet hozzáadni és futtatni, de ha már ott van, hogyan lehet új adatokkal újra és újra futtatni, kiértékeltetni?

Remélem, érthetően írtam le, nagyon lefárasztott már, egyszerűen nem értem.
Tuti alap dolog kell hogy legyen, hisz' az ő weboldalukon is gond nélkül működik.
Átírom én a kódomat bármilyenre, csak működjön.

Lekérem az aktuális koordinátákat, adatbázisból lehívom hozzá a városnevet, ahhoz megvan a forecast7 link, és meg is van minden a widget új adatokkal való betöltéséhez.

<a class="weatherwidget-io" href="https://forecast7.com/en/40d71n74d01/new-york/" data-label_1="NEW YORK" data-label_2="WEATHER" data-theme="original" >NEW YORK WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>

A vastagon szedett és aláhúzott elemeket kell csak cserélnem.

Hogyan lehet ezt a friss adatokkal újra és újra betölteni, úgy, ahogy pl. az ő weboldalukon is működik?

Köszönöm előre is!

[ Szerkesztve ]

[link]

A WeatherWidget codepen oldalán van rá példakód

Ah, nagyon szépen köszönöm!!! Így végre úgy működik, ahogy szeretném! Köszönöm! Annyi ideget megettem vele - persze ez az én hibám, még nem teljesen tiszta, mi-hogyan működik. De azért kérdezek, hogy gyakorolhassak, megértsem, fejlődjek, tanuljak.

A példakód alapján már 1 fokkal érthetőbb, mi történik.
Ahogy látom, ez a megoldás querySelector-ral "behúzza" a megfelelő Class-t, aztán az ahhoz tartozó attribútumoknak új értékeket állít be a kiválasztott városok alapján. Majd ezután meghívja a JS-ben (widget.min.js) lévő inicializáló __weatherwidget_init() függvényt.

A JS-kód tetején a pen-ben írja, hogy van egy újabb, jobb változat is:
https://codepen.io/weatherwidget/pen/vvPrRN
Ez már egy fokkal bonyolultabb (számomra így elsőre), de nekikezdek és próbálom felfogni, mi-merre.
Viszont az egyből feltűnt, hogy nincs benne az előző megoldásban lévő függvényhívás a JS-ből (widget.min.js). És nem is tölt újra, ahogy az előző megoldásban, itt csak simán lecseréli az adatokat, a tartalmat, és nem távolítja el és tölti be újra az egész widget-et.

Erre esetleg kérhetnék egy magyarázatot? A jövőre nézve, a saját szkriptjeimre, hogy tudjam, mi-miért működik így az első változatnál (miért kell az ..._init() függvényhívás), és miért működik így a második változatnál függvényhívás nélkül.

Köszönöm! (Már eleve ezt a példakódot is! )

Az újnál a widget maga egy iframe-ben van (kvázi mint egy új oldal az oldalban). Ha kiválaszt a user egy új helyet, akkor az hív egy postMessage-et (ezzel tudsz window-ok között kommunikálni, ahogy iframe-window között) és elküldi az újonnan beállított adatokat (amire valszeg az iframe-ben van téve egy eventListener és az futtatja le az init-et.

Ez is járható út (bár nekem fura), de ha ezzel mész, a példakódban mindenképpen cseréld ki a postMessage második paraméterét, ahol a példában "https://weatherwidget.io" van a saját oldaladra (vagy *-ra, de ezt nem szabad), különben domain mismatch miatt nem lesz kiküldve az event és nem fog működni (postMessage: [link])

Köszönöm szépen ezt a magyarázatot is!

Sziasztok!

Akadt egy szemléleti problémám, és nem igazán tudom, mit kezdjek vele.

Google Chrome böngészőben futna javascript (weboldal).

Php alatt vannak asszociatív tömbjeim. Azokat kell átküldenem javascript alá. Szóval csinálok json-t, lesz belőle mondjuk ilyesmi: {"0":"0","5":"0"}. Javascript alatt fogadva, és visszaküldéshez json stringre alakítva (window.JSON.stringify) ugyan az így néz ki: [0,null,null,null,null,0].

A problémám, hogy a kulcsok nem ilyen 0 meg 5, hanem mondjuk "134233184674" - 64 bites alkalmazás-unique integerek. Kicsit aggódom miatta, hogy azokból json-t csinálok javascript alól php alá visszaküldeni, a sok "null" miatt lepusztul minden.

Akár objektumot is csinálhatnék tömb helyett, de a javascript nagyon nem szereti a számokból álló kulcsokat. A php-nak furcsa módon semmi baja vele.

Eddig ami workaround-ot találni tudtam, hogy valami betűt rakok elé a számoknak, mondjuk 5 helyett "x5", de így cudar ronda. Ezt vissza is kell majd alakítanom, és milliószámra darabolhatom a stringeket.

A problémám lényege, hogy javascript alatt a tömbök üres indexei egyáltalán léteznek. Van rá valami okosság elmagyarázni a javascriptnek, hogy legyen szíves számokból álló indexekkel asszociatív tömböt építsen?

[ Szerkesztve ]

កុំភ្លេចប្រើភាសាអង់គ្លេសក្នុងបរិយាកាសអន្តរជាតិ។