Foros del Web » Programando para Internet » Jquery »

Como refrescar un div con jquery sin perder la forma

Estas en el tema de Como refrescar un div con jquery sin perder la forma en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/09/2012, 16:01
 
Fecha de Ingreso: febrero-2012
Mensajes: 6
Antigüedad: 12 años, 9 meses
Puntos: 0
Como refrescar un div con jquery sin perder la forma

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.
  #2 (permalink)  
Antiguo 12/09/2012, 16:37
Avatar de Lynxcraft  
Fecha de Ingreso: noviembre-2007
Ubicación: yecla murcia
Mensajes: 1.346
Antigüedad: 17 años
Puntos: 51
Respuesta: Como refrescar un div con jquery sin perder la forma

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> 
__________________
Sobran las ideas cuando faltan ganas de trabajar en ellas
Lynxcraft
  #3 (permalink)  
Antiguo 12/09/2012, 16:52
 
Fecha de Ingreso: febrero-2012
Mensajes: 6
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Como refrescar un div con jquery sin perder la forma

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 .... ????
  #4 (permalink)  
Antiguo 12/09/2012, 17:24
 
Fecha de Ingreso: febrero-2012
Mensajes: 6
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Como refrescar un div con jquery sin perder la forma

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 ???
  #5 (permalink)  
Antiguo 12/09/2012, 17:39
Avatar de Lynxcraft  
Fecha de Ingreso: noviembre-2007
Ubicación: yecla murcia
Mensajes: 1.346
Antigüedad: 17 años
Puntos: 51
Respuesta: Como refrescar un div con jquery sin perder la forma

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);
__________________
Sobran las ideas cuando faltan ganas de trabajar en ellas
Lynxcraft
  #6 (permalink)  
Antiguo 16/09/2012, 15:46
 
Fecha de Ingreso: septiembre-2012
Mensajes: 60
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Como refrescar un div con jquery sin perder la forma

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.

Etiquetas: ajax, funcion, html, input, js, perder, php, refrescar, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:15.