Ajax dentro de ajax con jquery

martuanez · #1 (**permalink**) 09/02/2010, 20:50

Mi problema radica en que tengo una página con tabs creadas con jquery UI, estas cargan otras páginas dinamicamente sin ningún esfuerzo http://jqueryui.com/demos/tabs/ y en uno de estos tabs tengo un formulario que me devuelve un mensaje al ser enviado también via ajax y con jquery el tema es que por separado funcionan y juntos no......

Sino se entiende pongo el codigo, avisen, saludos!

mayid · #2 (**permalink**) 09/02/2010, 21:15

Cita:

Ajax dentro de ajax

?

Por favor publica el codigo que estas usando. Si no vemos el codigo no lo podemos evaluar.

martuanez · #3 (**permalink**) 09/02/2010, 21:24

Este sería una especie de resumen del codigo:

Código HTML:

<?php
require ("sesion.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="login.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript">
$(function() {
  $("#tabs").tabs().find(".ui-tabs-nav");
});
jQuery(function($){
      $("#Telefono").mask("999-9999");
      $("#celular").mask("999-999999");
      $("#Cedula").mask("9.999.999-9");
   });
$(function() {
  $('#f_nac').datepicker({
      changeMonth: true,
      changeYear: true,
   dateFormat: 'yy-mm-dd',
  yearRange: '1900:2050',
  maxDate: '+0d'
  });
});
$(function() {
  $('#f_ing').datepicker({
      changeMonth: true,
      changeYear: true,
   dateFormat: 'yy-mm-dd',
  yearRange: '1900:2050',
  maxDate: '+0d'
  });
});
</script>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP ajax login form using jquery</title>
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.7.2.custom.css"/>
</head>
<body class="linea">
	  
<img src="images/logo_Cerro.png" width="132" height="138" alt="Logo" />
    <p class="button_text"><a href="index.php?logoff=1" id="logout">Salir</a></p>
<div class="contenedor">

<div id="tabs">
<ul>
  <li><a href="#tabs-1">Inicio</a></li>
  <li><a href="index.html">Informes</a></li>
  <li><a href="users.html">Consultas</a></li>
  <li><a href="#tabs-2">Altas</a></li>
  <li><a href="src/index.php">Bajas</a></li>
  <li><a href="jquery_ui.html">Modificaciones</a></li>
</ul>
<div id="tabs-1">
  <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">

  <fieldset class="rounded-corners">
  <legend>Ingreso de Socio</legend>
  <form id="alta_socio" class="??"  method="post" action="guardar_alta.php">

  <label class="description" for="nombres">Nombres </label>
  <div>
    <input id="nombres" name="nombres" class="element text medium" type="text" size="50"maxlength="255"/>
    <span id="nombreInfo"></span>
  </div> <br>

  <label class="description" for="apellidos">Apellidos </label>
  <div>
    <input id="apellidos" name="apellidos" class="element text medium" type="text" size="50" maxlength="255"/>
    <span id="apellidosInfo"></span>
  </div> <br>

  <label class="description" for="Cedula">Cedula de dentidad </label>
  <div>
    <input id="Cedula" name="Cedula" class="element text medium" type="text" maxlength="255" value=""/>
  	<span id="cedinfo"></span>
  </div>

  <p>
    <label class="description" >Fecha de nacimiento </label>
   <br>
   <input type="text" id="f_nac"/></label><span id="f_nacinfo"></span>
   <br>


    </p>
   <p>Sexo:<br />
    
  <select class="element select medium" id="Sex" name="Sex">
    <option value="" selected="selected"></option>
    <option value="0" >Masculino</option>
    <option value="1" >Femenino</option>
   </select><span id="SexInfo"></span>
      <br />
    </p>
      <p>

      <label class="description" for="Domicilio">Domicilio </label><br />
      <input id="Domicilio" name="Domicilio" class="" type="text" size="50" maxlength="255" />
      <span id="Domi_info"></span>


      <p>
      <label class="description" for="Telefono"><br>
      Telefono </label>
      <input id="Telefono" name="Telefono" class="element text" size="8"  value="" type="text">

      <label class="description" for="celular">Celular</label>

      <input id="celular" name="celular" class="element text" size="10"  value="" type="text">
      Mail
      <input id="mail" name="mail" size="20"  value="" type="text"/>
      <span id="tel_info">Es necesario ingresar al menos un número tel/cel</span><br /><br>
      <label class="description" for="Cat">

      Categoría </label><br>

        <select class="element select medium" id="Cat" name="Cat">
        <option value="" selected="selected"></option>
         <option value="1" >Infantiles</option>
         <option value="2" >Cadetes</option>
         <option value="3" >Suscriptores Damas/Jubilados</option>
         <option value="4" >Suscriptores Caballeros</option>
         <option value="5" >Activos Damas/Jubilados</option>
         <option value="6" >Activos Caballeros</option>
         <option value="7" >Honorarios</option>
         <option value="8" >Vitalicios Colaboradores</option>
         <option value="9" >Vitalicios</option>
         </select><span id="CatInfo"></span> <br>

   <label class="description" for="d_cobro">
   <br>
    Direccion de Cobro </label> <br>

     <input id="d_cobro" name="d_cobro" class="element text medium" type="text" maxlength="255" value=""/>
     <span id="d_cobroInfo"></span> <br>

   <label class="description" for="f_ing">
   <br>
    Fecha de Ingreso<br>
   </label><input type="text" id="f_ing"/></label><span id="f_ingInfo"></span>
   <div></div>
   <label class="description" for="Zona">Zona </label>
   <div>
     <input id="Zona" name="Zona" class="element text medium" type="text" maxlength="255" value=""/>
     </div>
  <br>
   <label class="m_pago" for="m_pago">
    Modo de Pago </label><br>

      <select class="element select medium" id="m_pago" name="m_pago">
         <option value="" selected="selected"></option>
         <option value="1" >Mensual</option>
         <option value="2" >Trimestral</option>
         <option value="3" >Semestral</option>
         <option value="4" >Anual</option>

        </select><span id="m_pagoInfo"></span>




          <input type="hidden" name="form_id" value="164381" />
          <input id="saveForm" class="button_text" type="submit" name="submit" value="ingresar"  onclick="guardar_alta();"  />
  </form>
  </fieldset>
</div>
</div>
</div>

</div><!-- End demo -->



<div class="demo-description">

<p id="footer" align="center">Sitio creado por M&amp;C para el Club Atletico Cerro-2010</p>

</div><!-- End demo-description -->
<img src="images/jugador.png" width="154" height="228" align="right"/>
</body>

<script type="text/javascript" src="js/validacion.js"></script>
<script type="text/javascript" src="js/validacion.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
	$('#saveForm').click(function() {
		$.ajax({ 
		type: "POST", 
		url: "guardar_alta_.php", 
		data:$("#alta_socio").serialize(),
		success: function(respuesta) { 
		$('#resultado').html(respuesta);

	} 
		}); 
		return false;
	}); 
}); 
   </script>
