Diskuze: Uložení JS proměnné do HTML kódu?

Erik Šťastný

Člen

Erik Šťastný:22.6.2018 8:59

Zdravíčko,
mám web, kde pomocí ajaxu stahuji obsah, nicméně nyní mám požadavek na to aby šel web s aktuálními daty stáhnout do offline podoby. Kompletně předělávat celý web aby měl verzi, která by fungovala bez ajaxu mi přijde jako šílená zbytečná práce.

Zkusil jsem: Jako nejednodušší řešení, mě napadlo data, která se jinak stahují pomocí ajaxu, tak vložit do nějakého neviditelného html tagu při generování offline verze stránky a potom si je pomocí JS zparsovat jako bych je stáhl pomocí ajaxu.

Chci docílit: Je to korektní řešení? Případně jaký html kód použít, který nijak nenaruší ostatní funkčnost webu?

Editováno 22.6.2018 9:00

Odpovědět

22.6.2018 8:59

Peter Mlich

Člen

Peter Mlich:22.6.2018 10:14

Ono by to mozna slo schovat do iframu. Pripadne to proste natahnout jako soubor.

Slo by to obalit do dalsi funkce, ktera vyhodnoti, ktery ze souboru si stahne. Tohle treba pouzivam na otevirani csv souboru z disku.

this.func.fileFromUrl = function(path)
        {
        root.opt.log('classReader.func.fileFromUrl: File reading start...');
        root.req = new XMLHttpRequest();
        root.req.responseType = 'blob'; // pro FileReader
        root.req.onload  = root.opt.cbRequest;
        root.req.onerror = root.opt.cbRequestError;
        root.req.error_path = path;
        root.req.open('GET', path, true);
        root.req.send();
        }

this.func.cbRequest = function()
        {
        root.opt.log('classReader.func.cbRequest: Request reading...');
        var file = root.req.response;
        if (!file)
                {
                root.opt.log('classReader.func.cbRequest: Chyba, neni soubor.');
                return;
                }
        root.reader = new FileReader();
        root.reader.onload = root.opt.cbReader;
        root.reader.readAsText(file,'windows-1250');
        }

this.func.cbReader = function(event)
        {
        root.opt.log('classReader.func.cbReader: File reading end.');
        var str;
        str = isExist(event.target.result) ? event.target.result : (root.reader.result ? root.reader.result : '');
        root.opt.cbEnd(str);
        }

Editováno 22.6.2018 10:14

Nahoru Odpovědět

22.6.2018 10:14

Peter Mlich

Člen

Peter Mlich:22.6.2018 10:24

Ono by to mozna slo schovat do iframu. Pripadne to proste natahnout jako soubor.

Slo by to obalit do dalsi funkce, ktera vyhodnoti, ktery ze souboru si stahne. Tohle treba pouzivam na otevirani csv souboru z disku.

this.func.fileFromUrl = function(path)
        {
        root.opt.log('classReader.func.fileFromUrl: File reading start...');
        root.req = new XMLHttpRequest();
        root.req.responseType = 'blob'; // pro FileReader
        root.req.onload  = root.opt.cbRequest;
        root.req.onerror = root.opt.cbRequestError;
        root.req.error_path = path;
        root.req.open('GET', path, true);
        root.req.send();
        }

this.func.cbRequest = function()
        {
        root.opt.log('classReader.func.cbRequest: Request reading...');
        var file = root.req.response;
        if (!file)
                {
                root.opt.log('classReader.func.cbRequest: Chyba, neni soubor.');
                return;
                }
        root.reader = new FileReader();
        root.reader.onload = root.opt.cbReader;
        root.reader.readAsText(file,'windows-1250');
        }

this.func.cbReader = function(event)
        {
        root.opt.log('classReader.func.cbReader: File reading end.');
        var str;
        str = isExist(event.target.result) ? event.target.result : (root.reader.result ? root.reader.result : '');
        root.opt.cbEnd(str);
        }

Nejspis to chces pouzit na cd.
A nemuzes si vysledky pripravit treba pomoci json nebo serialize? Opet bych to obalil do pomocne funkce, ktera by rozhodovala, co to nacte. Tim padem vse ostatni zustane zachovane.
V php vygenerujes soubor.js a pridas tag script. A z puvodniho kodu odstranis funkci ajaxu, kterou nahrazujes vlastni.

pole = {}
pole.neco = <?php echo json_encode($data)); ?>

