Cambiare url in un sito con pagine dinamiche

[Domenico_Falco1]

Buona sera a Tutti Voi

Ho iniziato a crearmi un sito per la mia azienda dal nulla, sto imparando tutto adesso, avendo solo una certa infarinatura di html e javascript.

Ho creato il sito con pagine dinamiche usando ajax, ma mi sono accorto che l'indirizzo del sito non aggiunge la pagina scelta come avviene in un sito statico, cioè del tipo : www.trinitycoret.cloud/chisiamo

e poi se faccio il refresh mi riporta sempre sulla home ( index )

Non chiedo codice già bello e fatto chiaramente, ma possibilmente degli esempi da studiare e un piccolo supporto se è possibile.

L'indirizzo del sito in oggetto è : http://www.trinitycoret.cloud/

 

[Domenico_Falco1]

Ho trovato questo sito https://diveintohtml5.info/history.html, con le varie funzioni, ma da quanto ho capito usa una galleria anche di foto, qualcuno di Voi potrebbe aiutarmi ?

 

[Domenico_Falco1]

Buon giorno, la funzione che mi carica la pagina dinamica è questa :

function SetHtmlAjax(id, name){
    $.ajax({
     type: "GET",
     dataType: "html",
     cache: false,
     url: name,
     data: "",
     success: function(msg){
        $('#'+id).html(msg); 
  
}
     });
}

che attivo con questo button :

<button class="pulsante1g"  name="PRESENTAZIONE.html" onclick="SetHtmlAjax('container', 'PRESENTAZIONE.html')">Chi Siamo</button>

Leggendo qua e là ho trovato questo script che dovrebbe cambiare anche l'url al mio cliccare e quindi caricare una nuova pagina nel div container :

<script type="text/javascript">
    $(document).ready(function ( )
        {  // Al caricamento del documento, imposta le azioni che vuoi.
            $("a.usaAjaxPerCaricare").click(function ( )
                {  // Al click, carica la pagina via AJAX.
                    var url = $(this).attr('href');  // L'URL che volevi.
                    caricaPagina(url);  // Carica la pagina.
                    history.pushState(null, null, url);  // Imposta l'URL sulla barra degli indirizzi. Se vuoi impostare un titolo (che però non serve a niente, perché non è supportato da nessun browser, al momento), scrivilo come secondo argomento al posto di "null".
                    window.addEventListener('popstate', function ( ) { caricaPagina(location.pathname); });  // Quando l'utente preme "Indietro" sulla cronologia, ripete la stessa azione, ma al contrario.
                });
        });
</script>

Sono riuscito a far comparire l'indirizzo sulla barra in questo modo :

function SetHtmlAjax(id, name){
    $.ajax({
     type: "GET",
     dataType: "html",
     cache: false,
     url: name,
     data: "",

     success: function(msg){
        $('#'+id).html(msg);   

var url =  name ;
history.pushState(null, null, url);
alert (url );
//window.addEventListener('popstate', function ( ) { SetHtmlAjax(id, location.pathname); });
    
}
     });
}

Ma mi rimane il problema che se faccio refresh si carica solo la pagina dinamica pure codice e se torno indietro si sovrappongono la pagine.

Potete aiutarmi su questo problema ?

Grazie e saluti.

Domenico

 

[Domenico_Falco1]

Nessuno mi aiuta ?

 

[Domenico_Falco1]

Buona sera, beh sono un tipo a volte insistente se vuole comprendere.

Allora ho cambiato la funzione ajax usando il metodo : new XMLHttpRequest();

e precisamente ho la pagina Index, dove è presente un div con id : container ed una pagina esterna : PRESENTAZIONE.html.

Il <div id = " container "> è sotto l'header della pagina index chiaramente e li voglio che dinamicamente compaia il contenuto della pagina esterna da me richiamata con la seguente funzione :

<script>
function loadDoc(url, cFunction) {
if (history && history.pushState) {   
                history.pushState(null, null, url);

alert ($(this).attr('href') )
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
} }



function myFunction(xhttp) {
  document.getElementById("container").innerHTML =
  xhttp.responseText;
}

</script>

e nella pagina html dell'index c'è il seguente button :

<button class="pulsante1g"  name="PRESENTAZIONE.html" onclick="loadDoc('PRESENTAZIONE.html', myFunction)">Chi Siamo</button>

Ripeto quando clicco sul button, la pagina si aggiorna e mi compare i contenuto desiderato, ma se faccio aggiorna con il tasto destro, succede che mi compare il codice della pagina caricata senza chiaramente CSS, cioè come puro html non codificato, se poi vado avanti ed indietro con i pulsanti del browser non succede nulla e se faccio visualizza sorgente pagina mi esce il codice della pagina caricata.

Quindi si, sono riuscito a passare la pagina dinamica ma come avete potuto leggere, praticamente viene poi un pasticcio.

Dove sto sbagliando e sopratutto cosa ?

Mi sono rivolto a questo forum perché ho letto ed imparato parecchio, per cortesia mi date una mano.

Per chi volesse guardare da se, il sito è : www.trinitycoret.cloud

Grazie e saluti.

Domenico