[SOLUCIONADO] Integrar form en modal jquery UI

[wilmer30]

Hola:

Tengo un panel el cual tiene muchos formularios, para ello lo ideal seria tener ventanas modales para los crud, en este link se encuentra lo que necesito pero no tengo idea de como ingresar el action y su formulario al modal, cuando en el ejemplo se tiene en el mismo archivo html el form y el jquery, algo asi:

Código HTML:

		$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {
                         .....
                        }
<div id="dialog-form" title="Create new user">
	<p class="validateTips">All form fields are required.</p>

	<form>
	<fieldset>
		<label for="name">Name</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div> 

Alguna idea por favor

[GatorV]

Recuerda que Zend (y PHP) es algo del servidor, no del cliente, entonces para PHP es un post normal de un form, así que solo debes de indicarle al <form> el action de donde quieres que se haga el POST, ya si lo haces en un modal o lo que sea, es indiferente para Zend, ya que es un POST normal.

Saludos.

[wilmer30]

Encontre una funcrion .load() de jquery el cual si debería abrir el fomulario, no conosco bien jquery, pero realizando algunos ejemplo si funciona, pero en este caso:

Código Javascript:

$( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 400,
        width: 450,
        modal: true,
        buttons: {
            "Create an account": function() {
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
 
    $( "#create-user" )
        .button()
        .click(function() {
            $( "#dialog-form" ).load('/index/add').dialog("open");
        });
 

y en mi vista tengo

Código HTML:

<div id="dialog-form" title="Create new user"></div>
    <button id="create-user" style='background:url("images/new_act.jpg") center no-repeat;' title='Nuevo'>&nbsp;</button>
 

Se abre el modal pero con un mensaje de error:

Fatal error: Uncaught exception 'Zend_Controller_Action_Exception' with message 'Action "add" does not exist and was not trapped in __call()' in C:\xampp\php\library\Zend\Controller\Action.php:48 5

[GatorV]

Pues eso te esta mostrando específicamente que no tienes un addAction en tu controller (que es lo que quieres mostrar).

[wilmer30]

logre resolver el problema efectivamente no redirigia bien en el load, sin embargo existe otro tema referente a mi form que no logro resolver, es que una ves que carga el formulario en el modal asi:

Código Javascript:

$(function() {
    var name    = $( '#name' ), //no obtiene el nombre
        defecto = $( '#defecto' ), //no obtiebe el valor numeral
        allFields = $( [] ).add( name ).add( defecto ),
        tips = $( ".validateTips" );
    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Guardar": function() {
                $.post('/permisos/index/add #container',{name: name.val(),defecto: defecto.val()},
                    function(){
                    $('#info').load('/permisos #wtable');
                });
                alert(name.val() + defecto.val()),              
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }       
    });
 
    $( "#create-user" )
        .button()
        .click(function() {
            $( "#dialog-form" ).load('/permisos/index/add #container').dialog("open");
        });
});
 

No obtiene el valor de:

Código HTML:

<dt id="name-label"><label for="name" class="required">Usuario:</label></dt>
<dd id="name-element">
<input type="text" name="name" id="name" value="" /></dd>
<dt id="defecto-label"><label for="defecto" class="required">Valor:</label></dt>
<dd id="defecto-element">
<input type="text" name="defecto" id="defecto" value="" /></dd>
 

y cuando deseo enviar a guardar simplemente no guarda nada por que no tiene ningun registro, puse un:

alert(name.val() + defecto.val())

y tampono me muestra nada.

[wilmer30]

En el ejemplo de Dialog Widget funciona pero para que am i me funcione realice esto exactamente no se por que, las variables los pongo dentro de la funcion del boton:

Código Javascript:

buttons: {
            "Guardar": function() {
    var name    = $( '#name' ), //ya detecta el valor
        defecto = $( '#defecto' ), //ya detecta el valor
                $.post('/permisos/index/add #container',{name: name.val(),defecto: defecto.val()},
                    function(){
                    $('#info').load('/permisos #wtable');
                });
 

esto soluciona el problema