Ventana modal con contenido switch/case y php

[jesusjj]

Buenas tardes:

Quería hacer una consulta, a ver si alguien me puede echar una mano, ya que he visto cosas que podrían orientarme en la búsqueda del foro, pero no lo que necesito exactamente.

Les comento la idea brevemente y a ver si me pueden recomendar algo.

Estoy montando un sistema de gestión para una asociación sin ánimo de lucro, que genere diplomas para distintos eventos, gestione las fichas de asociados, cuotas, etc.

El tema es que para distintas 'acciones' he creado una 'ventana modal' apoyándome en un div oculto, que muestro según lo necesite. Para la ventana modal 'básica' no he encontrado problemas, pero sí para casos más complicados, ya que lo que he creado es una 'base' y lo que quiero es utilizarla mostrando distinto contenido en función de dónde la invoque.

Las funciones que puede tener la ventana son:
- Formulario secundario, para pasar (o no necesariamente un valor a un formulario principal)
- Ventana de validación/confirmación
- Formulario de actualización de datos,
- ...

Hasta ahora lo que he hecho es que cuando invoco a la ventana me creo una variable global en PHP que leo posteriormente y en función del valor, me hace en el div contenedor un 'include' u otro, con un switch/case.

Al principio lo veía como una opción lógica, hasta que me he dado cuenta que para que reconocer la variable global, necesita recargar la página, ya que el div contenedor de la ventana modal, está siempre presente, pero con un 'display: none'. Aquí es donde surge el problema, sobretodo cuando lo que estoy mostrando es una ventana de validación / comprobación con los valores de un formulario relleno, ya que me obliga a recargar la página o ha hacer una chapuza intermedia que me da hasta vergüenza comentarla :p.

Como framework javascript estoy usando jQuery y no sé si alguna de las ventanas modales que existen para jQuery me solucionaría el problema de carga recibiendo las variables globales.

Quizá no sea la mejor vía para indicar qué contenido cargar lo de las variables globales, pero no se me ha ocurrido cómo hacerlo y con javascript aún no me termino de soltar.

Otra cosa, también estoy utilizando el framework XAJAX, por si alguien lo ve como una opción para hacer lo que busco.

Muchas gracias de antemano.

Saludos

[jesusjj]

Buenas, creo que lo voy a resolver con algo así:
http://dixso.net/jquery/css-popup-jquery-ajax/

Ya os contaré. Creo que es buena idea pasarlo por $_GET[] mediante AJAX. Ahora, a ver si me aclaro sin desmontar mucho lo que tengo hecho.

Ciao

[jesusjj]

Buenos días:

Ya lo resolví al final de la siguiente manera (a falta de hacer mil pruebas cuando tenga tiempo):

jQuery:

Código Javascript:

function cargaModal(URL) {
    $("#cargaContenido").load(URL, function(){
        $("#modalMain").slideDown("slow");
    })
}
 

HTML:

Código HTML:

<a href="#"><img id="altaAlumno" name="altaAlumno" class="openModal" src="<?php echo RUTA_IMG ?>newAsocBT.png" width="20px" title="alta de alumno" onclick="cargaModal('<?php echo RUTA_PHP; ?>contenidoModal.php?modal=altaAsociado')" /></a>
 
<!-- la ventana -->
 
<div id="modalMain" class="overlay">
    <div class="modalBlock">
 
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td class="modalBlockHeader">
                    <a href="#"><img src="<?php echo RUTA_IMG ?>close.png" title="cerrar" width="30px" class="closeModal" /></a>
                    <p class="titulo">Alta de Alumno</p>
                </td>
            </tr>
            <tr>
                <td id="cargaContenido" class="modalBlockContent">                        
 
                </td>
            </tr>
            <tr>
                <td class="modalBlockFooter">&nbsp;</td>
            </tr>
        </table>
        
    </div>
</div>
 

CSS:

Código CSS:

/*######################################################################*/
/*          VENTANA MODAL                                               */
/*######################################################################*/
 
.overlay{
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url("../../images/trans.png") repeat;
     z-index:1001;   
}
 
.modalBlock {
    display: block;
    width: 720px;
    position: absolute;
    left: 25%;
    top: 15%;
    height: 50%;
    z-index: 1002;        
}
 
.modalBlock table { width: 100%; }
 
.modalBlockHeader { background: url("../../images/modalHeader.png") no-repeat; height: 51px; }
.modalBlockHeader .titulo { font-weight: bold; padding-left: 30px; margin-top: 20px; margin-bottom: -5px; }
.modalBlockHeader a img { float: right; margin-top: -3px; margin-right: 0; padding-top: 0; border: 0; }
 
.modalBlockContent { background: url("../../images/modalBody.png") repeat-y center; padding: 15px; margin: 0; }
.modalBlockFooter { background: url("../../images/modalFooter.png") no-repeat; height: 25px; } 
 
.modal {
     display: block;
     position: absolute;
     top: 25%;
     left: 25%;
     width: 100%;
     height: 100%;
     padding: 16px;
     background: #fff;
     color: #333;
     z-index:1005;
     overflow: auto;
}
 
/*#####################*/
 

PHP:

Código PHP:

if(!isset($_GET['modal'])){
        echo "no carga nada";
    }else{
        $contenido = $_GET['modal'];
    }
    
    $recarga = "Si aparece este mensaje, pulsa el bot&oacute;n: <input type='button' value='...' onclick=\"window.location.reload()\" />";
    
     switch ($contenido) {
        case "altaAsociado": include("formAsociado.php"); break;
        case "recarga": echo $recarga; break;
        
        default: echo $recarga; break;                            
    }
 

Lo único, que en este último php me ha tocado poner de nuevo todos los includes, porque no me los carga e intentando meter este fichero en el case, la url enviada por GET hacía que se enviaran cosas raras, bueno, lo he descartado porque no me convencía lo que hacía.

Espero que le pueda servir a alguien.