Html + javascript ja filter elements?

[waagner]

How To Filter Elements

Onko oikea tapa käyttää tuota, jos haluaa koodata kotisivulle "tägit".
Eli nämä mitä esim blogeista löytyy, jolla yksilöidään postauksia jotka halutaan näyttää?

Tuo olisi erittäin yksinkertainen ja toimiva ratkaisu, mutta ongelma tuossa on että kaikki pitää ympätä samaan index.html tiedostoon, muuten ei pysty linkittään toiselta html-sivulta takas näitä "filterSelection" valintoja.

 

[Paapaa]

Onko oikea tapa käyttää tuota, jos haluaa koodata kotisivulle "tägit".

Riippuu ihan kaikesta. Miten ne kotisivut on nyt tehty, mistä sisältö tulee, muuttuuko se, pitääkö filtteröintejä lisäillä/luoda dynaamisesti jne? Itse tekisin öbaut kaiken dynaamisen Reactilla, enkä käpistelisi suoraan DOMia tippaakaan. Mutta, jos on joku simppeli staattinen sivu, johon ei hirveästi tule muutoksia ikinä, voi tuollainenkin passata.

Varmaan yleisemmin se sisältö tulee tietokannasta ja tägejä ei hardkoodata, vaan otetaan sieltä tietokannasta.

 

[Zvona]

Leikin vähän idealla: CodePen-esimerkki

Lyhykäisyydessään:
- hash (url#tag) kertoo, että mitä haetaan
--> esimerkissä käytetään mock-palvelua, joten siksi tag on kryptinen id. Mutta perusideana siis, että klikatessa tagia, se muokkaa hashin muotoon #jotain, jonka jälkeen JS:n puolelta (`onHashChange`) tehdään fetch tuolla hashilla

- näytetään haettu data ja poistetaan vanha
--> esimerkissä pientä ja tarpeetonta CSS-kikkailua, mutta jotain silmäkarkkia kannattaa lisätä, jotta käyttäjä huomaa sisällön muuttuneen. `displayData` siis leikkii vähän timeouteilla heittäen vanhat elementit pois ja lisäten uudet elementit noudettuun JSONiin perustuen

- mahdollisuus suodattaa jo näkyvillä olevaa sisältöä
--> esimerkissä korostetaan match keltaisella. Eli kirjoittamalla esim. "foo", se korostaa ensimmäistä artikkelia jne. Tämä logiikka on nakuteltu `handleFiltering` funktioon.


Tämä on hyvin nopea, lyhyt ja halpa (0€ + alv24%) ratkaisu oletettuun ongelmaasi. Varsinaista käyttötarkoitusta on lähes mahdoton arvailla, joten siksipä tällainen ensimakustelu tähän rakoon.

Kerro toki enemmän, mitä haluat ja miten esim. minun "ratkaisu" soveltuu / ei sovellu käyttötarkoitukseesi.

 

[greenlight]

Leikin vähän idealla: CodePen-esimerkki

Lyhykäisyydessään:
- hash (url#tag) kertoo, että mitä haetaan

Hashtagin käyttö on aina huono ajatus, koska sitä voi käyttää vain yhden kerran samalla sivulla ja samalla potentiaalisesti rikot myös hashtagin oikean käyttötarkoituksen eli linkkaamisen eri osioihin sivun sisällä. (Mikäli et käytä / tue sivunsisäisiä linkkejä, niin luultavasti sivut on suunniteltu väärin.)

 

[waagner]

Joo kyseessä on hyvin simppeli staattinen sivu jota harvoin päivitetään, joka on koodattu itse. Ja siksi yritän pitää hommat simppelinä.

Muistelin että tämä oli se ikiaikainen tapa <a href="osoite.html#ankkuri1"> linkittää pelkkä ankkuri toisella sivulla, mutta tuo w3schools käyttää javascriptiä <a onclick="filterSelection('cars')"> niin se linkki pitäs vissiin tehdä sillä että se toimis ja siinä loppuu taidot kesken.

Kyllähän tuo @zvonan esimerkki taitaa olla tätä päivää, että haetaan jokainen "artikkeli/postaus/sisältö" sivulle erillisestä tiedostosta.

Ja tuosta ensimmäisen postauksen linkistä kopsasin suoraan koodin itelle, koska se vaan toimi ja sopi melkein sellaisenaan käyttötarkoitukseen. Mutta nyt yritän tehdä kaiken oikeaoppisesti ja mahdollisimman yksinkertaisesti, mikäli tuohon nyt ei mene kovin montaa päivää.

 

[waagner]

Tuolla @Zvona antamalla codepen-esimerkin avulla tajuaa jo vähän enemmän tuosta hommasta. Ilmeisesti siinä käytetään hyväksi tätä "JSON is a lightweight format for storing and transporting data".

Kiitoksia muutenkin vastauksista pitää yrittää vielä perehtyä niihin syvemmin.

Mitä nyt itselle tehny erillaisia html-sivuja eri käyttötarkoituksiin niin ne toimii kyllä salamanopeasti, kun niissä ei ole mitään turhaa. Ja muutenkin aina kiva oppia uutta aivan sama mikä on aihe.

 

[Zvona]

Hashtagin käyttö on aina huono ajatus, koska sitä voi käyttää vain yhden kerran samalla sivulla ja samalla potentiaalisesti rikot myös hashtagin oikean käyttötarkoituksen eli linkkaamisen eri osioihin sivun sisällä. (Mikäli et käytä / tue sivunsisäisiä linkkejä, niin luultavasti sivut on suunniteltu väärin.)

Mmjoo... tämä pitää sinänsä paikkansa. Toki monet router-kirjastot käyttävät nimenomaan hashia reititykseen etenkin silloin, kun History API ei ole saatavilla tai middlewarea ei ole konffattu oikein server side renderingin osalta. Eli toinen vaihtoehtohan olisi käyttää History APIa, jolloin formaatti olisi esim. //domain.tld/tags/someTag.

Esimerkin perimmäisenä tarkoituksena oli kuitenkin demonstroida kolmea OP:lle olennaista ominaisuutta:
1. fetch():in käyttö JSONin hakemiseksi (mikä lienee tässä järkevin tapa?)
2. haetun datan esittäminen ja vanhan poistaminen DOM:ista (toki hieman vanhanaikainen tapa. mutta ollessa ainoa käyttötapaus(?), niin ihan passeli)
3. datan filtteröinti. toki elegantimpi tapa olisi ollut käyttää filter()-funktiolla palauttaen täsmäävät DOM-elementit taulukkona, jota sen jälkeen olisi käsitelty kehittäjän ehdoilla