Ajax problemas con HTML

[marcelamorales]

Tengo un inconveniente... estoy usando ajax para recargar una serie de gráficas elaboradas con flash chart, lo que me funciona a la perfección, sin embargo, me cambia las dimensiones de el primer div que aparece en pantalla cuando se recargan los demás, lo que hace que mi página se vea bastante desordenada.
Quizás alguien sepa de alguna propiedad que pueda usar para que las dimensiones de mi div inicial no cambien, les agradezco su ayuda!!!

[linuxzero]

Eso el ajax no tiene nada que ver... habria que ver el css que le estas aplicando a las div, o en su defecto el style que les estes aplicando en el php, no se como lo tendras.

[marcelamorales]

Ps yo digo que es el ajax debido a que apenas se recarga el tercer div me modifica todo o bueno, no conozco mucho de html y css. El código de creación de la primera gráfica es:

Código HTML:

<table class="conborde" width="100%" cellpadding="0" cellspacing="0" border="1">
                <tr>
                    <td width="50%" align="center" valign='top' style=" border-right: 2px ridge ">
                        <div id="DIV_grafica1" width="50%">
                            <form enctype='multipart/form-data' method='POST' action='index.php' name='formulario2' accept-charset="UTF-8">
                                <div id="bloqueGrafica2" >
                                    <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" >
                                        <tr >
                                            <td>
                                                <?
                                                echo "<div id='descripcion_corta_g2' align='justify' style='display: none;'>";
                                                echo "<a href='#' onclick=\"muestra_capa('descripcion_completa_g2',0); muestra_capa('descripcion_corta_g2',1);return false;\"> Mostrar par&aacute;metros >> </a>";
                                                echo "</div>";
                                                echo "<div id='descripcion_completa_g2'  style='background-color: #e2e4e7;'  align='justify'>";
                                                echo "<table >";
                                                //if ($aspecto_grafica_2_xdefecto && $aspectos_grafica_2) {//validar si existen parámetros para graficar
                                                if ($aspecto_grafica_2_xdefecto) {//validar si existen parámetros para graficar
                                                    //imprimir formulario con campos correspondientes a los parametros necesarios para generar la gráfica 2
                                                    if ($parametros_grafica_2) {
                                                        $this->imprimirParametros($parametros_grafica_2, $aspecto_grafica_2_xdefecto, $configuracion, '_GRAFICA_2', $aspectos_grafica_2);
                                                    }//fin if ($parametros_grafica_2)
                                                }//fin if ($aspecto_grafica_2_xdefecto && $aspectos_grafica_2)
                                                //echo "<a href='#' onclick=\"muestra_capa('descripcion_completa_g2',1); muestra_capa('descripcion_corta_g2',0);return false;\"> << Contraer par&aacute;metros </a>";
                                                echo "</table>";
                                                echo "</div>";
                                                echo "<br><br>";
                                                ?>                                                
                                            </td>
                                        </tr>
                                    </table>
 
                                </div>
                                <?
                                if ($nombre_archivo_porcentaje !== null && $nombre_archivo_porcentaje !== '') {
                                    
                                    ?>
 
                                    <div  style="float: left;">
                                        <script type="text/javascript">                                            
                                            swfobject.embedSWF("<? echo $configuracion['host'] . $configuracion['site'] . $configuracion['bloques']; ?>/tablero_comando_nuevo/open-flash-chart.swf", "my_chart2", "400", "210", "9.0.0", "expressInstall.swf", {"data-file":"<? echo $configuracion['host'] . $configuracion['site'] . $configuracion['bloques']; ?>/tablero_comando_nuevo/graficas/<? echo $nombre_archivo_porcentaje; ?>", "get-data":"get_data_1","loading":"Cargando datos..."});                                                                                                                                                                                                                                                                                                                                                                                                                         
                                                                                
                                        </script>                                            
                                    </div>                                    
                                <? } ?>     
                                <table class="conborde" width="30%" cellpadding="0" cellspacing="0" border="1" align="right">
                                    <div id="ventana2" >
                                        <br>
                                        <div id="my_chart2"> <font face="Verdana" size="3" color="#CC0000"><? echo $mensajeErrorProporcion; ?></font> </div>
                                    </div>                            
                                    <div align ="left">                                
                                        <a href="#" onclick="javascript:Abrir_ventana('<? echo $configuracion['host'] . $configuracion['site'] ?>/bloque/tablero_comando_nuevo/popupGrafica.php?nombre=<? echo $nombre_archivo_porcentaje; ?>&parametros=<? echo $nombre_archivo_porcentaje_txt ?>&host=<? echo $configuracion['host'] ?>&raiz=<? echo $configuracion["raiz_documento"] ?>&principal=<? echo $configuracion["sitePrincipal"]; ?>')">
                                            <img src='<? echo $configuracion['host'] . $configuracion['site'] . $configuracion['grafico']; ?>/viewdoc.png' border='0' align ="left" title="Ampliar">
                                            Ampliar
                                        </a>
                                    </div>  
                                </table>
                            </form>
                        </div>
                    </td>
                    <td width="50%" align="center"  style=" border-right: 2px ridge ;">
                        <div id="DIV_grafica2" width="50%">                            
                        </div>
                    </td> 
                </tr> 
                <tr>
                    <td width="50%" align="center"  style=" border-right: 2px ridge ;">
                        <div id="DIV_grafica3" width="50%">                              
                        </div>
                    </td>
                    <td width="50%" align="center"  style=" border-right: 2px ridge ;">
                        <div id="DIV_grafica4" width="50%">                            
                        </div></td>
                </tr>
            </table>
 

