Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/05/2013, 15:11
Sirrohan
 
Fecha de Ingreso: julio-2010
Mensajes: 275
Antigüedad: 14 años, 5 meses
Puntos: 21
Cargar contenido a medida que cambia el DOM con ajax

Saludos amigos,

Tengo una pequeña situación con jquery, resulta que estoy haciendo una búsqueda, pero al momento de cargar el contenido cambia el DOM, lo estoy haciendo de esta forma:
Código Javascript:
Ver original
  1. $(document).ready(function(){
  2. $("li.Buscar").click(function(){
  3.         Buscar();
  4.     });
  5. function Buscar()
  6. {
  7.     var contenido= $("<td colspan='5'><h1>Buscar</h1></td>");
  8.     $.get("../modulo_buscar/Vista/Buscar.php",  function(resultado)
  9.     {
  10.         if (resultado == false) {
  11.             alert ('Ocurrió un error');
  12.         }
  13.         else
  14.         {
  15.             $(".Contenido").empty();
  16.             $(".Contenido").append(contenido);
  17.             $(".Contenido").append(resultado);//aqui se agrega en la clase contenedora del html
  18.  
  19.             var campo1= $("#campo1").val(); //este campo viene con el get
  20.             var url = $(this).attr('action');  //la url del action del formulario
  21.  
  22.             $("#form_buscar").on('submit',function() //este submit viene del archivo php
  23.             {
  24.                 $.get(url, {campo1:campo1}, function(resultado2){
  25.                         if(resultado2 == false)
  26.                         {
  27.                             alert("No se encontró el campo");
  28.                         }
  29.                         else
  30.                         {   //#TablaBusqueda es el identificador que viene del
  31.                     $(".Contenido").empty();
  32.                     $(".Contenido").append(contenido);
  33.                     $(".Contenido").append(resultado2);
  34.  
  35.                         }
  36.  
  37.                     });
  38.  
  39.             });
  40.  
  41.            
  42.         }
  43.     });
  44. }


Código HTML:
Ver original
  1. <table align="center" border="0" id="TablaPrincipal">
  2.         <tr>
  3.             <td colspan="6" class="Encabezado">
  4.                 <p class="Titulo">Titulo</p>               
  5.             </td>
  6.         <tr>
  7.         <tr>
  8.             <td colspan="6" class="cintillo">
  9.                 <span> Hola!</span>
  10.             </td>
  11.         </tr>
  12.         <tr>
  13.             <td colspan="1" width="15%"  class="FondoGris">
  14.                 <ul class="Menu">
  15.                     <br />
  16.                     <li class="Agregar"><a href="#"><h3>Agregar</h3></a></li>
  17.                     <br />
  18.                     <li class="Editar"><a href="#"><h3> Modificar / Eliminar </h3> </a></li>                   
  19.                     <br />
  20.                     <li class="Buscar"><a href="#"><h3> Buscar </h3></a></li>
  21.                     <br />
  22.                     <li class="Reportes"><a href="#"><h3> Reportes </h3></a></li>
  23.                     <br />
  24.                 </ul>
  25.             </div>
  26.             </td>
  27.             <span id="Contenedor" >
  28.                 <td colspan="5" width="85%" class="Contenido" style="position: absolute;top: 18%;left: 16%;height: 55%;width:82.5%; overflow:auto;  text-align: left;">
  29.                     <h1>BIENVENIDOS</h1>                                   
  30.                 </td>
  31.                 </span>
  32.             </span>
  33.         </tr>
  34.  
  35.        
  36.  
  37.         <tr>
  38.             <td colspan="6" class="cintillo">
  39.             <span class="PiePagina">
  40.                 Desarrollado por mi
  41.             </span>
  42.             </td>
  43.         </tr>      
  44.         <tr>
  45.             <td colspan="6" class="VersionNavegador">
  46.             &nbsp;
  47.             </td>
  48.         </tr>
  49.  
  50.     </table>

Así puedo mostrar el formulario que se entregar en el primer $.get... pero a la hora de mostrar el html en el segundo get, éste se abre en una ventana nueva y no dentro del contenedor del html...

¿Cómo podría solucionar esto?