I am developing a website for patient management.
The web has a single entry point (let's say it's index.php ). That landing draws a certain HTML that contains a menu and a div
content.
Depending on the menu item that is activated, an Ajax call is fired that fills the menu div
with content.
$(document).ready(function(){
$.ajax({ url: "formulario.php",
dataType: 'text',
success: function(data) {
$("#sentences").html(data);
},
error: function() {
alert("error");
}
});
});
Since all of this happens without changing the URL , I don't have a way to define a unique URL for a particular section. Any visitor to the site will simply see the default landing page.
Is there a practical solution to keep the content dynamically refreshed, but at the same time give each section a unique URL ?
Use hashes/ hashes (the symbol
#
) to distinguish each section from the others. So for example if you have the sections "form", "contact", "history", etc. They would have unique URLs:And you'd still load your menu the same way you're doing now (or you could change it to be links to #form, #contact, etc. and detect the change using an onhashchange event handler ).
The only thing would be that now users could access a particular section using its " deep link ". Then you should change a bit the code that is executed at the beginning so that if there is a hash it detects it and loads the correct page instead of the default page. The change would be simple: you would read the hash (using
window.location.hash
) and with a switch you would choose the url to load. Something like this:working example
I am going to make a basic example with 4 pages (the main page and 3 subpages that will be loaded via AJAX). I leave all the code here, but since it does not run PHP, I have created an online demo on my own server so you can see it working.
index.php (main page):
form.php:
history.php:
contact.php:
You can see that when the page is loaded, it will be done with the content of the section indicated in the hash (if none is specified, the form will be displayed). Also, by changing the URL with each menu interaction, you can press the back and forward buttons because the changes will be saved in the browser history.
I can think of a few ways, one is the one that @AlvaroMontoro told you; another is through the History API and another is using a router on the client side.
History API
This API is very practical and intuitive to use. You have a few methods available:
pushState
replaceState
The method we are most interested in is
pushState
. This method adds an entry to the browser's history. Suppose you click Home , then Portfolio , and finally Contact Me , then the history stack for your domain will be:And if you click back in the browser you will follow that order in reverse mode.
The above code does the following: each time a menu is clicked, the HTML of the section indicating the menu is retrieved via the parameter
?page
which is received in the backend and a view is sent accordingly. Finally, update the URL so that if:Using a Client Side Router
You have a few options here, like Page.js and Navigo . I like Page.js better because it looks a lot like the router from Vue.js. The same example as above can be done with Page.js:
In this case, it is not necessary to prevent the default actions of the links since Page.js takes care of that. You just have to define your base path (
<base href="/tuapp/">
) and take care of fetching the HTML and inserting it into the document.show