jQuery Dialog
.jpg)
jQuery Dialog postato il 30/11/2011 18:49:51 nel forum programmazione, open source e hosting
Buonasera popolo di GDR Online!
Dunque, dunque. Leggendo tra i vari topic qui in programmazione ho visto tanto parlare di "Jquery" e ho pensato bene di vedere un pò di cosa tratta, come funziona e via dicendo. Premetto che, da ignorante, o meglio da persona che si approccia per la prima volta a questo tipo di "codice" lo trovo piuttosto sintetico il che è un bene soprattutto se si sviluppano cose "grosse". Ma vi spiego cosa cerco di fare.
Ho smanettato con qualche plugin come gli accordion e le tabs, e proprio ora (anzi da questo pomeriggio) mi dedico alle finestre Dialogo quelle che permettono di selezionare gli elementi sottostanti alla finestra.
Come per tutto ho linkato la libreria e i css.
Ma cosa voglio fare?
Vorrei provare a far aprire dentro la finestra dialogo (che si aprirà con un click) una pagina già esistente in questo caso di nome provapagina.php
Cosa ho fatto dopo aver linkato la libreria e il css?
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function() {
var $dialog = jQuery('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
title: 'Prova Finestra'
});
jQuery('#opener').click(function() {
$dialog.dialog('open');
return false;
});
});
</script>
Ovvero (ditemi se ho fatto una cavolata): appena il documento è pronto cliccando sul pulsante che ha come id "opener" mi si apre la finestrella.
<a href="provapagina.php" id="opener"><img class="bottone" name="prova" src="../immagini/bottone1.png"></a>
Fin qui ci sono? A questo punto dovrei far aprire il contenuto di provapagina.php dentro la finestra dialogo cosa che non accade con quel codice lì. Ho provato a cercare sul web qualche suggerimento per aprire il contenuto di un a href dentro ma nada.
Qualche suggerimento?
State of Survival ↗Pagine → 1 2
30/11/2011 20:11:04 e modificato da pistacchio il 30/11/2011 20:12:53
ciao,
prima di invocare
dialog()
, prova a chiamare il metodoload()
anzichéhtml()
jQuery('<div></div>')
.load('provapagina.php')
.dialog({
autoOpen: false,
title: 'Prova Finestra'
});
ciao :)
Raja Dunia ↗
30/11/2011 20:16:22 e modificato da leoblacksoul il 30/11/2011 20:19:55
Ciao!
Allora, quello che hai fatto non funziona perchè probabilmente il plugin dialog sovrascrive il comportamento onClick del tag a. E comunque non funzionerebbe perchè dialog non interferisce con i tag a; cosa succederebbe se uno usasse il plugin dialog senza volere che gli intercettasse tutti gli a? Non potrebbe disabilitarlo. Al contrario invece abilitare la cosa è piuttosto semplice.
Devi usare le funzioni Ajax, perchè quello che stai cercando di fare è caricare in un secondo momento contenuto dentro alla pagina che già hai. Ajax è fatto proprio per questo.
Quello che devi fare è leggerti come si usa la funzione .load() di jQuery http://api.jquery.com/load/ ↗
Questa funzione carica una pagina automaticamente dentro a un div che gli specifichi.
Stai però attenta che la pagina che vuoi includere NON deve avere al suo interno i tag <html><head><body> etc, deve contenere solo ciò che sarebbe accettato all'interno del <div> in cui vuoi caricare il contenuto.
Questa funzione la puoi usare dentro all'evento dialogopen che il plugin dialog ti mette a disposizione: http://jqueryui.com/demos/dialog/#event-open ↗
Facci sapere se ti serve che venga spiegato in maggiore dettaglio
EDIT: il metodo suggerito da pistacchio va anche bene, ma può essere usato solo ed esclusivamente se nella pagina esiste un solo link che carica cose dentro al dialog. Se invece il dialog può avere contenuti diversi in base al link che usi allora ci vuole quello che ti ho detto io, usando l'evento dialogopen
War Thunder ↗
30/11/2011 20:29:07 e modificato da original_doll il 30/11/2011 20:36:45
Che sciocca! In effetti si ci poteva anche arrivare =)
Ma adesso mi sorgono un paio di dubbi:
Se nella pagina provapagina.php c'è un altro link che va aperto in una nuova finestra dialogo basta che inserito l'id "opener" anche a quel link?
Secondo dubbio: Se invece devo far aprire quel link nella stessa finestra dialogo devo inserire qualcosa, qualche opzione particolare?
EDIT: ho risposto prima di leggere leo, un attimo che leggo eh u.u
@Leo: Allora, diciamo che non ho capito proprio benissimo. Ti spiego la mia situazione. In pratica in questa pagina non ho solo un link, ce ne sono tre, dunque dovrei far corrispondere al click sul pulsante "prova" l'apertura di "paginaprova.php", al click sul pulsante "ciao" la pagina "ciao.php" e al click sul pulsante "hello" la pagina "hello.php"
Ora, non ho ben capito la questione dell'evento opendialog. L'evento opendialog permette di fare ciò che dovrei fare io?
Hero Wars ↗
30/11/2011 21:14:01 e modificato da pistacchio il 30/11/2011 21:20:03
Ciao mia cara,
ti avevo già scritto una risposta molto carina e dolce, come vuole la mia indole, ma hai avuto la buona idea di sollecitare la mia attenzione tramite un messaggio. Essendo una persona molto curiosa, ho fatto click sulla relativa iconcina divenuta rossa per l'occasione e ho perso quello che stavo scrivendo.
Nel contempo ho perso anche la voglia di riscriverlo, quindi ecco in soldoni cosa puoi provare a fare:
$(document).ready(function() {
$('.opener').click(function(){
$('<div><iframe src ="' + $(this).attr('href') + '" /></div>')
.dialog({
autoOpen: false,
title: 'Prova Finestra'
});
return false;
});
});
...
<a class="opener" href="lin1">asd</a>
<a class="opener" href="link2">asd2</a>
<a class="opener" href="linkudine">asdasd</a>
Non pensi che il successo di Lady GaGa sia del tutto immeritato? Cioè, brava, ok, ma la paragonano a Madonna che alla sua età era già avanti anni luce.
Dicevo. Non puoi usare gli id per selezionare gli elementi perchè un id è univoco. Devi quindi servirti delle classi. In jQuery selezioni le classi premettendo al loro nome un punto anzichè un cancelletto.
Come facevan notare nonricordoilnome prima di me, load() presuppone una chiama Ajax, quindi per tenere la cosa più semplice utilizziamo un iframe. Apri una pagina nella pagina. L'url lo prendiamo dinamicamente leggendo il tag href del link cliccato.
Se hai problemi puoi provare a contattarmi su Skype cercando pistacchioso. Ma fra un po' vado a cena. Ieri sera abbiamo fatto un ragù che è la fine del mondo e ne è avanzato abbastanza da farci da condimento anche questa sera. Lo stiamo riscaldando e in casa si spande l'odore del sugo buono. E' una cosa molto retrò e anche parecchio autunnale. Amo l'autunno. Calcola che è ragù alla bolognese, quello fatto con il macinato, non ragù di carne carne. Quello l'abbiamo fatto due settimane fa, è rimasto a bollire per tre ore, davvero una cosa da nonne! Tu che macinato usi? Quello di bovino, di maiale o misto? Io cercavo quello misto, ma ho trovato solo quello di manzo e alla fine è uscito comunque fantastico.
Cioè, guarda solo come si veste:
Per me c'è differenza fra avere estro e avere cattivo gusto.
In questa foto mi pare di scorgere un pene.
CRSED: F.O.A.D. ↗
30/11/2011 21:40:20 e modificato da leoblacksoul il 30/11/2011 21:41:58
Stavo pensando più a una cosa così.
Scusa se non ti scrivo l'interno della callback di open ma dovrei esplorare gli elementi event e ui, non mi ricordo il loro contenuto a memoria. (per esplorarlo tu puoi usare FireBug su firefox, chiamando la funzione console.log(oggetto) ti viene stampato il contenuto dell'oggetto nella console
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function() {
var $dialog = jQuery('<div>This dialog will show every time!</div>')
.dialog({
autoOpen: false,
title: 'Prova Finestra',
open: function(event,ui){
//usando event e ui puoi accedere all'elemento che ha invocato l'evento di apertura e al dialog che sta per venire aperto, chiamando .load al suo interno con l'href giusto
}
});
jQuery('.opener').click(function() {
$dialog.dialog('open');
return false;
});
});
</script>
La soluzione di pistacchio non mi piace perchè usa gli iframe, che insieme ai frame normali sono deprecati dai nuovi standard
World of Warship ↗
30/11/2011 21:52:51 e modificato da pistacchio il 30/11/2011 22:00:24
Ciao,
gli iframe non sono deprecati. Eccoli nelle specifiche dell'ultima versione di Html (la 5):
http://www.w3.org/TR/html5/the-iframe-element.html#the-iframe-element
Ecco invece la lista degli elementi deprecati (fra cui figurano i frameset):
http://www.html-5.com/changes/deprecated/index.html
E' probabile che lei non stia usando html5, è quindi probabile che nel doctype da lei scelto non siano deprecati neanche i frame (e certamente non lo sono gli iframe che non sono mai stati deprecati da w3).
Il loro uso errato (o abuso) porta alle stesse aberrazioni delle tabelle per il layout, ma hanno il loro posto. Uno dei loro posti naturali è aiutare una persona che ha già difficoltà con il mostrare una finestra modale senza dover introdurre ulteriore complessità con delle chiamate asincrone (come hai fatto giustamente notare relativamente al load()) e senza farle modificare tre pagine che ha già pronte. Una cosa per volta :-)
Il ragù era ottimo, l'abbiamo fatto con i bucatini!
30/11/2011 22:00:27
In effetti ai ragione, mi son confuso con i frame "normali".
Comunque io uso XHTML1.0 Strict
Non darmi del lei >.<
Sea of Conquest ↗
30/11/2011 22:05:25
lei = original_doll ;-)
01/12/2011 01:05:13 e modificato da original_doll il 01/12/2011 01:21:16
Allora, io ho provato, il problema è che non mi fa funzionare i link dentro la finestra dialogo.
Quindi succede che: apro la finestra dialogo cliccando sul pulsante "prova", dentro la pagina ci sono 5 link diversi che dovrei far aprire dentro la finestra dialogo (uno alla volta) ma cliccando su questi link non me li apre nè nel cosiddetto main nè nella finestra dialogo. Se invece tolgo la class, mi apre i link nel "main".
Qual'è l'errore? >.<
The Coven ↗
01/12/2011 07:32:54 e modificato da pistacchio il 01/12/2011 07:33:18
original_doll ha scritto:
Qual'è l'errore? >.<
L'errore che è che qual è un troncamento, quindi la "e" cade prima dell'uso dell'apostrofo! Non è "quale è" -> "qual'è", è semplicemente "qual è". Pur essendo molto diffuso, si tratta un errore.
Ecco l'indicazione dell'Accademia della Crusca a riguardo: http://www.accademiadellacrusca.it/faq/faq_risp.php?id=3779&ctg_id=44
Ciao!
Seconda Era ↗
Discussione seguita da
Pagine → 1 2
Rispondi alla Discussione Segui Discussione Inoltra Discussione Forum Programmazione, Open Source e Hosting Elenco Forum
Articoli, Interviste e altre Risorse!
