Como refrescar un div con jquery sin perder la forma

[bigquazar]

Hola,

estoy creando una aplicacion con jquery.

tengo un DIV contenedor en el cual en una primera instancia hay un enlace a una funcion JS q lo q hace es encapsular todo el (Codigo Html - Datos) en el servidor. Y cargandolo dentro del mismo DIV contenedor con jquery posterior.... me funciona de maravilla con la unica maña, que al cargar ese (Codigo Html - Datos) el formato CSS y plugins Javascript se me van a la mierdd...nose que sucede... he leido y dicen q se debe a que el arbol DOM se carga inicialmente en el evento Ready y ese contenido dinamico q se genera despues no es considerado en tal evento y q se soluciona eventualmente con la funcion .live() o .on() de jquery .....pero nada, intente y nose como es...




Pongo ejemplo , y perdonen la lata :)




DIV contenedor con datos iniciales:

Código PHP:

                 <div class="block" id="bloque"> 
                  
                    <table class="data display datatable" id="example"> 
                    <thead> 
                        <tr> 
                            <th>C&oacute;digo</th> 
                            <th>Agrupador</th> 
                            <th>Grabar</th> 
                            <th>Aplica</th> 
                            <th>&nbsp;Ver</th> 
                        </tr> 
                    </thead> 
                    <tbody> 
                    <?php 
                      $sql =  "select codigoagrupador, tituloagrupador,GlosaAgrupador, aplica from agrupador";  
                      $result = mysql_query($sql); 
 
                      while($row =mysql_fetch_array($result)) 
                         {  
                         
                        echo "<tr class='odd gradeX'>\n"; 
                        echo "<td>{$row['codigoagrupador']}</td>\n"; 
                        echo "<td><input class = 'text-plano' type='text' value='{$row['tituloagrupador']}' id='{$row['tituloagrupador']}' /></td>\n"; 
                        $Ambito    =    $row['codigoagrupador']; 
                        echo "<td><a href='#' onclick='MostrarAmbito(\"{$row['codigoagrupador']}\",\"{$row['tituloagrupador']}\",\"{$row['GlosaAgrupador']}\");' >Editar</a></td>\n"; 
                         
                        if  ($row['aplica'] == "-1") 
                            echo "<td><select id='aplica' onChange='SetAmbito(\"{$row['codigoagrupador']}\",this.value);'><option value='-1'>Si</option><option value='0'>No</option></select> </td>\n"; 
                        else 
                            echo "<td><select id='aplica' onChange='SetAmbito(\"{$row['codigoagrupador']}\",this.value);'><option value='0'>No</option><option value='-1'>Si</option></select> </td>\n"; 
 
                        echo "<td><input type='button' id ='btnComponentes'  onClick='TraeComponentes(\"{$row['codigoagrupador']}\");' value='Componentes'  /></td>\n"; 
                        echo "</tr>"; 
                         
                      } 
                ?> 
                    </tbody> 
                </table> 
                </div>  

Funciones que cargan HTML:

Código PHP:

          function CargaComponentes(data) 
        { 
         
            $('#bloque').html(data); 
        } 
         
        function TraeComponentes(CodAmb) 
        { 
             
 
            $.ajax({ 
                url: "php_ajax/trae_componentes.php?CodAmb=" + CodAmb, 
                dataType: "html",  
                success: function(data){ 
                    CargaComponentes(data); 
                } 
            }); 
        }  
   

Pagina trae_componentes.php que encapsula codigo (HTML-Datos):

Código PHP:

      include('../includes/connect.php'); 
    $CodAmbito = $_REQUEST['CodAmb']; 
     
    $sql      = "select CodigoComponente,upper(GlosaComponente) as GlosaComponente,DescripcionComponente,Aplica,Obligatorio "; 
    $sql     .= "from Componentes "; 
    $sql     .= "where CodigoAgrupador = '$CodAmbito'"; 
     
    $rst    = mysql_query($sql,$link); 
    $n        = mysql_num_rows($rst); 
     
    $codigo = ""; 
     
 
     
    $codigo  = "<a href='#' id='EnlaceAgrupadores' >Agrupador</a><br/>"; 
    $codigo .= "<span style='color:#2e5e79;' >{$CodAmbito}</span><br/><br/>"; 
     
    $codigo .= "<table class='data display datatable' id='example'> 
                <thead> 
                    <tr> 
                        <th>C&oacute;digo</th> 
                        <th>Glosa</th> 
                        <th>Aplica</th> 
                        <th>Obligatorio</th> 
                        <th>Ver</th> 
                    </tr> 
                </thead> 
                <tbody> 
    ";     
     
    for ($i=0;$i<$n;$i++) 
    { 
        $row = mysql_fetch_array($rst); 
        $CodComponente = $row['CodigoComponente']; 
         
        $codigo .= "<tr>"; 
        $codigo .= "<td>$CodComponente</td>"; 
        $codigo .= "<td>{$row['GlosaComponente']}<br></td>"; 
         
        if  ($row['Aplica'] == "-1") 
            $codigo .= "<td><select id='aplica' onchange='SetComponente(\"$CodAmbito\",$CodComponente,this.value);'><option value='-1'>Si</option><option value='0'>No</option></select> </td>"; 
        else 
            $codigo .= "<td><select id='aplica' onchange='SetComponente(\"$CodAmbito\",$CodComponente,this.value);'><option value='0'>No</option><option value='-1'>Si</option></select> </td>"; 
             
             
        if  ($row['Obligatorio'] == "-1") 
            $codigo .= "<td><select id='aplica' onchange='SetObligaComponente(\"$CodAmbito\",$CodComponente,this.value);'><option value='-1'>Si</option><option value='0'>No</option></select> </td>"; 
        else 
            $codigo .= "<td><select id='aplica' onchange='SetObligaComponente(\"$CodAmbito\",$CodComponente,this.value);'><option value='0'>No</option><option value='-1'>Si</option></select> </td>"; 
         
         
        $codigo .= "<td><input type='button' value='Caracteristicas' onclick='TraeCaracteristicas(\"$CodAmbito\",$CodComponente)' ></td>"; 
 
 
        $codigo .= "<tr/>"; 
 
    } 
     
    $codigo .= " 
        </tbody> 
    </table>"; 
     
     
    echo utf8_encode($codigo);  
   

