[GDRCD 5.2] Scheda in finestra modale - Risolto

19/08/2014 01:01:40

blancks ha scritto: Non m'ero proprio accorto delle ultime repliche, pardon.

Ma per carità! Parlo per me, ma credo che anche Norm sará d'accordo: già che stai rispondendo, ci mancherebbe anche che tu debba chiedere scusa per non aver visto le ultime risposte!!

Quanto all'errore, questo dimostra ancora una volta che avere un beta reader - in qualsivoglia ambito - è di estrema importanza!
Ora è tardi, quindi credo che andrò a dormire, ma domani appena ho un attimo provo con il . anzichè il #... tieni le dita incrociate per me! :D

19/08/2014 13:06:56

Secondo me l'errore sta anche nel fatto che dentro a una funzione è sbagliato usare la forma per l'esecuzione delle azioni onReady:

$(function(){
//Roba del dialog
});

Non ha nessun senso.

19/08/2014 14:01:22

leoblacksoul ha scritto:
Non ha nessun senso.

Anche questo è vero

19/08/2014 14:28:20

Grazie ancora per le risposte, in qualche maniera sono comunque utili e magari mi avvicinano alla soluzione :)
Ho corretto il puntino al posto del cancelletto, e non cambia nulla ancora.
Per quanto riguarda il suggerimento di leoblacksoul cosa dovrei fare? Ho provato a togliere le due righe

$(function(){
});

Mantenendo solo le informazioni della dialog, ma ancora non funziona.
Aggiorno il main e in alto a sinistra mi appare il div contenente l'iframe con la scheda del mio pg, ma se dai presenti_estesi clicco su qualsiasi presente online questo div non cambia mostrando la scheda richiesta, ma semplicemente sparisce.

19/08/2014 14:50:45

Se utilizzi chrome o firefox premi F12, accedi alla scheda console e poi riprova a cliccare sul tasto.

Se ci sono errori javascript li vedrai lì e in caso segnalaceli in risposta qui ;-)

19/08/2014 15:09:11

L'unica cosa che mi appare è:

L’utilizzo di getPreventDefault() è deprecato. Al suo posto utilizzare defaultPrevented. jquery-1.9.0.js (riga 3308)

19/08/2014 23:19:07

Comincio a pensare che sarebbe più facile lasciarla in popup, sta benedetta scheda, anche se la cosa mi schifa alquanto.

20/08/2014 00:20:46

se posso intromettermi, credo che cambiare la vostra versione di jquery aggiornandola alla 2.x dovrebbe risolvere il problema :)

20/08/2014 01:55:38 e modificato da blancks il 20/08/2014 02:01:53

Con ordine, cercherò di descrivere il processo passo passo partendo da zero (così che ne possano giovare tutti).

Step 1: Realizzare una pagina simil main per aprire i vari moduli del sito

Nel mio caso ho chiamato tale file popup.php e quest è il sorgente che dovrebbe avere

<?php
require 'header.inc.php';
gdrcd_controllo_sessione();


echo '<div class="popup">';

if (!empty($_GET['page']))
gdrcd_load_modules(
gdrcd_filter(
'include',
dirname(__FILE__)
. DIRECTORY_SEPARATOR
. 'pages'
. DIRECTORY_SEPARATOR
. $_GET['page']
. '.inc.php'
)
);
else
echo $MESSAGE['interface']['layout_not_found'];

echo '</div>';


require 'footer.inc.php';
?>

Step 2: Scaricare jQuery e jQueryUI

Download jQuery 2.1.1 http://code.jquery.com/jquery-2.1.1.min.js ↗
Download jQueryUI: http://jqueryui.com/download/ ↗

Una volta scaricati i suddetti file (nel caso di jQueryUI tirateli anche fuori dallo zip) posizionare nella cartella includes di gdrcd i seguenti:

images/ cartella che si trova nel pacchetto jQueryUI
jquery-2.1.1.min.js
jquery-ui.min.js
jquery-ui.min.css


Step 3: Eliminare il conflitto tra jQuery e le funzioni native di GDRCD

Sostituire il simbolo dollaro ( $ ) con la dicitura gdrcd_selector, ovunque lo troviate, nei seguenti files:

/includes/corefunction.js
/includes/popupchoise.js
/includes/tooltip.js

Piccolo esempio visivo di come la funzione di ricerca e rimpiazzo di un qualsiasi editor di testo sia sufficiente allo scopo:



Step 4: Includere jQuery e jQueryUI nell'header.inc.php

Le seguenti righe di codice devono essere posizionate all'interno del tag head

<link rel="stylesheet" href="includes/jquery-ui.min.css" type="text/css" />
<script type="text/javascript" src="includes/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="includes/jquery-ui.min.js"></script>

Step 5: Realizziamo la funzione che genera le finestre modali

Aprite il footer.inc.php e piazzate al suo interno questo script

<script type="text/javascript">

function modalWindow(name, title, url, width, height) {
// per width ed height imposto dei valori di default così non occorre specificarli in ogni occasione
width = typeof width === 'undefined'? 800 : width;
height = typeof height === 'undefined'? 600 : height;

// verifichiamo se nel body non esiste il sorgente per la dialog
if ($('#dialog-'+name).length == 0) {

// in questo caso lo creiamo:
$('body').append('<div id="dialog-'+name+'" title="'+title+'" style="padding:0;"><iframe src="'+ url +'" frameborder="no" style="position:absolute;width:100%;height:100%;" scrolling="yes"></div>');

} else {

// se il sorgente invece esiste già assegnamo la nuova url all'iframe:
$('#dialog-'+name).attr('title', title);
$('#dialog-'+name+' iframe').attr('src', url);
}

// Ok, adesso siamo pronti per lanciare la modale!
$('#dialog-'+name).dialog({width: width, height: height});
}

</script>

Step 6: Apriamo qualcosa in una modale!

Andiamo nel config, per il nostro esempio modificheremo il link nel menù che riporta alla propria scheda personaggio per farlo aprire in una modale.
Bisogna riscrivere la definizione del parametro url in questa maniera:

$PARAMETERS['menu']['profile']['url']="javascript:modalWindow('scheda', 'Scheda di ". $_SESSION['login'] ."', 'popup.php?page=scheda&pg=". $_SESSION['login'] ."');";

Se mi avete seguito bene, dovreste a questo punto ritrovarvi questo http://blancks.altervista.org/modale1.png ↗


Step 7: Ultime sistemazioni

Come potete osservare c'è un problema: manca la scrollbar nell'iframe e non possiamo scorrere il resto della scheda personaggio.
La soluzione sta nell'aggiungere in main.css al body, la seguente proprietà

overflow: auto !important;

Un bel refresh di pagina con CTRL+R, nuovamente click sulla scheda et voilà http://blancks.altervista.org/modale2.png ↗


Step 8: Remember!

Abbiamo aperto la scheda in una modale ma i suoi link puntano ancora a main.php?etcetc..., dovrete assicurarvi di farli puntare invece su popup.php per una corretta navigazione all'interno di una stessa modale.

Se da una pagina caricata all'interno di una finestra modale volete far aprire una nuova finestra modale dovrete operare in questo modo sul link:

<a href="javascript:parent.modalWindow('scheda2', 'Scheda di <?php echo gdrcd_filter('url',$_REQUEST['pg']); ?>', 'popup.php?page=scheda_modifica&pg=<?php echo gdrcd_filter('url',$_REQUEST['pg']); ?>');">

L'esempio l'ho operato nella pagina della scheda, per far aprire la voce "Modifica" in una nuova modale. http://blancks.altervista.org/modale3.png ↗

Ricordate inoltre che il primo parametro di modalWindow() è l'id della modale: se a più link fornite lo stesso id, quei link si apriranno sempre in una stessa finestra modale, evitando un inutile sovraffollamento, se invece prevedete che quel link debba aprirsi in una nuova modale dategli un nuovo id (è il motivo per cui nell'esempio del "modifica scheda" l'id l'ho assegnato come scheda2).

Non dimenticatevi infine che modalWindow accetta ulteriori due parametri per specificare a piacere le dimensioni della modale:

modalWindow('idmodale', 'titolo finestra modale', 'url da caricare', 600, 400);
// 600 è la larghezza
// 400 è l'altezza

E boh, dovrebbe essere tutto.
Fatemi sapere come va ;-)


Edit: Ricordate che il forum di gdronline cambia gli apici con altri che causano problemi, assicuratevi di sostituirli in tutti gli spezzoni di codice che trovate in questo post.

20/08/2014 21:42:11 e modificato da norm il 20/08/2014 23:11:25

Blancks dovrebbero farti santo! :D
Ora seguo la guida e vedo di sistemare tutto! :)

Edit: Confermo, funziona alla perfezione! :D