Call javascript function when anchor tag(#) in html link is accessed or reloaded

Question

I have a function that create a html page

function createVisuUsuario() {
        var content = document.createElement("div");

        content.className = "content";
        content.id = "content-add";
        content.innerHTML = '<h1>Visualizar Usuário</h1>'+
                        '<form>'+
                                '<br>'+
                                '<div id="res-visu"></div>'+
                        '</form>';
        document.body.appendChild(content);
}

An another function that calls the function above and this uses ajax to connect to the php and bring information from the database

function visuUser() { 
        limpaTela(); 
        createVisuUsuario(); 
 
        var res_visu = $("#res-visu"); 
        $.ajax ({
                url: "php/cadastro.php",
                type: "POST",
                data: {"chave":"visu-teste"},
                success: function(res) {
                        var str = res.substring(1,0);
                        res = res.substring(1);
                        if(str == 0) {
                                res_visu.html(res);
                                res_visu.css("text-align","center");
                        
                                tabelaFiltro();
                        }
                        else if(str == 1) {
                                res_visu.html(res);
                                res_visu.css("color","red");
                        }
                },
                error: function() {
                        console.log("erro");
                }
        });
});

i have a button that calls this function when click it and put an anchor tag on the html link: Button:

<a id="visu-user" class="menu-link">Visualizar Usuário</a>

link

localhost/teste.php#visu-user

Is there a possibility to when i access this link "localhost/teste.php#visu-user" or reload it, it calls my function visuUser() and create the page and etc.

Answer 1

You can first make an onload function, that does what Abbas says:

function check_hash() {
    if(location.hash == '#visu-user') visuUser();
}
$(check_hash);

The you might want to bind the same function to the hashchanged event:

$(window).bind('hashchange', check_hash);

Perhaps you want to load other pages as well in this manner. Actually, you then could simply change your button to:

<a href="#visu-user" class="menu-link">Visualizar Usuário</a>

Then you don't need a handler for your button: the hashchanged event will do it for you!

Answer 2

You can get the hash value using js, and check if it corresponds to the correct string like this:

if(location.hash == '#visu-user'){
 visuUser();
}