Html almenü, avagy ugyanaz a JS ket html fileban. Lehetséges ?
Most kezdtem el egy webes felületet csinálni életem első kisérlete.
Van benne JS mely a html része, felcsatlakozik egy szerverre és a kifilterezett adatokat illeszti be a weboldalra.
Ez idáig tökéletesen megy, azon kívül hogy az egész kapcsolat meghal ha a
document.getElementById
-be egy olyan adatot teszek kerül ami a html oldalon nem jelenik meg.
De a problémám az, hogy akarok egy submenüt, ahol további adatokat jelenít meg, sőt itt majd lehet értékeket is módosítani amit ugyanez a javascript dolgoz fel.
Na és itt a probémám, azt meg hogy ? ha a js külön fileba megy, és mindkéát html-be beleteszem
<script type="text/javascript" src="JavaScriptFilePath.js"></script>
akkor két dolog történik. mindkét html külön kapcsolatot létesit a szerverrel ahonnan kapja az adatokat, ez felesleges terhelés és logikátlan.
A másik, hogy mégse lehet ugyanaz a java script mindkét html filenál, mivel a fent említett "document.getElementById .............." funkció csak akkor nem borítja össze a futó javascriptet , ha a htmlben is megtalálható az ehhez tartozó hivbatkozás, ezért tulajdonképpen nem tudom szétválasztani semmilyen módon.
Na de akkor ezt hogyan oldják meg ?
Elég zagyva ez így. Natív JS? Tehát semmi keretrendszer?
A document.getElementById undefined-et fog visszaadni, ha nem létezik az adott ID-vel DOM elem. Gondolom ezt az eshetőséget nem kezeled le.
Ha felrakod a kódot egy kódmegosztóra, akkor kicsit könnyebb segíteni.
1: köszönöm. Az a baj hogy nem tudom felrakni a kódot működőképes állapotban mert az otthoni meg barátaim összes wifi jelszavát, le lehet vele kérdezni sőt még a szomszédhoz is be lehet vele menni (fizikailag) olyan infokat tartalmaz (MQTT szerver, riasztók ki be kapcsolhatóak vele, ajtó kapu nyitható, távirányító távolról klónozható), de ezen volt a legkönnyebb kisérletezni.
A document.getElementById most így néz ki:
if (topic.includes("CONFREAD")) {
console.log ("CONFIG ARRIVED");
} else {
var receivedTopic = topic.trim().split('/').pop(); // Get the subtopic from topic string
if (receivedTopic != "SET") {
console.log("receivedTopic:", receivedTopic);
document.getElementById(receivedTopic).innerHTML =r_message.payloadString;
}
}
ez meg a html részben.
<tr><td >Uptime:</td><td><p id="Uptime" ></td></tr>
<tr><td >Software Version:</td><td><p id="Version" ></td></tr>
<tr><td >Local IP Address:</td><td><p id="IPAddress" ></td></tr>
De nem tudom hogy hogy lehetne lekezelni
Ez van, nem tudom hogy kellene lekezelni
újra itt.. 1.et köszönöm, végülis a felvetett ötlettel rávezettél
az egész bonyolult kód helyett ennyi kellett, hogy kiválogassa azt, hogy mire van szüksége a html kódnak, azt feldolgozza a többit skippeli..
Sokkal profibb.
A fő kérdés még mindig nyitott, de így maximum több connection lesz egy szerverre, de ugyanaz a script mindenhol menni fog.
var receivedTopic = topic.trim().split('/').pop(); // Get the subtopic from topic string
if (document.getElementById(receivedTopic)) { //If exists in HTML document
document.getElementById(receivedTopic).innerHTML =r_message.payloadString;
}
Erről beszélek. Ha az oldalon nem létezik az adott ID, akkor a getElementById undefined lesz, annak meg ugye nincs innerHTML tagja. Ezzel az if feltétellel simán lekezeled az esetet.
De még mindig nem értem, hogy érted az aloldalakat meg a több lekérdezést.
Tedd fel csak a JS/HTML kódot, mindenféle jelszó nélkül egy codepen-re vagy hasonlóra és megnézem.
itt a kód..
amit szeretnék, de erről semmit se lelek.
Egy almenüt ami a config menü lenne.
Ebbe belépve triggereli a read_config() parancsot,-- ami végülis annyi hogy a szervernek küldi hogy a komplett configja kell a microcontrollernek -- ő lekérdezi a controllert és visszaküldi a config értékeket, ez esetben garázskapu távirányító kódokat --
Bármi ami jön szervertől az onMessageArrived() dolgozza fel, az ötleted alapján, ha a receivedtopic (ez a változó tartalmazza a nevét az értéknek) és a payloadstring meg maga az érték, tehát a kód vagy bármi paraméter.
Szóval a read_config() által küldött trigger ezeket küldeti vissza a microcontrollerrel,
ami alapján az alábbi értékei lesznek a receivedTopic változónak:
WiFiSSID
WiFiPassword
MQTTAddress
PhysicalAddress
Code1
Code2
És így tovább. Na, ezeket szeretném egy teljesen szeparált almenübe elhelyezni, mert ezek lesznek a módosítható adatok, és itt tudom majd beállítani..
Összesen ennyi amire rá szeretnék jönni milyen módszerrel oldható meg.
Elnézést ha valamit rosszul fogalmaztam csak nem vagyok szakmabeli meg soha nem tanultam, ezért néha nem tudom megfogalmazni hogy mi micsoda..
Neked dinamikusan létrehozott DOM elemek fognak kelleni. Annak olvass utána.
Létrehozol egy DIV-et, ahova majd az almenük kerüljenek, aztán a kapott adatok alapján létrehozod az almenüt a document.createElement segítségével, majd beszúrod a létrehozott elemet az előre elkészített DIV-be.
De amúgy egy React használatával sokkal egyszerűbben meg lehet oldani az ilyesmit.
Tökéletes volt, sikerült expandable menüket csinálni, teljesen átírtam mindent, kezd normális lenni a kód is, és most már úgy működik ahogy kell.
Egz dolog még érdekel mert nagyot szívtam vele, a https websocket és apache server proxy miatt, és gondoltam megcsinálom hogy működjön https és https nélkül is, mert ahhoz 1 dologra lenne szükségem amit nem tudom hogy hívnak.
van az alábbi tömb, az useSSL értékét szeretném falsera változtatni, erre hogy hivatkozok ? Kerestem de nem lelem, pedig biztosan egyszerű.
var options = {
timeout: 3,
useSSL:true,
userName: "sdfsdf",
password: "dsfsfs",
onSuccess: onConnect,
onFailure: onFailure,
};
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!