JS dinamikusan betöltött oldal elemeinek elérése

Internet: PHP, CGI, stb.

Kedves hozzáértők!

 

Szeretném egyszerűen intelligensen megoldani azt, hogy a weboldal menüjéből választva betöltse a hozzá tartozó lapot, aminek az elemeit aztán js-ből tudjam módosítgatni.

A kérdésem az, hogy a content_statements.html oldalnak a pageMain elemén hogyan tudnám az innerHTML-be betölteni a frissen generált tartalmat?

Először frame-el próbáltam, de azt a chrome eldobja. Akkor tértem át a main/nav megoldásra, ez jobban is tetszik, de a js oldal erősen kifog rajtam.

 

 

index.html

<!DOCTYPE html>
<html lang="hu"> 
    <head>
        <script type="text/javascript" src="js/main.js" ></script>
    </head>
 
    <body>
        <main class="main_div" id="content">
            <div>Válassz a menüből!</div>            
        </main>
        
        <nav>
            <div class="navbar" id="navbar">
                <div class="navs" id="menuExpenses">Tranzakciók</div>
                <div class="navs" id="menuStatements">Kimutatások</div>
            </div>
        </nav>
    </body>
    <script>
        postInit();
    </script>
</html>

main.js

function postInit()
{
    // Kimutatások menüpont
    menuStatements = document.getElementById("menuStatements");
    menuStatements.onclick = function () 
    {
        load_page("content_statements.html");
        -----   Itt használnám az oldal elemeit -------
    };
    
}

content_statements.html

<html>

    <body>
        <div id="pageMain">TODO write content</div>
    </body>
</html>
  • 286 megtekintés

( dlaszlo | 2022. 07. 20., sze – 23:48 )

Szerkesztve: 2022. 07. 20., sze – 23:50

A gond az lehet, hogy utána tudod módosítani a dolgokat, ha betöltődött amit be akarsz tölteni. A böngésző gondolom aszinkron tölti le az aloldalt. Ehhez valami callback-et kellene a load_page rutinhoz adni, ami akkor fut, amikor letöltődött amit vársz, és oda tenni a módosításokat.

Nem gondolkodtál valami kész JS keretrendszer használatán? 

( Nyosigomboc v | 2022. 07. 21., cs – 02:38 )

Asszem ezt ugy szoktak, hogy letrehozzak az elementet, es appendelik a parenthez. ld: https://www.w3schools.com/jsref/met_node_appendchild.asp

Persze ha mar kesz html-ben a menu, letrehozhatsz pl. egy uj span-t is, annak megadod innerHTML-nek a kesz kodot, es ugy illeszted be.

A strange game. The only winning move is not to play. How about a nice game of chess?

Hűha, valóban ezt elfelejtettem csatolni!

A böngésző rendben meg is jeleníti, csak nekem nem sikerült megtalálni benne amit keresek.

function load_page(page) 
        {
            let url='<object type="text/html" data="'+page+'"></object>';
            document.getElementById("content").innerHTML=url ;
        }

( x-daemon | 2022. 07. 21., cs – 10:31 )

szerintem ha nem nagy meretu 1-1 oldal, akkor toltsd be az index.html-ben az egeszet, minden oldal kulon div-ben, ami nem latszik ott display:none kell. ha masik oldalra valtasz, akkor a fooldalon display:none, es amit meg akarsz mutatni oldalt ott display:block

<html>

<div id="id_page_1" style="display: block">1. fooldal</div>

<div id="id_page_2" style="display: none">2. oldal</div>

<div id="id_page_3" style="display: none">3. oldal</div>

</html>

az aloldal tartalmat, ha az index.html letoltesekor meg nem tudod mi lesz, letoltheted kulon a szerverrol, de az inkabb ne html legyen, hanem json, a json-bol pedig felepited az aloldal tartalmat.

neked aztan fura humorod van...

