Kezdőoldal » Számítástechnika » Weblapkészítés » Html almenü, avagy ugyanaz a...

Html almenü, avagy ugyanaz a JS ket html fileban. Lehetséges ?

Figyelt kérdés

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 ?


2023. jan. 25. 11:52
1 2
 1/11 anonim ***** válasza:

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.

2023. jan. 25. 12:08
Hasznos számodra ez a válasz?
 2/11 A kérdező kommentje:

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;

}

}

2023. jan. 25. 12:34
 3/11 A kérdező kommentje:

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

2023. jan. 25. 12:36
 4/11 A kérdező kommentje:

ú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;

}

2023. jan. 25. 12:53
 5/11 anonim ***** válasza:

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.

2023. jan. 25. 13:13
Hasznos számodra ez a válasz?
 6/11 A kérdező kommentje:

[link]


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

2023. jan. 25. 15:04
 7/11 anonim ***** válasza:

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.


[link]


De amúgy egy React használatával sokkal egyszerűbben meg lehet oldani az ilyesmit.

2023. jan. 25. 15:36
Hasznos számodra ez a válasz?
 8/11 A kérdező kommentje:
megnézem ezeket is. köszönöm :)
2023. jan. 25. 18:46
 9/11 A kérdező kommentje:

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,

};

2023. jan. 26. 08:20
 10/11 anonim ***** válasza:
Ez nem tömb, hanem objektum. És simán options.useSSL = false
2023. jan. 26. 10:00
Hasznos számodra ez a válasz?
1 2

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

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!