Buona sera a tutti.
Sto tentando di creare un sito che sia con pagine dinamiche, cioè che l'header e il footer sia sempre fisso e cambi solo il contenuto della pagina interna, richiamandola con procedure ajax e php.
Ho letto la seguente discussione nel vostro forum : https://forum.mrw.it/threads/risolt...li-senza-refresh-di-pagina.50303/#post-209941, ed ho pensato di adattarla alla mia esigenza.
Allora giusto per essere precisi, posto innanzitutto le pagine e codice, ho la pagina iniziale index che è così :
la funzione functions.php è la seguente :
una pagina ad esempio da sostituire dinamicamente nel div container :
e poi il codice js :
e seguendo i vostri consigli ho chiaramente anche aggiungo il file process.php con il seguente codice :
Ho pensato che visto che c'era l'echo del file join, nel div container del file principale index, si andasse a scrivere il contenuto della pagina da me richiamata con un link senza dover fare il refreh pagina, in altre parole ricomporre la nuova pagina con il comando echo con una variabile json.
Bene, si funziona ma se faccio visualizza codice sorgente, non mi appare tutto il codice di una pagina ma solo quello che contenuto nella pagina richiamata e se quindi ricarico la pagina, a video esce solo codice html presente nella pagina suddetta e non tutta una pagina completa di head e via del genere.
E poi la procedura window.addEventListener('load', function() {... che doverebbe diciamo simulare il caricamento della pagina con hystory.api non funziona per nulla.
Sto tentando di creare un sito che sia con pagine dinamiche, cioè che l'header e il footer sia sempre fisso e cambi solo il contenuto della pagina interna, richiamandola con procedure ajax e php.
Ho letto la seguente discussione nel vostro forum : https://forum.mrw.it/threads/risolt...li-senza-refresh-di-pagina.50303/#post-209941, ed ho pensato di adattarla alla mia esigenza.
Allora giusto per essere precisi, posto innanzitutto le pagine e codice, ho la pagina iniziale index che è così :
HTML:
<?php
include('functions.php');
?>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="it"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="it"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="it"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 modern" lang="it"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js modern" lang="it" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#"> <!--<![endif]-->
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css.css" >
<link rel="stylesheet" type="text/css" href="stilenuovo.css" >
<script src="jquery-1.5.2.min.js"></script>
<script src="ajaxjs2.js"></script>
</head>
<body>
<div class="container-elements">
<div class="cop-big"><embed type="image/svg+xml" src="TRINITYPICCOLO.svg" class="elastic" /></div>
<div class="el-medium"><embed type="image/svg+xml" src="NOMETRINITY.svg" class="elastic1" /></div>
<div class="el-small"><embed type="image/svg+xml" src="TRINITYCOMPICCOLO.svg" class="elastic" /></div>
</div>
<div class="container-pulsantig">
<div class="pulsante1g"><a class="pulsanti" href="PRIMA.php">Home</a></div>
<div class="pulsante1g"><a class="pulsanti" href="PRESENTAZIONE.php">Chi Siamo</a></div>
<div class="pulsante1g"><a class="pulsanti" href="TERRITORI.php">Territori</a></div>
<div class="pulsante1g"><a class="pulsanti" href="E-COMMERCE.php">E-Commerce</a></div>
<div class="pulsante1g"><a class="pulsanti" href="FINANZA.php">Finanza</a></div>
<div class="pulsante1g"><a class="pulsanti" href="TURISMO.php">Turismo</a></div>
<div class="pulsante1g"><a class="pulsanti" href="NORMATIVE.php">Normative</a></div>
</div>
<div id="container" class ="containere">
contenuto...
<div>
<?php
include ('FOOTHER.php');
?>
la funzione functions.php è la seguente :
PHP:
<?php
/**
* Funzione che controlla se la pagina è stata richiamata da una chiamata ajax oppure no
* (TRUE se è stata richiamata da una chiamata ajax)
* @return boolean
*/
function isAjax() {
return (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
}
?>
una pagina ad esempio da sostituire dinamicamente nel div container :
HTML:
<div class="primatitolog">
<div class="presentazionetitolog"><strong>TURISMO</strong>
</div></div>
<div class="primatitolo">
<div class="presentazionetitolo"><strong>TURISMO</strong></div>
</div>
<div class="container-presentazione">
<div class="presentazione">
TURISMO DESCRIZIONE
</div></div>
e poi il codice js :
Codice:
jQuery(document).ready(function() {
$('a.pulsanti').click(function(event) {
//alert("wew");
if (history && history.pushState) {
//Inserisce la nuova pagina nella history del browser
history.pushState(null, document.title, $(this).attr('href'));
//Richiama la nuova pagina attraverso una chiamata ajax
$page = $(this).attr('href');
$.ajax({
type: "GET",
url: "process.php",
data: "page=" + $page,
cache: false,
dataType :'json',
success: function(data){
$("#container").html(data["content"]);
$("title").html(data["title"]);
}
});
event.preventDefault();
}
});
});
window.addEventListener('load', function() {
// $ = jQuery;
setTimeout(function() {
window.addEventListener('popstate', function() {
$page = $(this).attr('href');
$.ajax({
type: "GET",
url: "process.php",
data: "page=" + $page,
cache: false,
dataType :"json",
success: function(data){
$("#container").html(data["content"]);
$("title").html(data["title"]);
}
});
});
}, 0);
});
e seguendo i vostri consigli ho chiaramente anche aggiungo il file process.php con il seguente codice :
PHP:
$content = "";
$title = "";
if(isset($_GET['page'])){
$html = file_get_contents($_GET['page']);
$dom = new DOMDocument('1.0', 'UTF-8');
$dom->loadHTML($html);
$element = $dom->getElementById("idContainer");
$title = $dom->getElementsByTagName("title");
$content = $dom->saveHTML($element);
}
$return_arr = ["title" => $title->item(0)->nodeValue,
"content" => $content];
echo json_encode($return_arr);
Ho pensato che visto che c'era l'echo del file join, nel div container del file principale index, si andasse a scrivere il contenuto della pagina da me richiamata con un link senza dover fare il refreh pagina, in altre parole ricomporre la nuova pagina con il comando echo con una variabile json.
Bene, si funziona ma se faccio visualizza codice sorgente, non mi appare tutto il codice di una pagina ma solo quello che contenuto nella pagina richiamata e se quindi ricarico la pagina, a video esce solo codice html presente nella pagina suddetta e non tutta una pagina completa di head e via del genere.
E poi la procedura window.addEventListener('load', function() {... che doverebbe diciamo simulare il caricamento della pagina con hystory.api non funziona per nulla.