function mujAjax(url, arg, func)
{
if (url==neco && arg=="neco") {result = json_decode(pole.neco);}
// dokonce by se to dalo resit cyklem: for (i in pole) {if (url=i)...}
return result;
}

Nahoru Odpovědět

22.6.2018 10:24

Erik Šťastný

Člen

Erik Šťastný:22.6.2018 10:38

Hmm nevím jestli se úplně chápeme, asi jsem se vyjádřil trošku špatně.

Kompletní výsledky mám v souboru, nicméně výsledky nejsou jen jednoduchá struktura, ale je to velká databáze informací mezi kterými může uživatel filtrovat a podle toho se mění dost rozsáhle obsah stránky.

Kdyby mi šlo jen o web, klasicky odešlu defaultní index.php a podle toho co uživatel nakliká, tak to můžu poslat v getu nebo postu podle toho vyzobat správné údaje ze souboru, přegenerovat stránku a poslat zpět. Nicméně tenhle způsob je nepoužitelný pro offline verzi.

Proto bych chtěl uživateli dát celý obsah souboru a ten už si jej pak bude sám filtrovat a upravovat na straně klienta pomocí JS. Když nad tím přemýšlím i ten ajax je asi hloupost a můžu takhle celý obsah souboru, připoslat přímo v prvním requestu a ne ho donačítat přes ajax, moje chyba.

Takže prakticky asi potřebuji pouze odeslat rozsáhlou datovou strukturu přímo v obsahu stránky aby z ní mohl JS brát u klienta data.

Nahoru Odpovědět

22.6.2018 10:38

Peter Mlich

Člen

Peter Mlich:22.6.2018 12:56

Tak mrkni na online dokumentaci k json_encode, jestli se jedna o php. To veme strukturu a zakoduje ji na string. Javascriptem se to pak dekoduje pres JSON.parse(str);
php.net/json_encode
https://developer.mozilla.org/…s/JSON/parse
http://swiftapi.com/api/JSON_Decode

Nahoru Odpovědět

22.6.2018 12:56

Erik Šťastný

Člen

Erik Šťastný:22.6.2018 13:05

Jo to znám a dokonce i používám, spíše nevím kam ten string nacpat v tom HTML Říkal jsi něco o iframu? Ten se hodí na něco úplně jiného, ne?

Nahoru Odpovědět

22.6.2018 13:05

Člen

:22.6.2018 14:41

To, čo sa chystáš urobiť zatiaľ vyzerá ako logický nezmysel, zbytočná práca. Ešte aj nevhodne implementovaná - iframe? Kvôli dátam? Blbosť. Napíš čo chceš vlastne dosiahnuť. V čom má spočívať tá "oflajnovosť" takej stránky, čo tým vôbec myslíš.

Nahoru Odpovědět

22.6.2018 14:41

Erik Šťastný

Člen

Erik Šťastný:22.6.2018 14:49

Na serveru mám soubor s daty např. data.dtb, která jsou odněkud spravována, upravována, atp.

Otevřu webovou stránku, která má sloužit jako zobrazovač obsahu z daného souboru. A zkrátka potřebuju aby šlo prohlížet stránku online s aktuální verzí data.dtb a nebo offline tím, že ji zkrátka uložím na disk ale bude v ní obsažena verze data.dtb v době kdy byla stažena.

Nejlogičtější mi přijde, na serveru obsah data.dtb vpasírovat do html a hotovo. Filtraci, zobrazení atp. bych už řešil u klienta v JS.

Nahoru Odpovědět

22.6.2018 14:49

Člen

:22.6.2018 15:46

To som si aj myslel. A na to sa nemusíš svojej stávajúcej stránky takmer ani chytiť... Predstav si, že načítaš dáta ajaxom a potom nejako vykresľuješ do stránky:

let data = [] // moje pole objektov na vykreslenie
data = loadData('/mountpoint') // načítaj doň dáta
vykresli(data) // a potom ich nejak vykresli

Funkcia na načítanie dát by potom mohla vyzerať nejak takto:

async function loadData (mountpoint) {
  let response = await fetch(mountpoint)
  return await response.json()
}

No a všetko čo ti stačí urobiť je načítané dáta si uložiť:

let data = []

