how to avoid page from reloading when clicking on urls

can u all send me a tutorial
84 Replies
reeee
reeeeOP3mo ago
im dead
ἔρως
ἔρως3mo ago
what's your tech stack?
reeee
reeeeOP3mo ago
html css js i hated react js after i used it
ἔρως
ἔρως3mo ago
js as in, pure js?
reeee
reeeeOP3mo ago
yup
razesh
razesh3mo ago
preventDefault() stops the default behavior.
reeee
reeeeOP3mo ago
wtf
ἔρως
ἔρως3mo ago
that's one tiny tool
reeee
reeeeOP3mo ago
is that it
ἔρως
ἔρως3mo ago
not always, but somewhat yes
reeee
reeeeOP3mo ago
damn
Tok124 (CSS Nerd)
pretty sure links wont work with preventDefault()
ἔρως
ἔρως3mo ago
but that's to implement it the awful way
reeee
reeeeOP3mo ago
does it always work in cases like clicking links to other pages in the same webapp like home about contact etc
ἔρως
ἔρως3mo ago
that's a big "depends"
razesh
razesh3mo ago
Oops I didn’t see the link in the question Sorry 🙌🏻
b1mind
b1mind3mo ago
don't prevent ahrefs 😮 use a button
ἔρως
ἔρως3mo ago
are you making a single page or multi page site?
reeee
reeeeOP3mo ago
huh im making multi page site
ἔρως
ἔρως3mo ago
are you okay working with old tech?
reeee
reeeeOP3mo ago
😳 if its not bad practice sure
ἔρως
ἔρως3mo ago
you can use an iframe with the target set to the iframe that's it it's not efficient, but works
reeee
reeeeOP3mo ago
<iframe> tag?
b1mind
b1mind3mo ago
whats the example you are trying to do?
reeee
reeeeOP3mo ago
navigation where i click on home about contact etc buttons
b1mind
b1mind3mo ago
or rather whats the issue not reloading the page on navigation. But that is how navigation works
reeee
reeeeOP3mo ago
and the page gets loaded without reloading
b1mind
b1mind3mo ago
you click the link... new page loads
razesh
razesh3mo ago
What do you mean by not reloading?? When you click links, either you go to new page, or you load that link on same page. What is it that you want ??
reeee
reeeeOP3mo ago
i was told that a good and modern website doesnt get reloaded when we click on a link
b1mind
b1mind3mo ago
thats bullshit don't listen to that person ever again
ἔρως
ἔρως3mo ago
that's bullshit indeed
reeee
reeeeOP3mo ago
i mean we go to new page but the page doesnt get reloaded, im not sure if i was precise
b1mind
b1mind3mo ago
What you are asking for is Client Side Routing and without a fallback is the curse of React and whats wrong with Modern web ... change my mind
reeee
reeeeOP3mo ago
soo i wont have to worry about page reloading when sending user to another page through the navigation bar?
b1mind
b1mind3mo ago
no that is how the browser works
reeee
reeeeOP3mo ago
damn
b1mind
b1mind3mo ago
that is how 70% of website work
razesh
razesh3mo ago
If you’re going to a new page then how will you show your data in the page without it loading ?
reeee
reeeeOP3mo ago
they got me worrying about things that dont matter
ἔρως
ἔρως3mo ago
sessions
b1mind
b1mind3mo ago
If you want both I would look into SvelteKit >.>;; (imo works the best for ssr/static/csr combos)
ἔρως
ἔρως3mo ago
or, you dont need to know any data for example, for a blog, there's no data to be saved
b1mind
b1mind3mo ago
yea if you are not trying to save some client side state its pointless
reeee
reeeeOP3mo ago
oh
b1mind
b1mind3mo ago
well not pointless but not an issue xD
reeee
reeeeOP3mo ago
what if theres data to be saved
b1mind
b1mind3mo ago
even then you can pass query params and use URL as state url === best state
ἔρως
ἔρως3mo ago
also, if you have a static page that's being served by a cdn, it's so stupid fast it makes no sense to even think about not reloading the page
b1mind
b1mind3mo ago
unless you had animations or client side state 😄
reeee
reeeeOP3mo ago
i wanted the site to be flexible incase in future the site gets complicated
ἔρως
ἔρως3mo ago
what do you want the site to be about?
b1mind
b1mind3mo ago
I'd say you need to research about webpages more Like how they have and do work
reeee
reeeeOP3mo ago
im not making a specific site im just learning how to make advanced and modern websites
ἔρως
ἔρως3mo ago
then you won't get a specific answer for you, just general advice that may or may not apply to you even for practice, it's good to have an idea of what you want to do
reeee
reeeeOP3mo ago
so no matter what type of website we are making, the page reloading when we click a link is never an issue?
b1mind
b1mind3mo ago
I wouldn't worry about that untill you need too or can answer that question for yourself Then you will know Don't learn by trying to bullet proof yourself, you will still just shoot yourself in the foot.
reeee
reeeeOP3mo ago
what if that need comes pretty soon, i will have to learn that at some point
b1mind
b1mind3mo ago
it wont and when it does you will know
ἔρως
ἔρως3mo ago
when the need comes, you will learn it then
reeee
reeeeOP3mo ago
damn does it come in handy when creating really complex websites?
ἔρως
ἔρως3mo ago
not at all i never had the absolute need for it
reeee
reeeeOP3mo ago
oh
b1mind
b1mind3mo ago
someone really got in your head 😄
reeee
reeeeOP3mo ago
lol yeah
b1mind
b1mind3mo ago
probably a React fanboi 🤢
reeee
reeeeOP3mo ago
and also a client could never complain about the website i created for them reloading when clicking on links?
b1mind
b1mind3mo ago
no a client don't know dick half the time they want something to work and work well.
reeee
reeeeOP3mo ago
yoo ur actually right, they hated plain html css js and probably used react or something similar
ἔρως
ἔρως3mo ago
half? almost never
b1mind
b1mind3mo ago
So don't mistake me... understanding why is important. I use SvelteKit because it lets me do it all really easy.
ἔρως
ἔρως3mo ago
seriously, there's stuff like blogger wikipedia reloads with every click the minecraft wiki as well
b1mind
b1mind3mo ago
70% of websites probably reload 😄
ἔρως
ἔρως3mo ago
there's lost of super famous websites that reload
reeee
reeeeOP3mo ago
oh nice bro we need to do something about people who avoid plain html css js and stuff
ἔρως
ἔρως3mo ago
one thing you might need is to do not reload the page when submitting a form
reeee
reeeeOP3mo ago
cuz they also want others to do the same
ἔρως
ἔρως3mo ago
but that's the only "need"
b1mind
b1mind3mo ago
I would make sure you understand what SSR/CSRendering/CSRouting/SSG are 😄 Cause like what that React lover probably never made clear is they were using it for SPA/CSR... which for most websites (not webapps) is just terrible like LinkedIn is the biggest POS ok so the page does not reload... but it has a 20sec loading state on first load.. Moving the spinner from your browser to inside your page does not change the fact you have to load it 😄
ἔρως
ἔρως3mo ago
that's the part that people don't think about: the loading state they optimize the site to do not reload, but then you click a link and still takes a fair bit to load not to mention this also, for SEO, it is pretty sketchy
b1mind
b1mind3mo ago
and then you take it all away from the browser... so you have to (or the fraemwork) has to remake the behavior. like history api? something as simple as back button
ἔρως
ἔρως3mo ago
oh god the push state and the bullshit and the horrible crap... implementing all that yourself, correctly, is absolutely hell seriously, reloading the page is perfectly fine there is nothing wrong with it with good caching, it may even be faster! oh, and something else: anytime you prevent a page load, you have to handle initializing and de-initializing all events and elements and everything for example, you initialize a datepicker on loading the new page, you may need to destroy it before you delete the element
reeee
reeeeOP3mo ago
thanks for the help guys i learned alot
ἔρως
ἔρως3mo ago
you're welcome
Want results from more Discord servers?
Add your server