jQuery Dialog

jQuery Dialog postato il 30/11/2011 18:49:51 nel forum programmazione, gdrcd, open source, 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?

Ovvero (ditemi se ho fatto una cavolata): appena il documento è pronto cliccando sul pulsante che ha come id "opener" mi si apre la finestrella.

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?

OGame ↗
In OGame migliaia di giocatori da tutto il mondo competono tra di loro per conquistare l'intero universo!

quota

Pagine → 1 2

pistacchio

SCRIVI

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 metodo

load()

anziché

html()

jQuery('<div></div>')
.load('provapagina.php')
.dialog({
autoOpen: false,
title: 'Prova Finestra'
});

ciao :)

Pratico l’arte zen di manutenere la mia motocicletta cambiando la cinghia di Möbius nel mio garage ermetico.

quota

leoblacksoul

SCRIVI

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

---
Non chiedetemi aiuto in privato per questioni di programmazione; chiedete sul forum e eventualmente vi risponderò lì.
http://gdrportal.eu - Hosting per GDR

quota

original_doll

SCRIVI

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 ↗
Costruisci la tua squadra di eroi leggendari e domina il campo di battaglia! Strategia, tattica e potenza si scontrano in questo RPG ricco di azione!

quota

cicciokr

SCRIVI

30/11/2011 21:07:48 e modificato da cicciokr il 30/11/2011 21:10:42

cosi i link:

ho buttato il codice cosi come mi veniva.. provalo forse funzionerà forse no..
non conosco la funzione dialog non ricordo come si richiami direttamente..
prova e fammi sapere..

ps.
quando copi la funzione aggiusta gli apici.. se no non va ;)

E´ proprio quando un popolo è all´apice del successo, che ha inizio il suo declino..

quota

pistacchio

SCRIVI

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.

Pratico l’arte zen di manutenere la mia motocicletta cambiando la cinghia di Möbius nel mio garage ermetico.

quota

leoblacksoul

SCRIVI

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

La soluzione di pistacchio non mi piace perchè usa gli iframe, che insieme ai frame normali sono deprecati dai nuovi standard

---
Non chiedetemi aiuto in privato per questioni di programmazione; chiedete sul forum e eventualmente vi risponderò lì.
http://gdrportal.eu - Hosting per GDR

quota

pistacchio

SCRIVI

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!

Pratico l’arte zen di manutenere la mia motocicletta cambiando la cinghia di Möbius nel mio garage ermetico.

quota

leoblacksoul

SCRIVI

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 >.<

---
Non chiedetemi aiuto in privato per questioni di programmazione; chiedete sul forum e eventualmente vi risponderò lì.
http://gdrportal.eu - Hosting per GDR

quota

pistacchio

SCRIVI

30/11/2011 22:05:25

lei = original_doll ;-)

Pratico l’arte zen di manutenere la mia motocicletta cambiando la cinghia di Möbius nel mio garage ermetico.

quota

original_doll

SCRIVI

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? >.<