Eredetileg így volt, csak engem nagyon zavar az ömlesztett kód, amikor egymással köszönő viszonyban sem lévő dolgok keverednek egy rakáson. Azért kezdtem el másik megoldás után kutatni, hogy szét tudjam szedni kissebb fájlokra.

Amiért meg html-t próbálok tartani az az, hogy párhuzamosan mindent szerkesztek, és jobban látom ha szépen struktúráltan ott van előttem a html, nem pedig egy adatblokk. Hiába no, nincs benne nagy tapasztalatom.

( TCH | 2022. 07. 21., cs – 10:41 )

function load_page(u, c)
{
	var r = new XMLHttpRequest();
	r.onreadystatechange = function ()
	{
		r.readyState == 4 && c && c(r.responseText);
	};
	r.open("GET", u, 1);
	r.send(null);
}

function set_content_statements(HTML)
{
	document.getElementById("pageMain").innerHTML = HTML;
}

function postInit()
{
    // Kimutatások menüpont
    menuStatements = document.getElementById("menuStatements");
    menuStatements.onclick = function () 
    {
        load_page("content_statements.html", set_content_statements);
    };
    
}

Oldschool Computer - http://oscomp.hu

Kipróbálom, köszönöm!

 

update: Igen, ez működik, és úgy működik ahogyan szerettem volna! Szuper!!!!

function load_page(page, callBack)
{
	var r = new XMLHttpRequest();
	r.onreadystatechange = function ()
	{
		r.readyState == 4 && callBack && callBack(r.responseText);
	};
	r.open("GET", page, 1);
	r.send(null);        
}

function setContentStatements(HTML)
{
    document.getElementById("content").innerHTML = HTML;
    pageMain = document.getElementById("pageMain");
    pageMain.innerHTML = "Most már működik szöveg";
}

( jokeman | 2022. 07. 21., cs – 11:58 )

Tudom, hogy ma már "nem divat" a jQuery, de az ő load() metódusuk pontosan ezt csinálja egyetlen sor kóddal. (Nagyjából a TCH által is leírt módon rakja be a tartalmat, csak ez tud olyat is, hogy a válaszban kapott HTML-ből csak egy adott elemhalmazt használ fel.)

Egy sor kóddal, igen, csak nem egy 10 soros függvény van az egysoros kód mögött, hanem egy ~100 kB-os library. Ez itt pazarlás lenne.

A jQuery-nek akkor van értelme, ha tele van az oldalad dinamikusan változó/animált részekkel, amiket össze vissza kötögettél és lusta vagy/nem fizették meg/nincs idő megírni hozzá azt a kb. 30 kB underlying kódot, aminek a részeit hívogatod. Abszolút szinten mérsékeltnek mondható bloat, de rengeteg megspórolt idő és relatíve még alacsony kliensterhelés.

Az adott elemhalmaz lekérésére is felesleges a jQuery, mint dependencia: létrehozol egy nem csatolt node-ot createElement("DIV")-vel, bedobod az innerHTML-be a HTML kódot, majd a node-ból szokásos getElement(s)ByWhatever() filterekkel válogatsz.

function getHTMLSubElements(HTML, sel, type)
{
	var root = document.createElement("DIV");
	root.innerHTML = HTML;
	switch (type)
	{
		case "id":
			return root.getElementById(sel);
		break;
		case "class":
			return root.getElementsByClassName(sel);
		break;
		case "name":
			return root.getElementsByName(sel);
		break;
		default:
			return root.getElementsByTagName(sel);
	}
}

Vagy valami hasonló. Nyilván a jQuery-é ennél többet tud, de kérdés, hogy szükséges-e a projektedhez az összes létező CSS selector alapjáni lekérés lehetősége. (Egyébként pont a full CSS-compliance miatt lassabb is egy search, mint egy natív...)

Oldschool Computer - http://oscomp.hu

Egy sor kóddal, igen, csak nem egy 10 soros függvény van az egysoros kód mögött, hanem egy ~100 kB-os library. Ez itt pazarlás lenne.