async function loadData (mountpoint) {
  let data // tu budú načítané dáta na vrátenie
  try {
    // skús najskôr načítať dáta online
    let response = await fetch(mountpoint)
    // nachystaj ich na vrátenie
    data = await response.json()
    // a ulož ich serializované do localStorage
    localStorage.data = JSON.stringify(data)
  } catch () {
    console.log('error, loading saved data')
    // ak nie sú online dáta dostupné, načítaj poslednú verziu z localStorage
    data = JSON.parse(localStorage.data)
  }
  // a vráť ich
  return data
}

data = loadData('/mountpoint')
vykresli(data)

Výsledkom takejto jednoduchej konštrukcie je, že ak si online, použijú sa online, aktuálne dáta. A ak nie, tak sa použijú posledné uložené dáta. Originál sa na takéto niečo robia PWA aplikácie s využitím service workers, ale keď už máš stránku hotovú, toto je pre teba najjednoduchšie riešenie. A nezabudni si tú stránku nakešovať s web manifestom. A máš jednoduchý "offline first" prístup.

Editováno 22.6.2018 15:47

Nahoru Odpovědět

22.6.2018 15:46

Erik Šťastný

Člen

Erik Šťastný:22.6.2018 16:02

Hmm nevím jestli je local storage možností, mám obavu, že je požadavek moct html dokument kopírovat mezi PC.

Nahoru Odpovědět

22.6.2018 16:02

Člen

:22.6.2018 16:35

To ktorý idiot im sľúbil, že to pôjde len tak skopírovať, ako textový súbor? K stránkam so živými dátami sa pristupuje ako k aplikácii. Tak ako Word nemôžem skopírovať, ale pred prvým použitím nainštalovať, tak vnímaj aj web aplikáciu a prvé otvorenie stránky ako inštaláciu. Ako chceš tie dáta prenášať? Kopírovaním? Tak, že ich urobíš súčasťou DOM modelu? Bez pardónu, vidím to tak, že nejaký amatér sľúbil zákazníkovi pekný nezmysel.

Nahoru Odpovědět

22.6.2018 16:35

Erik Šťastný

Člen

Erik Šťastný:22.6.2018 16:42

Žádný idiot nikomu nic neslíbil.

Potřebujeme si ve firmě udělat evidenci hardwaru, který vyrábíme aby byl stupidně přehledný v nějakých tabulkách na interním webu s možností filtrování atp.

Data se berou ze zmíněného souboru, který může upravovat osoba absolutně neznalá programování.

A zkrátka někdy je potřeba aby si člověk ze servisu nebo někdo mohl web jednoduše uložit na local na NTB a odjet s ním na místa, kde není internet dostupný. Tam se samozřejmě může hodit tak dokument nechat na local PC nebo něco.

A ano "Tak, že ich urobíš súčasťou DOM modelu" je to k čemu celou dobu směřuju.

Editováno 22.6.2018 16:43

Nahoru Odpovědět

22.6.2018 16:42

Člen

:22.6.2018 16:56

Web si teda otvorím ešte v servisnom stredisku aby sa mi aktualizovali údaje, zavriem notebook a môžem ísť smelo tak, kde nie je internet. Stále nevidím dôvod zúfalo prerábať web kvôli tomu, aby som si ten prehliadač nemusel otvoriť na internete v stredisku, ale miesto toho si tam ten súbor zdĺhavejšie kopíroval. Kde je logika? Prerábať celý web kvôli nezmyselnému požiadavku ktorý celý proces ešte aj skomplikuje, miesto zjednoduší? Proste nie. Dáta sa do DOM modelu neukladajú, okrem pomocný dát vo forme <element data-mojaPremenna = "mojaHodnota">. To je tak všetko. To čo chceš urobiť ty, uložiť komplexné dáta, je prácny nezmysel náchylný na chyby. Znovu: nehľadaj ako uložiť dáta do DOM modelu, ale premysli si rozumnejší flow. To, čo chceš urobiť logiku má, to ako to chceš urobiť logiku nemá.

Nahoru Odpovědět

22.6.2018 16:56

Erik Šťastný

Člen

Erik Šťastný:22.6.2018 17:08

Logika je taková, že prostě obsah local storage nevezmu a nepřenesu ho jednoduše.

Mám spoustu důvodu pro to, proč to potřebuji kopírovatelné, klidně ti je vyjmenuji.
Budu rád, když mi dáš jiný nápad než vyplivnout obsah do DOMu, nicméně zatím jen říkáš, jak je to blbej nápad, ale alternativu nemám :/

Nahoru Odpovědět

22.6.2018 17:08

Člen

:22.6.2018 17:16

