Usare AJAX come frameset [AJAX]

Printable View

13-11-2011, 13.13.41

Usare AJAX come frameset [AJAX]

Ciao a tutti, vorrei creare una specie di frameset con AJAX.
Cioè vorrei dividere il sito in due sezioni (proprio come nel frameset) - una sopra e una sotto, ad esempio -, e visto che ormai i frame non hanno più PRO ma solo contro, vorrei usare AJAX.
Dato che il mio sito è quello di una web-radio, nella parte inferiore vorrei inserire il player della radio invece che richiamare un pop-up.
Se possibile non vorrei mettere nella barra degli url il /#!/, ma se si può fare con .htaccess a quello ci penso dopo.

Grazie in anticipo per le eventuali risposte.
13-11-2011, 13.19.48
alemoppo

Fai la richiesta al server, e aggiungi il contenuto al <div><spam><p> o altro con l'id...

Usando jQuery:

Codice:

$.post('pagina.php', function(data) { $('.id_elemento').html(data); });

..se vuoi usare ajax nativo, leggi qui.

Ciao!
13-11-2011, 13.43.05

E questo codice lo dovrei mettere tra i tag <head>?
Poi, devo aggiungere /#!/?
Ultimo: 'pagina.php' dev'essere il nome della pagina che contiene il codice?
Grazie.
13-11-2011, 14.08.24
alemoppo

Per ajax, puoi usare lo stesso codice che ti avevo detto tempo fa...

Qui, invece di disabilitare il pulsante, e non ricordo cos'altro facevi, aggiorni il div,span,p o altro con la risposta della pagina...

Con /#!/ non so cosa intendi... forse le espressioni regolari?

Ciao!
13-11-2011, 14.26.07

Grazie per la rispsta.
Non ho capito cosa vuoi dire con "aggiorni il div,span,p o altro con la risposta della pagina".

Citazione:

Con /#!/ non so cosa intendi

Ho visto che Twitter usa /#!/, ma non sapevo cosa fosse.
Poi ho visto il sito di una radio che aveva /page#!/: ho chiesto cosa fosse e mi hanno detto che serviva per utilizzare AJAX come frameset.
Non so se posso linkare il sito in questione perché non credo che appartenga ad Altervista.
13-11-2011, 15.43.21
alemoppo

No, non importa: cioè, io non conosco quel modo....

Per aggiornare un div/span/p, gli dai un id che vuoi, ad esempio corpo_della_pagina:

Codice HTML:

<div Id='corpo_della_pagina'></div>

Per inserire un testo dentro quel div (nel tuo caso il testo lo prelevi via ajax), usi .html() in questo modo:

Codice:

$('.corpo_della_pagina').html( testo );

Dove "testo" è la variabile che contiene il testo da inserire nel div.

Infatti, nell'esempio sopra:

Codice:

$.post('pagina.php', function(data) { $('.id_elemento').html(data); });

"richiede" alla pagina "pagina.php" il testo da aggiungere all'elemento con id "id_elemento", e con html() applica il testo prelevato...

---

Per ajax, invece di .post(), puoi usare $.ajax() come ti avevo detto l'altra volta, se hai capito come funziona (alla fin fine sono quasi equivalenti)...

Ciao!
13-11-2011, 16.16.02

OK, da quel che ho capito dovrei fare così:

Codice HTML:

<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> $.ajax('playerAJAX.php', function(data) { $('.playerAJAX').html(data); }); </script> <div id='playerAJAX'></div> </head>

Mentre in playerAJAX.php:

Codice HTML:

<div id="data">THIS IS THE PLAYER</div>

Ma a quanto pare qualcosa non va...
Cosa non ho ancora capito?

Grazie ancora.
13-11-2011, 16.21.03
alemoppo

Codice HTML:

<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> $.post('playerAJAX.php', function(data) { $('.playerAJAX').html(data); }); </script> </head> <body> <div id='playerAJAX'></div>

Ciao!
13-11-2011, 16.29.07

OK, ma la scritta "THIS IS THE PLAYER" non compare nella pagina: dove lo trovo?
E poi, come faccio a dirgli che deve stare nella parte inferiore della pagina?
Grazie.
13-11-2011, 16.32.25
alemoppo

hai un link della pagina?