Az attól függ, hogy mit "pazarlunk". :)

Konkrétan a

load_page("content_statements.html");

sor helyére beírja, hogy

$("#content").load("content_statements.html");

és meg van oldva, még aszinkron dolgokkal sem kell foglalkoznia.

 

A jQuery létjogosultsága (pláne 2022-ben) egy teljesen más kérdés. Számos érv felhozható mellette és ellene (ismerem ezeket én is), de nem kaptunk erre vonatkozó peremfeltételeket a kérdésfelvetésben, úgyhogy ennyiből e megoldás "jóságát" ("pazarlásást") sem igazán tudjuk megállapítani. :)

Az attól függ, hogy mit "pazarlunk". :)

Erről beszélek. Ha az idő drágább, akkor lehet van értelme, amúgy nincs. Mondjuk itt még az idő se nagyon játszik, mert egy AJAX függvényt megírni egy perc, letölteni és berántani a jQuery-t ugyanannyi.

Oldschool Computer - http://oscomp.hu

( asch v | 2022. 07. 21., cs – 12:48 )

A további szövegben írod, hogy a dinamikusan betöltött dolgokat utána még kezelni akarod JS-ből. Itt annyi a trükk, hogy az id alapú keresést csak azután tudod elvégezni, hogy már betetted az innerHTML-be, illetve, hogy a tartalmak között jobb ha nincsen id ütközés. Vagy alternatívaként elvileg használhatsz ilyen relatív szelektorokat is, nem globális egyedi azonosítót, de én inkább nem csinálnék olyat.

Én is azt mondom, hogy ha már ilyenek kellenek, akkor nagyon érik egy keretrendszer használata. Az Angular2-vel például már játszogattam, és szerintem nagyon erős cucc. Szinte minden kliens oldalon megy, az első letöltés lehet hogy picit nagyobb lesz, viszont az oldalon belüli navigáció szinte "ingyen" lesz a szerveren. Ez mondjuk akkor számít ha sok usered van a szerver erőhöz képest.

( sargarigo | 2022. 07. 21., cs – 19:54 )

Szerkesztve: 2022. 07. 21., cs – 20:57

Való igaz, hogy nem árultam el mindent, nem tudtam hogy még ezek is fontosak lehetnek/eszembe se jutott :)

Először is, ez az egész cucc egyfelhasználós lesz, saját magamnak akarok egy költségnyilvántartó rendszert építeni. A háttérben egy php/mysql dolgozik, a fronton pedig html/css/js. Eddig a js számomra egy életellenes dolog volt, de láttam egy videót amiből rájöttem hogy igenis van ereje, és az általam hátránynak elkönyvelt dolgokat egyszerűen ki lehet küszöbölni. Szóval a fentiek mellett tanulós projekt is. Szeretem minél natívabban megoldani a dolgaimat, ahol látom és értem hogy mi történik. Mivel nem fizetős hanem hobbi a dolog, ez belefér. Tehát a fejlesztési idő nem kritikus, ellenben az "idegen" dolgok hátrányban vannak (pl jQuery, mindenféle framework).

Hozzászólásaitokból kiderült számomra, hogy megoldás lehet az, ha meggyőződök arról hogy betöltődött az oldal, és lehet hogy ezzel meg is van oldva. Ezt kipróbálom.

Nekem meg az jutott eszembe, hogy végülis nincs előírva hogy ne lehetne minden betöltődő oldalnak saját js motorja. Valamiért az csípődött be, hogy egyetlen js fájl-nak kell elérnie minden html-t. Nem tudom honnan jött ez az ötlet..

Mindenesetre kíváncsi vagyok mire jutok a tanácsaitokkal, kipróbálom őket!

 

update: Végül a callback-es megoldás meghozta a várt eredményt, flottul működik!

Köszönöm szépen a segítséget, és hogy időt szántatok rám!