Muchas gracias :D seria feliz si alguien sabe cmo solucionar esto.

[Lynxcraft]

no entiendo muy bien lo que quieres hacer pero supongo que el problema que tiene es que al meter el muevo contenido en html dentro de div #bloque los elementos creados por jquery los eliminas, esto se puede arreglar separando las funciones


mas o menos asi esto seria un ejemplo

Código PHP:

  <div class="block" id="bloque">  
                   
                    <table class="data display datatable" id="example">  
                    <thead>  
                        <tr>  
                            <th>C&oacute;digo</th>  
                            <th>Agrupador</th>  
                            <th>Grabar</th>  
                            <th>Aplica</th>  
                            <th>&nbsp;Ver</th>  
                        </tr>  
                    </thead>  
                    <tbody>  
                    </tbody></table> 
                     
</div> 
 
<script type="text/javascript"> 
function updateidbloque(){ // aqui meterias lo que quieres que se active cada ves que se carge el nuevo contenido 
    $("#bloque").each(function(){ 
        $("table").css({"background-color":"#000"});     
    }); 
} 
// esto para cuando carge la pagina 
$(document).ready(function(){ 
    updateidbloque(); 
}); 
function CargaComponentes(data) {  
      $('#bloque').html(data);  
      updateidbloque(); // esto cada vez que carges por ajax 
}  
function TraeComponentes(CodAmb){  
            $.ajax({  
                url: "php_ajax/trae_componentes.php?CodAmb=" + CodAmb,  
                dataType: "html",   
                success: function(data){  
                    CargaComponentes(data);  
                }  
            });  
        }   
</script>  
  

[bigquazar]

Gracias Lynxcraft


Se veia buena la idea pero no resulta.

La idea es esa q plantie,, utilizar una misma pagina donde cargar codigo segun lo q el usuario valla seleccionando,, pero el formato css y demas cosas se pierden cuando se se carga codigo nuevo.... alguna otra idea?? las funciones .live y .on .... ????

[bigquazar]

LynxCraft,

Quizas tu puedes ayduar...

En el codigo que me indicas:

Código PHP:

  function updateidbloque(){ // aqui meterias lo que quieres que se active cada ves que se carge el nuevo contenido 
    $("#bloque").each(function(){ 
        $("table").css({"background-color":"#000"});     
    }); 
}  
   

Todo lo que esta dentro de $("table").css({ }); es el formato que adquiriria el nuevo codigo que se carga en la pagina cierto ... pero estoy utilzando un tempaltes con muchas librerias JS y CSS , por lo tanto me complique indicando en esa clausula el formato.. la idea es conservar las librerias cargadas al inicio para aquel codigo nuevo... se puede ???

[Lynxcraft]

en teoría cuando haces la primera carga de la pagina todos los js y css se mantienen

loa que me parece extraño es el estilo ya que se tiene que colocar automáticamente cada ves que añadas nuevo contenido al bloque prueba a poner media="all" el el tag de carga del css ejemplo <link media="all" rel="stylesheet" href="mistilo.css" /> a ver si por lo menos el estilo te lo mantiene

por otro lado si cargas varios plugins que implican al div#bloque en concreto tendrás que ejecutarlos después de esto $('#bloque').html(data);

[vicenreler]

Hola.
Me gustaría saber si has solucionado algo de lo que planteas.
Yo quiero hacer algo parecido si no es lo mismo. Consigo cargar el contenido de otros html en la misma página, y los css y js los carga, pero porque repito los link en los otros archivos html que cargo. Esto lo he visto en un ejemplo en un tutorial.
Te invito que te pases por el tema que puse en este foro. Ahí está todo explicado, uso on:
[URL="http://www.forosdelweb.com/f127/cambiar-contenido-dinamicamente-con-jquery-1012646/"]http://www.forosdelweb.com/f127/cambiar-contenido-dinamicamente-con-jquery-1012646/[/URL]
A ver si lo solucionamos. Espero respuesta.

Un saludo.