Ciao!
13-11-2011, 16.34.55

Nel mio sito in ogni pagina richiamo header.php con include, ed è su quella pagina che sto lavorando...
Eccoti l'index.
Vorrei che fosse come quella specie di toolbar rossa in basso alla pagina, che però resta sempre lì come un frame.
Grazie.

EDIT:

Magari il problema sta nel richiamare la pagina: non posso decidere il codice direttamente dallo script senza richiamare playerAJAX.php?
15-11-2011, 15.30.34
alemoppo

Se vuoi usare $.post, devi fare:

Codice:

$.post('playerAJAX.php', function(data) { $('.playerAJAX').html(data); });

Oppure, se vuoi usare $.ajax, lo devi mettere nella forma che ti avevo detto nell'altro thread.

Comunque, quel codice eseguilo quando la pagina è caricata, ad esempio con window.onload.

Poi, includi troppe volte jquery! Ne basta uno in tutta la pagina!

Ciao!
15-11-2011, 18.09.54

Ma tra $.post e $.ajax che differenza c'è?
Poi per eseguirlo quando la pagina si è caricata posso usare <body>?
Quindi

Codice HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> function player(){ $.post('playerAJAX.php', function(data) { $('.playerAJAX').html(data); }); } </script> </head> <body onload="player"> <div id='playerAJAX'></div>

Ultimo: grazie per la segnalazione :-)

Grazie, ciao!
15-11-2011, 18.31.02
alemoppo

Citazione:

Originalmente inviato da radiodelmomento

Ma tra $.post e $.ajax che differenza c'è?

$.post - $.ajax

Citazione:

Originalmente inviato da radiodelmomento

Poi per eseguirlo quando la pagina si è caricata posso usare <body>?

Sì.

Citazione:

Originalmente inviato da radiodelmomento

Quindi

Codice HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> function player(){ $.post('playerAJAX.php', function(data) { $('.playerAJAX').html(data); }); } </script> </head> <body onload="player"> <div id='playerAJAX'></div>

onLoad dovrebbe essere:

Codice:

onload="player()"

funziona?

Ciao!
15-11-2011, 19.10.05

Purtroppo non funziona... forse devo "dirgli" dove si deve mettere il "frame"?
Ad esempio in basso o in alto?
Qua ho provato per vedere se il problema erano altri codici:
http://radiodelmomento.altervista.org/prova
SORGENTE:

Codice HTML:

<!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>Prova AJAX</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> function player(){ $.post('playerAJAX.php', function (data) { $('.playerAJAX').html(data); }); } </script> </head> <body onload="player()"> <div id='playerAJAX'></div> </body> </html>

Purtroppo però niente...

Posso chiederti perché si scrive

Codice HTML:

$.post('playerAJAX.php', function (data) {

e non

Codice HTML:

$.post('playerAJAX.php', function data() {

Grazie mille.
15-11-2011, 21.09.49
alemoppo

Dunque.

Innanzitutto mi son accorto di averti detto male: ovviamente i selettori degli id sono "#" e non ".". Quindi devi fare

Codice:

$('#playerAJAX').html(data);

e non

Codice:

$('.playerAJAX').html(data);

Poi, la pagina che mi hai linkato ha $.ajax() con la forma di $.post.

Per l'ultima cosa, nel primo caso "data" è il parametro in ingresso, mentre nel secondo è il nome della funzione.

Ciao!
15-11-2011, 22.19.09

Grazie, adesso il testo si legge.
Grazie anche per la delucidazione. :wink:
Il piccolo problema è che il codice non funge da frame.
Quindi se da un link della pagina passo ad un altra pagina (che contiene lo stesso codice) il testo di playerAJAX.php si riaggiorna: ho messo un input e se scrivo qualcosa e poi clicco su un link l'input si resetta, quindi cambia tutta la pagina.
Questo come lo risolvo?
Forse devo creare il codice con $.ajax?
http://radiodelmomento.altervista.org/prova

Grazie ancora, e abbi pazienza perché ancora in JS non sono un granché :lol:
Ciao! :-D
17-11-2011, 15.16.36

Vorrei fare un po' come la chat di Facebook: vai da una pagina ad un'altra ma la chat rimane sempre lì...
Ciao!