Máš kopec alternatív, len pre stromy nevidíš les... Ale ok, kapitulujem... Chceš to s jQuery, alebo s čistým JS?

Nahoru Odpovědět

22.6.2018 17:16

Erik Šťastný

Člen

Erik Šťastný:22.6.2018 17:20

Spíše je to tím, že je to teprve druhý den co jsem napsal vůbec řádek JS nebo HTML

Záleží v čem bude alternativa spočívat, jQuery jen pokud to bude jednoduché na pochopení Preferuji čisté JS.

Nahoru Odpovědět

22.6.2018 17:20

Člen

:22.6.2018 17:34

Že si začiatočník je jasné od prvého okamihu a vôbec to nevadí. Ale že si nenecháš poradiť a silou mocou sa pokúšaš o nezmysel už je na pováženie... Takže: najjednoduchšia možnosť ako uložiť dáta do DOM modelu, je urobiť si skrytý element s obsahom ... áno, dáta:

<!-- maj takúto značku v html. kdekoľvek -->
<div id="myData" style="display: none"></div>

Upravená funkcia z predošlého príkladu ktorá nepoužíva localStorage, ale DOM:

async function loadData (mountpoint) {
  let data // tu budú načítané dáta na vrátenie
  try {
    // skús najskôr načítať dáta online
    let response = await fetch(mountpoint)
    // nachystaj ich na vrátenie
    data = await response.json()
    // a ulož ich serializované do obsahu skrytej značky
    document.getElementById('myData').textContent = JSON.stringify(data)
  } catch () {
    console.log('error, loading saved data')
    // ak nie sú online dáta dostupné, načítaj poslednú verziu zo značky
    data = JSON.parse(document.getElementById('myData').textContent)
  }
  // a vráť ich
  return data
}

Netuším vôbec, či to bude fungovať. Teoreticky by to malo a malo by to vyžadovať čo najmenej zásahov do existujúceho kódu. Ale zas a znovu: celé je to blbý nápad prameniaci z nedostatku predstavivosti na základe nedostatku skúseností. Takto sa to proste nerobí a si prvý a posledný čo sa o podobnú blbosť pokúša.

Editováno 22.6.2018 17:35

Nahoru Odpovědět

22.6.2018 17:34

Erik Šťastný

Člen

Erik Šťastný:22.6.2018 17:41

Tak děláš si legraci?

Celou dobu tu tvrdím, že je to jediná věc co mě jako naprostého začátečníka na poli webu napadla, že si mile rád nechám poradit alternativu nějakou alternativu

A ty mi tu tvrdíš, jak si nenechám poradit a silou se pokouším o nesmysl? Teď mi dokonce pošleš jak implementovat ten můj nesmysl, ale zase jen dodáš, jaká je to hloupost, opět žádnou alternativu nemám... :/

Editováno 22.6.2018 17:41

Nahoru Odpovědět

22.6.2018 17:41

Člen

:22.6.2018 18:06

Ale ja som ti najskôr povedal o alternatíve. Nič nikam trápne nekopírovať. Otvoriť stránku na internete za účelom aktualizácie a potom pokojne odísť tam, kde internet nie je... Celý ten nápad s kopírovaním stránky je nezmysel. To sa nerobí. Nikdy, nijak. Znovu: stránky vnímaj ako aplikácie, ktoré treba pred prvým použitím nainštalovať. Ako napríklad Word, bežnú aplikáciu. Už si ho niekomu dával na počítač tak, že si mu ho iba skopíroval z iného pc? Nie. Do budúcna tak vnímaj aj dynamické stránky. Idú nakopírovať? Nie. Treba ich nainštalovať - aspoň raz otvoriť... A príklad čo som ti napísal tomu vôbec neodporuje. Hoci asi funguje, je to číra zhovadilosť a akémukoľvek vlastnému zákazníkovi by si niečo takéto implementoval, len by si sa strápnil. Povedal som ti ako na to len preto, že je to pre teba a nikam sa s tým nejdeš zosmiešniť. Ale odnes si z tejto debaty toto: dynamická stránka nie je textový súbor, nikdy sa nekopíruje. Dynamická stránka je web aplikácia a tie sa inštalujú ako akákoľvek iná aplikácia. Akurát, že v prípade web aplikácie inštalácia zbehne pri jej prvom otvorení.

Nahoru Odpovědět

22.6.2018 18:06

Erik Šťastný

Člen

