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.
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...
I have a woocommerce checkout page and when i'm doing click on go back button i'm getting confirm form resubmission message on a page how to remove this message and show form
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 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?
it's an arrow function. basically the event listener takes an event ("click") and a callback function. the e as a parameter to the callback function in the event listener, represents the event object and its properties.
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. :/
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".
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.
Dynamic changing title is actualy supported by any browsers, it just needs right way to code it. The code is document.title = 'test'
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.
Still a great tutorial, also the sassy argument you had with yourself 6:40 was amusing ;)
as a new learner who is bad at javascript, i find this easy to follow:) thankyou
I love how soothing your voice is
Great explanation! Didn't know this API existed in HTML5.
Thanks for watching!!
Thanks, very good tutorial!
Best tutorial , please more webAPIs !!!
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!
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!
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 !
I have a woocommerce checkout page and when i'm doing click on go back button i'm getting confirm form resubmission message on a page how to remove this message and show form
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?
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 😅)
Thankx for your good explanation sir! It was really helpful for me.
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?
*When he hovered over those boxes.*
*Anyone else hear "ee er ee er"*
What does the e => do? I'm really confused by it
it's an arrow function. basically the event listener takes an event ("click") and a callback function. the e as a parameter to the callback function in the event listener, represents the event object and its properties.
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...
Nice! A concise and really well rounded video! Thank you.
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.
Very good explanation
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. :/
which text editing software you are using?
Sorry I missed your comment - I'm using Visual Studio Code in this video.
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".
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!
Thank you this is the thing i need now
Its like you sade youseless. But the basic is require for individual project
Thanks dude, that was super helpful
Thanks bro your tutorial is useful for me
Nice video 👌 appreciate your efforts 👍
how to know if user goes forward or back using popstate?
why this can't running on my project (On server ) :(
I don't know, sorry! Hopefully you get it fixed!
That code doesn`t work in old IE version.
Stop using old versions of IE!!
Big Thanks bros
Thanks for sharing this!
Thanks for watching!
greats, Thanks aLot man!
+Wira Andhika You're welcome, glad you liked it!
Thank you :)
Thanks for watching!!
Building a state tool for a SPA-webapp.. not fun lol...!
This is cool man
Thanks, I'm glad you think so!
Cheers!
thank you so muchhhhhhhhh
'Completely pointless' technology that is the basis of single-paged applications :)