History API - Part 2 (The Good Stuff)

[@mathewi2761]

Steve Griffith his js videos are the best on youtube. Simple and solid explanations of modern js functionality

[@stolensentience]

This channel deserves to blow up. Needs way more attention. Thanks Steve, incredible lessons.

[@BrianHaferkamp]

Thanks for this explanation. I've been struggling with this for a while and this really got me over the hump to understand what's going on what is available to me through the API.

[@TargetedIndividual]

Hello. I have a question. If I have never set up postman or any other method to make api calls or http requests, how is it possible for them to be happening? Is there a way to trace the origin? Can I use the api to see all previous inquiries? I believe my network and devices are hacked and I'm wanting to figure out how to see everything that's been going on and trace it back to a person. I believe there are virtual machines hosted on my android device as well as my other devices secretly. I need to find out how to trace it back to an ip and that to a person. I've used the stream app on my iPad to see tons of http Requests happening In the background. Any help would be greatly appreciated. Thanks. Kevin Christian.

[@SteveGriffith-Prof3ssorSt3v3]

Pretty much any app has the capability of making network requests. There are lots of tools like wireshark for monitoring or recording traffic on your network. Not really something that I could help you with, especially just in a video comment.

[@andylib]

This was so helpful, thank you!

[@tranpaul4550]

I have a question. You add event listener for the window in 2 events "popstate" and "hashchange", but when you click on the "a" tag, you change the url by using pushState. However, I am not seeing anything indicates that popState event handler being trigger (showing some text as coded in the ps, hc functions)

[@SteveGriffith-Prof3ssorSt3v3]

You can approach the problem in two ways - listen for the popstate or hashchange as triggers to do things OR listen for the clicks, intercept the click and then use pushState | replaceState

[@tanburiadnanakyldz174]

hello, can we use popstate method to call a new html page as a n one of the page of our web page ... like an ajax or jquery calling the html page or importing the html page .

[@SteveGriffith-Prof3ssorSt3v3]

popstate is the event that happens when a page loads / navigates through the history array. It's not a method that we can call to navigate. location.href = 'new url' will navigate, as will the history.go( ) or history.back( ) methods.

[@kevinthomas3669]

Thank You!!!!

[@SteveGriffith-Prof3ssorSt3v3]

I have a couple new videos on: popstate and hashchange events - kzbin.info/www/bejne/iqPSkq1pp6ytirs and pushState and replaceState methods - kzbin.info/www/bejne/oGK9eaivna10psk That you might find useful.

[@kevinthomas3669]

how would you control page refresh?

[@SteveGriffith-Prof3ssorSt3v3]

listen for the popstate event.

[@ryanford516]

5:17 "But neither hashchange nor popstate fire when we call replaceState or pushState. If it did, you'd just get a circular loop that was constantly calling itself." I don't get it. How would a circular loop appear? In my understanding, if you called replaceState and it triggered popstate (if that were the way how JS works), this event would fire once and that's it because there'd be just a single active history entry change. I'm confused.

[@AnilThakur-lx6ps]

Thanks for posting this video can you please help me to understand can we get KZbin watched history in API in android ?

[@SteveGriffith-Prof3ssorSt3v3]

That has nothing to do with the History API that I am talking about here. To find data based on the KZbin API - developers.google.com/youtube/v3/getting-started However, watched history is private information. You can't access other people's watch history.

[@dangerzone-136]

Thanks for your grear video Dear, But I can not working browser back and forward button on my onepage multistep form..How can I do that Dear? Thanks!

[@SteveGriffith-Prof3ssorSt3v3]

You need to use pushState( ) to change the URL as the user steps through the form and then use the popstate event to intercept the back and forward button event.

[@dangerzone-136]

@@SteveGriffith-Prof3ssorSt3v3Thanks for your kind response. Yes I have added pushState and the first step is working fine and second and rest of the does not work properly. could you please check them and tell me what's going wrong there?

[@dangerzone-136]

@@SteveGriffith-Prof3ssorSt3v3 Here are the code..step working but animation sometimes conflict each other: var state = {}; $(document).ready(function () { history.pushState({ step: 1, }, null, ""); function my_next1_2() { var pgrbar = 2 * 5.56; $('#step-1').css('display', 'none'); $('#step-2').css('display', 'block'); $('.progress-bar').width(pgrbar + '%'); $('#step-2').removeClass("slideInLeft").addClass("slideInRight"); $('html, body').animate({ scrollTop: $('.app-container').offset().top }, 100); } $('.next1_2').click(function () { my_next1_2(); history.pushState({ step: 2, }, null, ""); }); function my_next2_3() { var pgrbar = 3 * 5.56; $('#step-2').css('display', 'none'); $('#step-3').css('display', 'block'); $('.progress-bar').width(pgrbar + '%'); $('#step-3').removeClass("slideInLeft").addClass("slideInRight"); $('html, body').animate({ scrollTop: $('.app-container').offset().top }, 100); } $('.next2_3').click(function () { my_next2_3(); history.pushState({ step: 3, }, null, ""); }); function my_prev2_1() { var pgrbar = 1 * 5.56; $('#step-2').css('display', 'none'); $('#step-1').css('display', 'block'); $('.progress-bar').width(pgrbar + '%'); $('#step-1').removeClass("slideInRight").addClass("slideInLeft"); $('html, body').animate({ scrollTop: $('.app-container').offset().top }, 100); } $('.prev2_1').click(function () { my_prev2_1(); history.back(); }); function my_prev3_2() { var pgrbar = 2 * 5.56; $('#step-3').css('display', 'none'); $('#step-2').css('display', 'block'); $('.progress-bar').width(pgrbar + '%'); $('#step-2').removeClass("slideInRight").addClass("slideInLeft"); $('html, body').animate({ scrollTop: $('.app-container').offset().top }, 100); } $('.prev3_2').click(function () { my_prev3_2(); history.back(); }); window.onpopstate = function (event) { if (event.state.step === 1) { my_prev2_1(); } if (event.state.step === 2) { my_next1_2(); my_next3_2(); } if (event.state.step === 3) { my_next2_3(); } }; });

[@SteveGriffith-Prof3ssorSt3v3]

@@dangerzone-136 you have a mixture of jQuery and vanilla JS. Whenever you hand off parts of your code to another library then you are giving up control of what happens in what order.

[@dangerzone-136]

@@SteveGriffith-Prof3ssorSt3v3 So how should I do then?

[@liveinhouse]

Great, thanks i got it what i wont