Cool! Pretty well explained! But it would be worth to mention, that history object also has a property "state", that handles current state. For example, if your page loaded initially, there would be no "popstate" event fired. To make the conjunction between application state and history API state, you'll have to read history.state property to make a proper initialization.
You know what made me happier in this video? it's your last comment, "I had a heck of a time learning this API". So, I'm not the only one got trouble with this API. Thank you for this clear explanation.
So I’m back here watching this video again several years later. Have essentially only been using hashchange since back then, but figured it’s time to properly understand popstate/pushState and implement it in PureScript. (I’m listening to basically zero podcasts these days, and definitely no political stuff anymore, but am addicted to silly LitRPG audiobooks instead) (If I’m back here in another few years watching the video again, I probably won’t comment as it’d give away a lack of progress 😅)
Hey this video was extremely helpful it took me ages to get it but ive downloaded the code and played around with it and now i get it! I think i've solved the problem on my site now thank you
One Problem in your code, i download from your git and run it, now see, when i click any of div and if i refresh the page, then url not works, gives Error : The requested URL /pushstate-and-popstate-master/selected=box-2 was not found on this server. Plzz tell me how to solve it...
Awesome! Btw: I tried this as files (=clicking on the index.html in my folder), and that didn't work -> had to do local hosting (used Five Server). When I didn't do local hosting, my browser lit up like a Christmas tree and yelled at me quite meanly: " Security Error: Content at file://[my_folder_location_here]selected=box-2. Uncaught DOMException: The operation is insecure. " so that ^^ was when I tried WITHOUT local hosting. Side note: I think you can write shorter: "let boxes = document.querySelectorAll(".box")" This selects all the elements with class "box".
hey man thanks for the video, I have some questions regarding ajax. 1- if you check youtube, they are using ajax to load parts of the html, but what is surprising is, you can also navigate different parts with url link, (i mean, if they change some parts of the html, it means they have only one web page) . How to change different parts of the html and make it accessible with link also? 2- the forward and backward event you mentioned. how can we save an entire div with the elements inside it, and how can we save the entire html page? please tell me if you didn't get any of these
For your first question, the answer would be that the changes RUclips performs on the client side when navigation occurs result in the same (or close enough to the same) UI as the server would generate were you to access the new URL directly. Not sure I completely understand the second question.
@@GeekLaunch i have a And the only thing that I change with ajax is the elements inside that div. How can I create pushstate for backward and forward with my situation?
Sorry I missed your comment! The API will still work as intended, but the way I wrote the code in the video it will break because then the browser will request a nonexistent page. What I should have done is make a box click change a query parameter instead of the actual path of the URL. :/
Cool! Pretty well explained!
But it would be worth to mention, that history object also has a property "state", that handles current state. For example, if your page loaded initially, there would be no "popstate" event fired.
To make the conjunction between application state and history API state, you'll have to read history.state property to make a proper initialization.
Hey, thanks for the extra insight, it's really appreciated.
Great explanation! Didn't know this API existed in HTML5.
Thanks for watching!!
Still a great tutorial, also the sassy argument you had with yourself 6:40 was amusing ;)
Dynamic changing title is actualy supported by any browsers, it just needs right way to code it. The code is document.title = 'test'
as a new learner who is bad at javascript, i find this easy to follow:) thankyou
I love how soothing your voice is
You know what made me happier in this video? it's your last comment, "I had a heck of a time learning this API". So, I'm not the only one got trouble with this API.
Thank you for this clear explanation.
11:28 Thanks for your time, excelent tutorial.
Best tutorial , please more webAPIs !!!
Your voice reminds me of Jon Lovett's (I listen to too many podcasts). Also great video, very helpful example to learn this API's basics. Thanks!
So I’m back here watching this video again several years later.
Have essentially only been using hashchange since back then, but figured it’s time to properly understand popstate/pushState and implement it in PureScript.
(I’m listening to basically zero podcasts these days, and definitely no political stuff anymore, but am addicted to silly LitRPG audiobooks instead)
(If I’m back here in another few years watching the video again, I probably won’t comment as it’d give away a lack of progress 😅)
Hey this video was extremely helpful it took me ages to get it but ive downloaded the code and played around with it and now i get it! I think i've solved the problem on my site now thank you
That's awesome, glad to hear you figured it out!
Thankx for your good explanation sir! It was really helpful for me.
What does the e => do? I'm really confused by it
Nice! A concise and really well rounded video! Thank you.
Thanks, very good tutorial!
That was on point! Exactly what I was looking for. Subscribed!!
Thanks for subscribing! I'm currently on an extended break (school + work) but I'll be sure to produce more content in the future!
It's great, I can use it for sure. Also very helpfull with stateless webapps to store all Parameters in and reload.
+Kayoscreed Thanks for watching!
One Problem in your code, i download from your git and run it, now see, when i click any of div and if i refresh the page, then url not works, gives Error : The requested URL /pushstate-and-popstate-master/selected=box-2 was not found on this server.
Plzz tell me how to solve it...
Because you should use urls of existing pages. Watch a piece after 6:10
I know a library that will let all major browser support the entire history api .
Its called history.js on github . check it !
Very good explanation
The code in the video it will break on refresh because the browser will request a nonexistent page.
How do I make it an existing page?
Thanks dude, that was super helpful
Thanks bro your tutorial is useful for me
Nice video 👌 appreciate your efforts 👍
Just a question. When we use history.pushState() , doesn't it pushes to a stack rather than an array as mentioned by you?
I think you're correct because in popstate you just call it as e.state without indexing...
Awesome! Btw: I tried this as files (=clicking on the index.html in my folder), and that didn't work -> had to do local hosting (used Five Server). When I didn't do local hosting, my browser lit up like a Christmas tree and yelled at me quite meanly:
"
Security Error: Content at file://[my_folder_location_here]selected=box-2.
Uncaught DOMException: The operation is insecure.
"
so that ^^ was when I tried WITHOUT local hosting.
Side note: I think you can write shorter:
"let boxes = document.querySelectorAll(".box")"
This selects all the elements with class "box".
hey man thanks for the video, I have some questions regarding ajax. 1- if you check youtube, they are using ajax to load parts of the html, but what is surprising is, you can also navigate different parts with url link, (i mean, if they change some parts of the html, it means they have only one web page) . How to change different parts of the html and make it accessible with link also? 2- the forward and backward event you mentioned. how can we save an entire div with the elements inside it, and how can we save the entire html page?
please tell me if you didn't get any of these
For your first question, the answer would be that the changes RUclips performs on the client side when navigation occurs result in the same (or close enough to the same) UI as the server would generate were you to access the new URL directly. Not sure I completely understand the second question.
@@GeekLaunch i have a
And the only thing that I change with ajax is the elements inside that div. How can I create pushstate for backward and forward with my situation?
what happens in case someone hit the reload button? Thanks for the video!
Sorry I missed your comment! The API will still work as intended, but the way I wrote the code in the video it will break because then the browser will request a nonexistent page. What I should have done is make a box click change a query parameter instead of the actual path of the URL. :/
why do you use if else to pass null value? why not just using selectBox(e.state?.id); ? It would eventually pass null where needed
VIdeo captured 5 yrs ago, there wasn't optional chain.
how to know if user goes forward or back using popstate?
Thanks for sharing this!
Thanks for watching!
*When he hovered over those boxes.*
*Anyone else hear "ee er ee er"*
Its like you sade youseless. But the basic is require for individual project
which text editing software you are using?
Sorry I missed your comment - I'm using Visual Studio Code in this video.
That code doesn`t work in old IE version.
Stop using old versions of IE!!
Big Thanks bros
greats, Thanks aLot man!
+Wira Andhika You're welcome, glad you liked it!
why this can't running on my project (On server ) :(
I don't know, sorry! Hopefully you get it fixed!
Thank you :)
Thanks for watching!!
This is cool man
Thanks, I'm glad you think so!
Cheers!
Building a state tool for a SPA-webapp.. not fun lol...!
thank you so muchhhhhhhhh
'Completely pointless' technology that is the basis of single-paged applications :)