</html>


</body>
</html>

para este caso el formulario está dentro de está página, de cualquier manera el ajax para el formulario no funciona...

Dany_s · #4 (**permalink**) 10/02/2010, 04:24

eso que es? el formulario o la página que llama al formulario que no te funciona?

mayid · #5 (**permalink**) 10/02/2010, 07:59

Si no me equivoco, esto es una especie de document.ready:

Cita:

$(function() {

Y ya tenias al menos un document.ready declarado. No podes poner dos veces eso.

martuanez · #6 (**permalink**) 10/02/2010, 14:59

Cita:

Iniciado por Dany_s

eso que es? el formulario o la página que llama al formulario que no te funciona?

eso es el formulario en la pagina que lo llama, el error es el mismo, la lista desordenada es usada para crear los tabs po r medio del llamado que aparece arriba, los vinculos externos de las etiquetas <li> son llamados por jquery UI via ajax, esos funcionan bien lo que no me funciona es el ajax que toma la respuesta para el formulario...

mayid · #7 (**permalink**) 10/02/2010, 15:50

A ver si queda claro:

Cita:

$(function() {
$("#tabs").tabs().find(".ui-tabs-nav");
});
jQuery(function($){
$("#Telefono").mask("999-9999");
$("#celular").mask("999-999999");
$("#Cedula").mask("9.999.999-9");
});
$(function() {
$('#f_nac').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
yearRange: '1900:2050',
maxDate: '+0d'
});
});
$(function() {
$('#f_ing').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
yearRange: '1900:2050',
maxDate: '+0d'
});
});