Y el de la grafica que genera el inconveniente al cargarse es:

Código HTML:

<table class="conborde" width="10%" cellpadding="0" cellspacing="0" border="1">
                <tr>
                    <td width="50%" align="center" valign='top'>
                        <div id="DIV_grafica1">
                            <form enctype='multipart/form-data' method='POST' action='index.php' name='formulario2' accept-charset="UTF-8">
 
                                <?
                                if ($nombre_archivo_tendencia2 !== null && $nombre_archivo_tendencia2 !== '') {
                                    $this->generarGrafica->crearTexto($configuracion, $nombre_archivo_tendencia_txt2, $nombre_archivo_tendencia2);
                                    ?>                                                           
                                    <div align ="left">                                
                                        <a href="#" onclick="javascript:Abrir_ventana('<? echo $configuracion['host'] . $configuracion['site'] ?>/bloque/tablero_comando_nuevo/popupGrafica.php?nombre=<? echo $nombre_archivo_tendencia2; ?>&parametros=<? echo $nombre_archivo_tendencia_txt2 ?>&host=<? echo $configuracion['host'] ?>&raiz=<? echo $configuracion["raiz_documento"] ?>&principal=<? echo $configuracion["sitePrincipal"]; ?>')">
                                            <img src='<? echo $configuracion['host'] . $configuracion['site'] . $configuracion['grafico']; ?>/viewdoc.png' border='0' align ="left" title="Ampliar">
                                            Ampliar
                                        </a>
                                    </div>  
                                <? } ?>
                            </form>
                        </div>
                    </td>
                </tr>                
            </table>
 

[linuxzero]

Y.. estas trabjando con tablas y porcentajes... todo puede pasar con ese tipo de practicas... yo te recomiendo que lo diseñes todo con divs con positions, pero te reitero, el ajax lo unico que hace es devolver lo que imprimas del lado del servidor, nada mas, el cliente es el que interpreta el html.

[marcelamorales]

Si, yo sé que este tipo de gráficas presentan problemas pero y alo había hecho sin Ajax y cuadraba perfecto, aunque lo que dices tiene razón....
Voy a intentar con los DIVs muchas gracias.
Sin embargo si alguien tiene otra opción lo agradecería.

[maue75]

Me pasa igual.
También tengo tablas dentro de la div a recargar con Ajax.
Vere que pasa si elimino el uso de tablas.

...loading.....

[maue75]

Bien, logre aparentemente algo que funciona.

Ajax, por alguna razón que desconocemos, vuelca el código que viene desde el servidor, en la div que le indiquemos. Pero... como hemos visto, modifica la css de la div en cuestión, provocando ciertos errores gráficos.

Lo que he hecho es, como última instrucción del código html generado en el servidor, es unas líneas jQuery que modifiquen las css de dicha div. Entonces tendría algo asi:
mi html:

<div id='dinamica'>
</div>

el php devuelve algo asi:
<table id='pirulo'>
.......
</table>
<script>$("#dinamica").css({ "margin-left": "0px", "margin-top": "0px" });</script>

...y pues.. con eso ha funcionado por ahora.

:)

[marcelamorales]

Hola... que pena no responder antes, había estado ocupada.
Ps a mi me funcionó utilizando el siguiente código

Código HTML:

<div id="DIV_grafica2" width="50%" style="position: absolute; left:505; top: 230;">                            
</div>
 

Ya se mantiene la tabla que específique desde el principio así recargue el valor con Ajax.
Ahí te dejo otra solución.