jQuery UI y PHP

tomas1402 · #1 (**permalink**) 12/11/2012, 16:28

Buenas tardes a toda la comunidad!

Es la primera vez que posteo por este tema honestamente, ya que en general me suelo arreglar con lo que encuentro en internet. Pero en este caso hace varios días que estoy buscando pero no encuentro la respuesta.

Tengo un formulario, que envía datos por POST a un archivo que procesa en PHP. Dicho archivo da una respuesta en un popup, que dice si la consulta a PostgreSQL se ejecutó con éxito o no.

Lo que yo necesito hacer es que del archivo PHP que procesa, de una respuesta hacia la página que tiene el formulario, y ahí salga el Dialog de jQuery UI donde yo pueda poner la respuesta del procesamiento. O sea, reemplazar el popup que tengo ahora con el Dialog de jQuery UI.

La verdad es que busqué muchísimo, y si bien vi la parte donde se setea las propiedades del Dialog, no logro obtener la respuesta desde el PHP que procesa los datos.

Página de jQuery UI Dialog: http://jqueryui.com/dialog/#modal-message

Muchas gracias!
Tomas

oliverf2 · #2 (**permalink**) 12/11/2012, 17:41

Yo lo haria con jQuery, creando un script que al hacer submit en el formulario, introducirle un preventDefault para que evite el submit y en vez de eso realizas una peticion Ajax al archivo php y recuperas los datos de este mediante la opcion succes que te proporciona jQuery, te p.aso un codigo de algo parecido que hize..

Código:

  jQuery.fn.contenido = function(contenido){

    this.each(function(){
      var elemento = $(this);
      elemento.on("click",function(e){
        pagina = contenido
        e.preventDefault();
        $.ajax({
          url: contenido,
          type:"GET",
          data:({
            lang:lang
          }),
          success: function(datos){
            $("#ct").html(datos);
          },
          beforeSend: function(){
            $("#cargando").fadeIn(1);
          },
          complete: function(){
            $("#cargando").fadeOut();
          }
        });
      })
    });
  }

tomas1402 · #3 (**permalink**) 12/11/2012, 17:53

Oliver, gracias por la respuesta!

Pero la verdad es que no funcionó, creo que estoy utilizando mal el código. Lo que yo no entiendo es como traer los datos del archivo que procesa. Ese es mi mayor problema, no entiendo bien cómo funciona esa petición en AJAX que me comentás, ni como darle formato para que se adapte a mi código. Tengo que ponerle el ID de mi formulario?

Gracias!

oliverf2 · #4 (**permalink**) 12/11/2012, 18:02

Si, pones el id de tu formulario y con el e.preventDefault evitas su comportamiento natural, los datos del archivo php los traes mediante:

success: function(datos){
$("#ct").html(datos);
}