Erik Šťastný:25.6.2018 7:56

Jenže ty mi bohužel nenabízíš alternativu, ty mi říkáš, že náš požadavek prostě nejde udělat správně a nabízíš řešení, které našim požadavkům prostě nevyhovuje. :/

Nahoru Odpovědět

25.6.2018 7:56

Člen

:25.6.2018 8:22

Napísal som ti kód ktorý si hľadal.
Vysvetlil som Ti, že tak sa to nerobí.
Spomenul alternatívu, PWA aplikáciu.

Nahoru Odpovědět

25.6.2018 8:22

Peter Mlich

Člen

Peter Mlich:9.7.2018 11:54

Jestli jde o tabulku, tak resim uplne podobny problem. Mam excel / csv tabulku. Potrebuji si ji prohlizet a ruzne filtrovat. A navic editovat.
Ta js cast je naprosta silenost jen pro filtrovani. Ale krasne mi to chodi. Jenze, pridat editaci znamena prekopat cely kod. mozna cislovat radky, abych vedel, co edituji, kde. Takze, zatim vyvyjim odlisny soubor pro editaci.
Ukladani mam vymyslene tak, ze prihlasim, poslu na server csv. A on si to zpracuje. Porovna zmeny, vypise a tak. Puvodne jsem tam mel diff.exe, ale udelam si na to vlastni kod. Pro porovnani potrebuji ty radky seradit.

Jo, jiste existuje jquery pro to filtrovani.
Jo, do divu je mozne dat tabulku a nastavit div editable.
Ale, ja mam radeji vlastni veci. Zkousel jsem to editable. Neco to umi, neco zas ne. Nechtelo se mi s tim vrtat.

Ale je dost problem prepsat html aby delalo neco jineho nez jen vykreslilo tabulku a jeste podle pozadavku. A tez jsem se natrapil u editace.
Passivne mi to zatim funguje tak, ze si nactu soubor jako string a pres js z toho csv souboru udelam pole.

Takze, pokud to muzes tabulkovat, tak bych to udelal jako nacitani souboru. A bud pres js reader nebo iframe.body.
A nebo to nacti jako js. Ja nemuzu. Ja potrebuji, aby to bylo csv pro otvirani v excelu. Jeden kolega brblal, ze je zvykly na excel a ze se mu html editovani tabulky nelibi. si nevyberes, proste Ale sef zas, ze excel ne, ze minule tam kolega nahral stary soubor a nam prepsal data. Takze chce hlidat zmeny a tak.
V tom js by csv tabulka vypadala asi takto

var xxx = "\
aaa1;bbb1;ccc1\n\
aaa2;bbb2;ccc2\n\
aaa3;bbb3;ccc3\n\
";
xxx = xxx.split("\n");
for (i in xxx) (xxx[i] = xxx[i].split(";")); // chybicka opravena
alert(xxx[0]);
// \n je novy radek
// \ na konci musi byt kvuli js stringu

Nebo bych tam dal primo js kod a ne csv.

<script scr=data.js></script>
---
var xxx = [
["aaa1", "bbb1", "ccc1"],
["aaa2", "bbb2", "ccc2"],
["aaa3", "bbb3", "ccc3"],
];

Graficky v tom neni prilis rozdil.
No, a potom mas tu js aplikaci, ktera z toho naklonuje radky (cyklem) pro filtr. Vyfiltruje. A zobrazi z pole html tabulku.

Takhle nejak to resim ja. Jen mam pro csv lepsi funkci, ktera umi zpracovat i [", \n, ;] znaky v bunce. Tamten priklad byl zjednoduseny.

A druha moznost je, jak pises ty, pripravit si uz primo vysledne tabulky pro vsechny pripady.

Editováno 9.7.2018 11:55

Nahoru Odpovědět

9.7.2018 11:54

Peter Mlich

Člen

Peter Mlich:9.7.2018 11:57

jo, ale ty to pises v nejakem ASP nebo, co to je. A on chtel js.

Nahoru Odpovědět

9.7.2018 11:57

Člen

:9.7.2018 12:03

ASP? Žartuješ, že. Ten kód čo som napísal je čistý JS.

Nahoru Odpovědět

9.7.2018 12:03

Peter Mlich

Člen

Peter Mlich:10.7.2018 10:57

Ok, ok. mne jen zarazily vyrazy jako let, asyn a pod. Nejaka novinka, koukam na google...

Nahoru Odpovědět

10.7.2018 10:57