I have two basic pages with the urls
http://localhost:8000/page-a and
http://localhost:8000/page-b.
I'm using html5 history api and following this tutorial.
The only difference is that I add the api endpoint of the data, like
http://localhost:8000/api/page-a and
http://localhost:8000/api/page-b, in pushState().
I can easily go back and forth in history but when reloading the page and go back and forth, window.popstate does not trigger anymore. Rather, it directly navigates to page-a and page-b as it says in the console.
In the demo, I reloaded the pages but it still works fine. Is this because the data has to be fetched with AJAX? (but in the tutorial it says the AJAX is fine)
EDIT
I forgot to mention that the pages are created dynamically (with Django). Is it because of the dynamic nature of the pages?
SOLVED
I should have added the url of the state like http://localhost:8000/api/page-a/. On page reload, Django always resolves the url http://localhost:8000/page-a to http://localhost:8000/page-a/ so when I click the back button the onpopstate is never triggered. It was just a '/' and costed me like two days.
Related
I am trying to make a navigation button that just sends me to the index page but shows a different text in the url.
so i found this line of code to help me do it.
window.history.pushState("index.php", "test", "Testie");
But the problem is when i run it in an onclick function it just takes the last value and puts it in the url bar.
That itself is not the problem its that i dont have a Testie.html/php file.
I want it to be send to index.php but make the appearance of Testie in the url.
How do i do it?
The purpose of history.pushState is to say:
Some other JavaScript has manipulated the page so what the user is seeing is the same as what they would see if they went to this URL.
It lets you get fast updates to the page and bookmarkable URLs with real content that is good for fast initial page loads and for search engines to index.
It doesn't send data to the server (you need to do that with other code).
It does mean that if the URL isn't actually handled by the server (as you say it is in your case) then the page will break if the user does bookmark the page (or refreshes it, or sends the link to someone, etc).
If you want to navigate to a URL with Testie in it, then the first thing to do is to make the server support it. Forget about JavaScript.
I'm trying to integrate Hotjar with an admin panel.
The way it currently works is some sort of SPA without page loads and neither URL changes.
It all happens under /index.php and then when we need to change a page, just send an AJAX request to load it's content.
From checking the documentation, Hotjar seems compatible with SPA's but only when there's a change in the URL (either query string or hash).
Is there a way to trigger in JS a page change to a page name (i.e. Main Page) ?
I've tried
hj('vpv', 'Main Page')
But the output seems weird
url: "http://mydomain.comTest Page"
Thanks.
You can track your changes manually by adding additional JavaScript after your AJAX calls.
Documentation:
To Manually Issue a State Change
hj('stateChange', 'some/relative/path');
Example:
Imaging that you have a SPA with base URL http://example.com/ and you want to track the main page and a page that gets dynamically loaded with AJAX once you click some button.
In order to do that, you would need to:
1) In your Hotjar account, create two heatmaps. For the main page, you can use the base URL http://example.com/. For the page that is going to be loaded dynamically, you can put a virtual URL, e.g. http://example.com/my-dynamic-page, which will be used only for recording and will not need to exist in your SPA.
2) In the JavaScript of your application, add the state change code after the AJAX call that will dynamically load the page.
You need to use the virtual URL that you defined in the previous step to let Hotjar know that this is a new page and you want to track it separately:
hj('stateChange', 'http://example.com/my-dynamic-page');
I have a table with live data in it (meaning it is stored on the server and people who has access can view the data in their machine as well). I have a Create data page and View data page that contains the table. Once I have finished creating a new data and click a link going to the View page. The data should be there already.
I have tried the location.load() internal script in the View.html page that is triggered by the attribute onLoad="" but it's not working. However, when I create a button that has a function to refresh, it does work but I want it to be an auto refresh.
To make it easy and simple, use location.reload(). You can also use location.reload(true) if you want to grab something from the server.
You can simply use an jQuery Ajax call to make call to your backend API and fetch data, which you can add to your html table. This process you can handle in page/document ready or load events. I don't think you need to reload the page just to achieve this.
If you are working with AngularJs SPA (mentioning this as you added the tag), these two HTMLs/Pages can be rendered into the same layout based on the route and follow the above mentioned approach (using $http.get of Angular) to get view data and bind it to the respective view. As it is SPA, no concept of page reload.
As seen in YouTube, when you click a YT link it before redirecting you it preloads the layout of the page and then it redirect yoo it, for you to not having to see how the layout items load.
How do I make this with, JavaScript, PHP, HTTP, jQuery or with any other language?
I don't think you really understand what is going on behind the scenes at YouTube. You see, the template/layout doesn't always change. The data always changes. It isn't loading the layout (unless the new page has a different template, such as sending a message or viewing a user profile), it is fetching the data from a database and then it uses javascript to replace the current data on the page with the data it just fetched. It does this through AJAX. They use Python on the back end.
Basically... this is what happens when you click a link for a new video:
1) You click the link.
2) Some JavaScript code makes an XMLHttpRequest to a script on the server which processes the request. A progress bar appears on the screen.
3) The script on the server connects to a database and grabs the information... like other videos in the playlist, comments, the video description, etc. It does this by submitting a query to the database.
4) The query returns the information to the script which in turn organizes it and returns it to the AJAX request (asynchronously, of course).
5) The JavaScript receives the information that it was waiting for and updates the HTML of the page. The JavaScript also does some other stuff behind the scenes, like update the URL and browsing history so that you can hit your "back" button and return to the previous page that you were on. (If the template for the newly requested page is different, the JavaScript will restructure the HTML of the page appropriately.)
So I have my site at http://example.com/foo/ (under a directory, the main domain is for something else).
Using .htaccess, I've set up my pages so the URLs look like http://example.com/foo/about/, http://example.com/foo/polls/, http://example.com/foo/registration/, etc. This works great and the site loads fine and can be traversed without any Javascript issues.
Now, I'd like to add some AJAX functionality to the navigation. If I'm on http://example.com/foo/ and I click the navigation for "About", it changes the URL to http://example.com/foo/#about and dynamically loads the about page in one section of the site. I also have this working.
I have two problems which involve handling switching between AJAX and non-AJAX URLs.
If I'm on http://example.com/foo/about/ and I click on polls, it would look like http://example.com/foo/about/#polls which doesn't look very pretty. Ideally, I'd want every AJAX URL to be formatted with just the main directory and a hash, like http://example.com/foo/#about.
Should I handle it by forcing an actual (non-AJAX) redirect to the index page with a hash symbol then load it from there?
The other problem is the reverse. If I send http://example.com/foo/#about to someone who has Javascript disabled, or maybe if someone links to it and a bot crawls that link, is there any way to handle that to redirect to the correct non-AJAX page or is this just an unfortunate fact of life I'll have to deal with?
If you need non-javascript support, I'd change all your urls directly to the pages. Like http://example.com/foo/#about to http://example.com/foo/about/
Then, the javascript can intercept it, call event.preventDefault(), and 'redirect' it to #about, which will follow your ajax functionality.
If the client doesn't have javascript, it will go to http://example.com/foo/about/ as normal.
As for being on http://example.com/foo/about/, a javascript client should never get here as they will always be redirected to hashtags.
1) if you redirect to the main page and then use ajax to load the about page that would just not make much sense. what you should do is make everything work through ajax : there should never be a http://example.com/foo/about/ in the first place only http://example.com/foo/#about then you just update the hash and the content when you click on polls.
2) there is no way to avoid, sorry.