No tenes cuatro llamadas a document.ready?

martuanez · #8 (**permalink**) 10/02/2010, 15:55

Cita:

Iniciado por mayid

A ver si queda claro:

No tenes cuatro llamadas a document.ready?

Mmm, puede ser, eso es por iniorancia... como quedaría sino es así? a pesar de eso no está ahí el error sino en el ajax, igual me gustaría que me desaznaras

mayid · #9 (**permalink**) 10/02/2010, 16:11

Son errores encadenados. No es puntualmente algo de ajax, creo, sino lo que te marco.

Tene presente esto: las funciones no pueden ser anonimas en javascript / jquery.
http://www.desarrolloweb.com/articulos/583.php

En cuando a document.ready: todo el codigo que esté ahi se ejecutará tras la carga de la pagina:

Cita:

$(document).ready(function() {
// put all your jQuery goodness in here.
});

No puede haber mas de uno.
http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

La sintaxis reducida de document.ready es

Cita:

$(function() {

})

martuanez · #10 (**permalink**) 10/02/2010, 16:17

He resuelto el tema de las $function() pero sigue sin funcionar el aax dentro de los tabs...

mayid · #11 (**permalink**) 10/02/2010, 17:18

Podes publicar el codigo por favor?

martuanez · #12 (**permalink**) 10/02/2010, 20:05

Encontré este articulo que habla de que no importa la cantidad de $(document).ready que se usen no hay problemas
http://docs.jquery.com/Tutorials:Mul...ument).ready()
e investigando encontré este articulo que creo habla de mi problema pero no pude aplicar la solución...
http://forum.jquery.com/topic/jquery-inside-ajax-tab

mayid · #13 (**permalink**) 11/02/2010, 08:16

Ok. Gracias por publicarlo. Estaba convencido de que mas de uno daba problemas.

La solución que planteas es con el evento .live() ? Eso, hasta donde se, adjudica eventos a todo html nuevo, cargado dinamicamente, si previamente existían eventos para el html "nativo".

mayid · #14 (**permalink**) 11/02/2010, 09:31

Ah! Ya entendí. Cuando carga la pagina por primera vez, el formulario todavía no existe. Sino que viene luego con ajax. Entonces, como llega tarde, se perdió la adjudicación de eventos. Y eso se puede subsanar con .live()

:)

martuanez · #15 (**permalink**) 11/02/2010, 18:27

Claro, por ahí viene la mano, pero todavia no le cache bien como usarlo...

mayid · #16 (**permalink**) 12/02/2010, 07:37

Yo lo veo así:

Cita:

$("#saveForm").live("click",function(){

$.ajax({
type: "POST",
url: "guardar_alta_.php",
data:$("#alta_socio").serialize(),
success: function(respuesta) {
$('#resultado').html(respuesta);

}
});
return false;

});

Aca esta la documentación: http://api.jquery.com/live/

jordan99 · #17 (**permalink**) 14/05/2010, 15:19

Cita:

Iniciado por mayid

Yo lo veo así:
$("#saveForm").live("click",function(){

$.ajax({
type: "POST",
url: "guardar_alta_.php",
data:$("#alta_socio").serialize(),
success: function(respuesta) {
$('#resultado').html(respuesta);

}
});
return false;

});

Aca esta la documentación: [url]http://api.jquery.com/live/[/url]

Ejecuto tu código y se envia cuando hago click en cualquier elemento del formulario.(asumo que #saveForm es el Id de tu formulario)

La pregunta es clara como envio un formulario traido previamente con ajax ? Alguien me puede ayudar please

mayid · #18 (**permalink**) 14/05/2010, 17:17

En pseudo codigo, y sin usar live, sería así:

- cargar rl formulario con ajax.
- on success, declarar una función ajax para el nuevo formulario

Es decir, aunque tengas que escribir mucho codigo, encadená esto:

ajax -> on success asignación de eventos click ( o submit ) para tu formulario.