Donde el parametro datos te traes la respuesta del archivo php a la pagina donde reaizas la peticion, y ya dentro de la funcion, haces con la respuesta lo q kieras ( en tu caso meterlo en un Dialog, pues seria algo como:

success: function(datos){
$("#divdeldialogo")
.html(datos)
.dialog("open"); // Lo del dialog tmp estoy seguro q sea asi, deberias mirarlo

}

oliverf2 · #5 (**permalink**) 12/11/2012, 18:03

igualmente te aconsejo que te leas -> http://api.jquery.com/jQuery.ajax/

tomas1402 · #6 (**permalink**) 13/11/2012, 14:34

Oliver, muchas gracias por tu respuesta. Estuve probando el código que me pasaste y la documentación de jQuery, pero sigue sin mostrarme el Dialog, de hecho no cambió nada, sigue haciendo exactamente lo mismo que antes.

Les muestro el formulario:

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Cambiar Flag Cancelar</title>
<script>
</script>
</head>
<body>
<div id="mensaje" title="Download complete">
</div>
	<div id="container_12" class="contenedor">
		<div class="grid_12" id="area"><p><?php include("../header.php"); ?></p></div>
		<div class="clear"></div>
		<div class="grid_12" id="navegacion"><p><?php include("../navegacion.php"); ?></p></div>
		<div class="clear"></div>
		<div class="grid_3" id="sidebar"><?php include("../menu.php"); ?></div>
		<div class="grid_9" id="cuerpo">
		<?php
		if(isset($_SESSION['numemp'])) { 
								if (($_SESSION['flagcancelar']==1)) {?>
		<form action="cambiarflagcancelar_procesa.php" method="post" id="form" class="uniForm" >
				  <fieldset class="">
					<div class="ctrlHolder">
					  <label for="">Número de Caja</label>
					  <input type="text" id="caja" name="caja" size="35" class="textInput">
					  <p class="formHint">Ingresá el numero de caja.</p>
					</div>				  
					<div class="ctrlHolder">
					  <p class="label">Área</p>
					  <ul class="blockLabels">
						<li><label for=""><input type="radio" id="area" name="area" value="M"> Muebles</label></li>
						<li><label for=""><input type="radio" id="area" name="area" value="R"> Ropa</label></li>
					  </ul>
					  <p class="formHint">A qué area pertenece la caja.</p>
					</div>
					<div class="ctrlHolder">
					  <p class="label">Tienda</p>
					  <ul class="blockLabels">
						<li><label for=""><input type="radio" id="area" name="tienda" value="1"> Tienda 1</label></li>
						<li><label for=""><input type="radio" id="area" name="tienda" value="2"> Tienda 2</label></li>
						<li><label for=""><input type="radio" id="area" name="tienda" value="3"> Tienda 3</label></li>
						<li><label for=""><input type="radio" id="area" name="tienda" value="4"> Tienda 4</label></li>
						<li><label for=""><input type="radio" id="area" name="tienda" value="5"> Tienda 5</label></li>
						<li><label for=""><input type="radio" id="area" name="tienda" value="7"> Tienda 7</label></li>
						<li><label for=""><input type="radio" id="area" name="tienda" value="8"> Tienda 8</label></li>
						<li><label for=""><input type="radio" id="area" name="tienda" value="9"> Tienda 9</label></li>
						<li><label for=""><input type="radio" id="area" name="tienda" value="10"> Tienda 10</label></li>
						<li><label for=""><input type="radio" id="area" name="tienda" value="13"> Tienda 13</label></li>				
					  </ul>
					  <p class="formHint">De qué tienda es la caja.</p>
					</div>
					<div class="ctrlHolder">
					  <p class="label">Cancelar</p>
					  <ul class="blockLabels">
						<li><label for=""><input type="radio" id="cancelar" name="cancelar" value="1"> Activo</label></li>
						<li><label for=""><input type="radio" id="cancelar" name="cancelar" value=" "> Desactivado</label></li>
					  </ul>
					  <p class="formHint">Activa o desactiva el flag.</p>
					</div>
				  
					<div class="buttonHolder"><button type="submit" name="submit" class="primaryAction">Cambiar Flag</button></div>
				  </fieldset>
				</form>
		<?php
		} else { ?>
			Usted no tiene derechos para realizar este reporte. <a href="/principal.php">Volver</a>
			<?php } 
    } else { ?>
	Usted no ha ingresado. <a href="/index.php">Ingrese nuevamente.</a>
	<?php } ?>
		</div>
		<div class="clear"></div>
		<div class="grid_12" id="footer"><p><?php include("../footer.php"); ?></p></div>
		<div class="clear"></div>
	</div>
</body>
</html>

El problema es que cuando puse el código, no me está devolviendo el HTML que deja el archivo que procesa el formulario. Cómo puedo adaptar el código en el formulario para que me muestre el dialog? En principio me gustaría hacer funcionar el preventDefault, ya que aunque lo puse sigue haciendo la acción original.

Gracias!
Tomas.

tomas1402 · #7 (**permalink**) 19/11/2012, 13:44

Alguien que me pueda dar una mano con esto, puede ser? La verdad es que busqué y busqué pero no logré llegar a una solución :S.

AlexTorres007 · #8 (**permalink**) 14/05/2013, 14:29

Saludos tomas1402 aun sigues necesitando ayuda en este tema o ya lo resolviste?