Ajax. senza Class
Ajax. senza Class postato il 16/11/2011 08:18:22 nel forum programmazione, open source e hosting
Buongiorno a tutti,
dunque vorrei esporvi un quesito nonché problema di Refresh in Ajax, io vorrei far refreshare SOLO il div che mi interessa quindi la parte PHP che ho dentro un DIV determinata da una class, NO quindi la Class ma solo la parte testuale della Chat.
Fino a qui nessun problema uso questo script:
function Ajax()
{
var
http,
self = arguments.callee;
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
http = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
http = new ActiveXObject('Microsoft.XMLHTTP');
}
}
if (http) {
http.onreadystatechange = function()
{
if(http.readyState == 4 && http.status == 200) {
document.getElementById('ReloadThis').innerHTML = http.responseText;
setTimeout(function(){self();}, 5000);
}
};
http.open('GET', pagina.php' + '?' + new Date().getTime(), true);
http.send(null);
}
}
e successivamente richiamo la funzione con lo Script in Chat dopo Body e nel DIV indicato per il refresh, l’unico problema qual è, che il Refresh lo fa ma è come se mi si ristampa di nuovo lo sfondo della chat, come se si sovrapponesse poiché io nel class del DIV (Dove all’interno ho le funzioni in PHP) ho messo un css del tipo <div class=”chat”>, non so se mi son spiegato bene, comunque ci sarebbe un modo per evitare la sovrapposizione dello sfondo del Class e far refreschiare solo la parte PHP della Chat? In modo che lui il refresh lo fa per bene però non mi ristampi lo sfondo.
Grazie mille ^__^
World of Tanks ↗Pagine → 1 2
16/11/2011 14:06:25
Il tuo codice ha un errore di fondo, di concetto: se sei in pagina.php non puoi prendere tramite ajax la stessa pagina (pagina.php) e stamparne l'intero contenuto dentro a un div di pagina.php stessa. Tu stai inserendo l'*intera* pagina dentro a un suo div. Una cosa così:
<html>
<head>
</head>
<body>
<h1>Ciao</h1>
<div id="ReloadThis">
<html>
<head></head>
<body><h1>Ciao</h1>
<div id="ReloadThis">
</div>
</body>
</html>
</div>
</body>
</html>
Il codice sopra sarebbe il risultato della tua funzione javascript. è un risultato che mette la pagina dentro sè stessa, per questo ti si duplica lo sfondo. Inoltre verranno fuori degli errori di id doppi.
Se vuoi refreshare una pagina con javascript devi ristamparla tutta nell'<html>, ma a questo punto perchè farlo con ajax e non con i comandi javascritp normali?
Se vuoi refreshare solo una singola parte della pagina, NON puoi ricaricare l'intera pagina con javascript. Devi caricare solo la parte che ti interessa. Come? Ci sono almeno due modi:
1_Ricarica l'intera pagina ma analizza il codice ricevuto con ajax ed estrai solamente la parte che ti interessa ricaricare. Farlo con javascript puro è una cosa terribile, usa un framework tipo jQuery che fa l'analisi automaticamente.
2_NON ricaricare la pagina stessa, ma bensì carica un altra pagina PHP che sarà fatta apposta per inviare solamente il contenuto di quel div specifico.
Ti faccio un esempio di come funziona la mia chat, dato che di chat sta parlando:
C'è la pagina chat.php che crea solo ed esclusivamente la struttura HTML che dovrà contenere la chat, non viene carica nulla al suo interno con il codice di chat.php
Poi c'è il file chat.js che implementa le funzioni ajax per caricare la chat nella struttura creata da chat.php
e infine c'è il chat_backend.php che è un file che verrà contattato da ajax e che stampa solo ed esclusivamente i contenuti della chat, senza alcuna struttura HTML attorno. Quando ajax riceve quel testo, lo mette dentro alla struttura html di chat.php e il gioco è fatto.
Sea of Conquest ↗
16/11/2011 23:33:44
Leo, siccome l'argomento interessa pure me potresti approfondire se vuoi questo punto:
2_NON ricaricare la pagina stessa, ma bensì carica un altra pagina PHP che sarà fatta apposta per inviare solamente il contenuto di quel div specifico.
In pratica io che devo fare? Creare 1 Pagina Chat.php dove metto la struttura e i div con id? Poi una pagina solo PHP struttura.php dove inserisco il codice di elaborazione? Ma l'applicazione Js e Ajax dove la inserisco? in Chat.php prima della chiusura del tag </head> oppure altro?
Scusami se ti tartasso di domande :(
Crossout ↗
17/11/2011 08:41:15
Creare 1 Pagina Chat.php dove metto la struttura e i div con id?
Si ^^
Poi una pagina solo PHP struttura.php dove inserisco il codice di elaborazione?
Esatto. Questa pagina deve stampare solo ed esclusivamente quello che dovrebbe andare dentro al div della chat. In realtà il mio approccio sarebbe per codificare le informazioni del messaggi delle chat in un qualche formato riconosciuto per i servizi web tipo xml o json, e poi formare il codice html con javascript. Ma anche un html puro e semplice dovrebbe essere accettabile.
Ma l'applicazione Js e Ajax dove la inserisco?
La inserisci in Chat.php, è quella la pagina che viene eseguita per davvero sul browser. La pagina Struttura.php non viene mai aperta direttamente nel browser, viene chiamata solo con le funzioni ajax per trovare i nuovi messaggi di chat.
Hero Wars ↗
17/11/2011 12:08:33
Provo un pò a vedere di fare quello che mi hai suggerito, anche se la questione fatta da :giocatorelibero: mi torna utile nello schema poi
New Orleans ↗
17/11/2011 22:17:07
Allora io ho fatto tutto, funziona magnificamente l'unico problema è che quando mi si aggiorna la Chat non mi torna sull'ultima frase lanciata ma sulla frase dove sono rimasto bloccato con lo scrool.
Per richiamare la funzione utilizzo questo script:
<script>
var h = 0;
try {
h = parent.chatview.document.body.offsetHeight + 1000;
}
catch(e) {
h = 0;
}
parent.chatview.scroll (0, h);
window.setTimeout("document.location='chat.php'",60000);
</script>
Ho sbagliato qualcosa?
Tibia ↗
17/11/2011 22:49:46
Non avendo la più pallida idea di quale sia la struttura della tua pagina non saprei.
Quel codice è scritto per funzionare (più o meno) su una struttura a frame.
Non sono solito postare pezzi di codice che vengono direttamente dai miei script, ma dato che è un pezzo di codice che è molto richiesto e di cui in giro si trovano molte implementazioni che non funzionano. Ecco il codice che uso io per lo scrolling, funzionante su tutti i browser, scritto con le funzioni di jQuery:
Il codice si riferisce a una struttura HTML fatta a div di questo tipo:
<div id="chat">
<div id="chat-inner">
<!--Qui ci vanno i messaggi di chat-->
</div>
</div>
chat_div=$('#chat');
chat_inner=$('#chat > #chat-inner');
if ( Math.abs(chat_inner.offset().top) + chat_div.height() + chat_div.offset().top >= chat_inner.outerHeight() ) {
chat_inner.append(new_text);
chat_div.animate({scrollTop: chat_inner.outerHeight()});
}
else
chat_inner.append(new_text);
La presenza di due div annidati invece che di uno solo per contenere i messaggi si spiega con la necessità di riuscire a misurare se la chat è scrollata fino in fondo o meno. è un controllo che non è possibile fare in altri modi (non per tutti i browser) perciò è necessario usare due div...complica un po' la struttura ma risulta in un comporamento migliore dello scrolling.
Questo codice non solo scrolla in fondo. Questo codice scrolla solo se la finestra era già scrollata fino in fondo prima di aggiungere i nuovi messaggi, se la finestra non era scrollata fino in fondo non scrollerà. Questo perchè io odio tantissimo quelle chat che ogni volta che refreshano o ogni volta che c'è un nuovo messaggio ti riportano lo scroll sul fondo anche se magari stavi leggendo un pezzo di chat più in alto.
Foundation Galactic Frontier ↗
18/11/2011 08:12:35
Nulla da fare :( a me non và lo script
.png){kind=avatar}
18/11/2011 10:04:54
lo script sopra è stato studiato per jquery, hai incluso jquery nella pagina html che lo utilizza?
RAID Shadow Legends ↗
18/11/2011 10:25:02
No, che libreria devo includere? 1.4?
Seconda Era ↗
18/11/2011 15:47:49
Ecco la Pagina :( perchè non và??
P.S. questo è il vecchio metodo non jquery, quello jquery o testo stasera,però mi dovreste confermare che libreria.
<?php
...
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chat</title>
<script type="text/javascript">
// JavaScript Document
function Ajax()
{
var
http,
self = arguments.callee;
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
http = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
http = new ActiveXObject('Microsoft.XMLHTTP');
}
}
if (http) {
http.onreadystatechange = function()
{
if(http.readyState == 4 && http.status == 200) {
document.getElementById('ReloadThis').innerHTML = http.responseText;
setTimeout(function(){self();}, 10000);
}
};
http.open('GET', 'chat.php?id=<?php echo $_GET['id']; ?>' + '?' + new Date().getTime(), true);
http.send(null);
}
}
</script>
</head>
<body>
<script type="text/javascript">
setTimeout(function() {Ajax();}, 10000);
</script>
<div id="ReloadThis">
<div align="center">
<div class="chat" style="width:95%; height:95%;" align="left">
<?php
include('chat_messaggi.php');
?>
</div>
</div>
<script>
var h = 0;
try {
h = parent.chatview.document.body.offsetHeight + 1000;
}
catch(e) {
h = 0;
}
parent.chatview.scroll (0, h);
window.setTimeout("document.location='chat.php?id=<?php echo $_GET['id']; ?>'",60000);
</script>
</div>
</div>
</div>
</body>
</html>
Pagine → 1 2
Rispondi alla Discussione Segui Discussione Inoltra Discussione Forum Programmazione, Open Source e Hosting Elenco Forum
Articoli, Interviste e altre Risorse!
