Cambiare url in un sito con pagine dinamiche

Domenico_Falco1

Nuovo Utente
27 Mag 2019
26
0
1
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

Nuovo Utente
27 Mag 2019
26
0
1
Buon giorno, la funzione che mi carica la pagina dinamica è questa :

Codice:
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 :

Codice:
<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 :
Codice:
<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 :

Codice:
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
 
Ultima modifica:

Domenico_Falco1

Nuovo Utente
27 Mag 2019
26
0
1
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 :

Codice:
<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 :
Codice:
<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
 
Discussioni simili
Autore Titolo Forum Risposte Data
emanuelevt cambiare url sito web Javascript 2
L [PHP] cambiare gli if in un url semplice PHP 1
P cambiare url visibile sulla barra indirizzi Hosting 1
Sandokan Cambiare URL Web Server 2
A Cambiare Url HTML e CSS 2
G cambiare icona link url HTML e CSS 3
M Cambiare pennello a lavoro completo Photoshop 0
Y cambiare sfondo di una pagina Javascript 1
E Cambiare lingua in Elements per Mac Mac e Software 2
R Non riesco a cambiare l'immagine di sfondo PHP 4
K Cambiare font size su echo stringa variabile PHP 24
V [PHP Symphony] Cambiare da ApcCache ad OpCache PHP 4
Web93 CAMBIARE TAG POST TITOLO DA H2 A H1 WordPress 1
G Cambiare colore ad un record database mysql MySQL 0
L Cambiare classi solo scroll up jQuery 2
Topografo Buon 2019 (Tutti gli altri hanno scritto "Salve a tutti", cerchiamo di cambiare) Presentati al Forum 1
joomeph Cambiare Nome Utente Supporto Mr.Webmaster 3
M [Visual Basic] Cambiare lo stato in checked delle checkbox richiamando dati dal database Visual Basic 6
Koboshi Cambiare il css di una pagina con tasto "on off" HTML e CSS 5
Licantropo [MySQL] Cambiare le date MySQL 4
B [Javascript] Cambiare classe ed aggiornare relativi eventi Javascript 3
L Cambiare nome pagina facebook Annunci servizi di Social Media Marketing 4
P [HTML] Wordpress - cambiare font di un tema WordPress 1
L APPARECCHIO VOIP DA CAMBIARE Adsl e Connettività 0
T cambiare formato in uscita timestamp Database 0
O Allo scroll cambiare colore di sfondo jQuery 0
crealatualista [Javascript] Cambiare record tabella... Javascript 4
napuleone [Javascript] cambiare i parametri di stampa con js Javascript 2
DaveCricket [WordPress] [PHP] Cambiare il colore del link di una pagina attiva WordPress 3
V javascript - cambiare immagine di sfondo di un div Javascript 3
D [Javascript] Script che consenta di cambiare un'immagine in base all'ora del giorno della settimana Javascript 11
B CAMBIARE PAGINA INIZIALE PHPMYADMIN MySQL 2
webmachine [WORDPRESS] Cambiare titolo pagina articoli WordPress 0
webmachine [WOOCOMMERCE][WORDPRESS] Cambiare testo pulsante Acquista E-Commerce 0
webmachine [PRESTASHOP] Cambiare ordine prezzo-sconto-prezzoscontato E-Commerce 1
B CAMBIARE TEMPLATES PHPMYADMIN MySQL 0
otto9due Dreamweaver CC 2017 - cambiare colorazione codice Windows e Software 5
webmachine [JQUERY] Cambiare immagine al click, toggle jQuery 1
A Cambiare Risposta onclick con Switch. Javascript 1
V Cambiare colore ad un button HTML e CSS 3
E Cambiare l'option di un select con jquery jQuery 1
ecosito CSS: è possibile cambiare font con uno non di uso comune? HTML e CSS 11
Jonn [Javascript] Cambiare colore sfondo div allo scroll del mouse Javascript 3
Shyson Cambiare color all'onclick Javascript 9
elettroweb come cambiare testo Flash 0
M Cambiare dinamicamente il contenuto di un DIV Javascript 4
M Cambiare valore ad un campo in base alla selezione fatta nel menu a tendina PHP 16
R Cambiare la variabile in modo permanente PHP 3
P Cambiare il valore di un campo tabella con un pulsante cliccabile PHP 2
B cambiare sfondo alle celle della tabella Javascript 1

Discussioni simili