Meu AJAX e IE 7 não se entendem (ajuda)

Maicon_S · Dezembro 15, 2010

Olá pessoal, preciso de uma ajudinha...

Que o Internet Explorer é uma M... já sei mas não consigo entender o que acontece com o meu sistema...

Vejam só: Estou desenvolvendo um sistema Web PHP com Banco de Dados MySQL e tecnologia AJAX para interação entre ambos, acontece que na página de cadastro de dados, na medida em que os dados são cadastrados, no mesmo momento, eles são inseridos em uma tabela na mesma página do cadastro, uso AJAX para enviar o formulário e cadastrar os dados no BD e uso o JavaScript para inserir uma linha na tabela com os dados cadastrados.

Até aí tudo bem, testo o sistema no Firefox, Netscape, Safari, Google Chrome, IE 7, IE 6, IE 5.5 e IE 5.

O meu site tem o seguinte Layout:

A seguinte estrutura:

<HTML>
   <BODY>

      <div id="tudo">
         <div id="pagina">
        
        <div id="topo">
             <!-- conteudo da div "topo" -->    
        </div>
            
        <div id="menu_v">
            <!-- conteudo da div "menu_v" -->
        </div>
            
        <div id="conteudo">
            <!-- Aqui entra o contedo do site -->
        </div>
            
        <div id="direito">
            <!-- conteudo da div "direito" -->    
        </div>
            
        <div class="clear">            
        </div>

    </div> <!-- FIM da div "pagina"
        
    <div id="rodape">
        <!-- conteudo da div "rodape" -->    
    </div> 
        
      </div>

   </BODY>
</HTML>

O seguinte CSS:

html, body
{
    height:100%;
}

body
{
    margin:0;
    padding:0;
    text-align:center;/* para centralizar as divs nos navegadores IE 6 e anteriores */
}

#tudo
{
    /*background:#FFFFFF;*/
    background:url(../img/fundo.gif) repeat-y 0 0;
    width:1000px;
    margin:0 auto;
    min-height:100%;
    position:relative; /* Necessário para que a div "rodape" abaixo permaneça no interior da div "tudo" */
}

* html #tudo {height: 100%;} /* HACK para IE 6 e anteriores interpretarem a div "tudo" com altura de 100% */

#pagina
{
    /*background:#FFFFFF;*/
    padding-bottom:50px;
}

#topo
{
    background:#FFFFFF;
    height:200px;
}

#menu_v
{
    /*background:#FFFFFF;*/
    width:200px;
    float:left;
    position:relative; /* Necessário para que as 3 divs "menu_v", "conteudo" e "direito" fiquem lado a lado */
    font-size:93%;
    line-height:normal;
}

#conteudo
{
    /*background:#0099CC;*/
    width:600px;
    margin:0 auto;
    position:relative; /* Necessário para que as 3 divs "menu_v", "conteudo" e "direito" fiquem lado a lado */
    float:left; /* Necessário para que as 3 divs "menu_v", "conteudo" e "direito" fiquem lado a lado */
}

* + html #conteudo{ margin-bottom:50px;} /* HACK para que o "conteudo" não fique por tráz do "rodape", principalmente no IE5 */
*:first-child+html #conteudo{ margin-bottom:0;} /* HACK para que o "conteudo" não fique por tráz do "rodape", corrigido novamente para o IE7 */

#texto
{
    padding-top:55px; /* para que o conteúdo da div "texto" fique abaixo do "menu_h" */
}

#direito
{
    /*background:#FFFFFF;*/
    width:194px;
    float:right;
    position:relative; /* Necessário para que as 3 divs "menu_v", "conteudo" e "direito" fiquem lado a lado */
}

.clear
{
    clear:both;
}

#rodape
{
    background:#FFFFFF;
    position:absolute;
    bottom:0;
    width:1000px;
    left:0;
    height:40px;
}

As páginas que são carregadas dentro da DIV "conteudo" atravéz do AJAX possuem 2 DIVs uma "menu_h" que é o menu horizontal e outra DIV chamada "texto" que contém o conteúdo propriamente dito. Uma destas páginas possui uma tabela com dados cadastrados no BD e tem um formulário para cadastrar mais dados no BD. Funciona assim: O usuário cadastra os dados no BD e estes dados já sá carregados na tabela logo abaixo, isso faz com que a medida em que os dados são cadastrados o site vai espichando. Com a configuração do meu CSS o rodapé permanece sempre em baixo da tela, sempre no final, não importa a altura da página.

OS PROBLEMAS:

1 - Se os dados forem inseridos dinamicamente na tabela com o JavaScript / AJAX, no IE 7, e somente neste browser, o rodapé não desce e o conteúdo fica por baixo do rodapé (Firefox, Chrome, Netscape, Safari, IE 6, 5.5 e 5, funciona perfeitamente), porém se for atualizada a página o rodapé desce e não fica por cima do conteúdo.

2 - Após inserir os dados no BD e exibir os mesmos na tabela, ao ir para outra página, e voltar posteriormente para esta página, a tabela não está atualizada, está como se os dados não fossem inseridos no BD, é necessário limpar o histórico toda hora e atualizar a página para daí sim, visualizar os dados inseridos no BD recentemente. Isso ocorre em todos os IE.

Para o problema 1, não faço a mínima idéia do que está acontecendo, já para o problema 2, penso que o IE está exibindo os dados do histórico e preciso que ele faça nova leitura da página e mostre os dados atualizados, sem precisar ficar atualizando com F5 e escluíndo o histórico, entenderam.

Acho que é isso pessoal, agradeço muito se alguém puder me ajudar. Preciso muito resolver este problema urgentemente.

Obrigado.

kuroi · Dezembro 15, 2010

1 - Se os dados forem inseridos dinamicamente na tabela com o JavaScript / AJAX, no IE 7, e somente neste browser, o rodapé não desce e o conteúdo fica por baixo do rodapé (Firefox, Chrome, Netscape, Safari, IE 6, 5.5 e 5, funciona perfeitamente), porém se for atualizada a página o rodapé desce e não fica por cima do conteúdo.

tente adicionar clear: both; em #rodape.

se não funcionar, tente um float: left; tanto em #rodape quanto em #pagina.

2 - Após inserir os dados no BD e exibir os mesmos na tabela, ao ir para outra página, e voltar posteriormente para esta página, a tabela não está atualizada, está como se os dados não fossem inseridos no BD, é necessário limpar o histórico toda hora e atualizar a página para daí sim, visualizar os dados inseridos no BD recentemente. Isso ocorre em todos os IE.

aparentemente parece ser um problema semelhante com o q tive aqui: http://scriptbrasil.com.br/forum/index.php?showtopic=132783

é mesmo um gde misterio...

agora, na pior das hipoteses, você podia por um setInterval() no javascript q ficasse comparando os dados do banco com os q estao na pagina e, se fossem diferentes, atualizar. só q isso tem q ser muito bem estudado, pois pode dar problema se varias pessoas estiverem usando a mesma pagina.

Maicon_S · Dezembro 21, 2010

tente adicionar clear: both; em #rodape.

Não funcionou.

se não funcionar, tente um float: left; tanto em #rodape quanto em #pagina.

Esse sim, porém, apenas adicionando os floats estragou nos outros navegadores (Firefox e Cia). Então fiz usando um HACK assim:

*:first-child+html #pagina{ float:left;}

Mas apenas para a DIV #pagina, não precisou usar no #rodape. Só não entendi o porque do FLOAT para resolver isso ??? Inclusive não testei no IE 8 e mais recentes será que esse HACK prejudica em alguma coisa nos IE mais modernos?

QUOTE(Maicon_S @ 14/12/2010 - 22:03) * 2 - Após inserir os dados no BD e exibir os mesmos na tabela, ao ir para outra página, e voltar posteriormente para esta página, a tabela não está atualizada, está como se os dados não fossem inseridos no BD, é necessário limpar o histórico toda hora e atualizar a página para daí sim, visualizar os dados inseridos no BD recentemente. Isso ocorre em todos os IE. aparentemente parece ser um problema semelhante com o q tive aqui: http://scriptbrasil.com.br/forum/index.php?showtopic=132783 é mesmo um gde misterio...

Quanto a esse problema, na verdade penso ser algo no IE mesmo, veja bem, tenho o seguinte código nesta página:

<body>
<?        
    require("acesso.php");

    if($contagem == 1)
    {
        $funcao = $mysql->execQuery("select * from funcao");
        $resultFuncao = mysql_num_rows($funcao);
    
?>
    <table border="0" cellpadding="0" cellspacing="0" align="center" width="550">
        <tr>
            <td colspan="5"><h4>Configura&ccedil;&atilde;o de Fun&ccedil;&otilde;es</h4></td>
        </tr>
        <tr>
            <td colspan="5">
                <form id="cadFuncao" name="cadFuncao" method="post" action="#">
                    <table class="form" align="center" width="100%">
                        <tr>
                            <td colspan="3"><h4>Cadastrar Novo:</h4></td>
                        </tr>
                        <tr>
                            <td class="desc">Nome da Fun&ccedil;&atilde;o:</td>
                            <td><input id="campos" type="text" name="nomeFuncao" title="Nome da Fun&ccedil;&atilde;o" alt="not null" onkeypress="return autorizaCaracter(event,this);" /></td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td class="desc">Abrevia&ccedil;&atilde;o:</td>
                            <td><input id="campos" type="text" name="abrevFuncao" title="Abrevia&ccedil;&atilde;o" onkeypress="return autorizaCaracter(event,this);" /></td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <div align="center">
                                    <input class="botao" id="btnCadastrar" type="button" name="cadastrar" value="Cadastrar" onclick="cadDados('cadFuncao','cad_funcao.php','funcoes','Funcao');" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3"><h4>Fun&ccedil;&otilde;es Cadastradas:</h4></td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                [b]<table id="funcoes" class="tabela" align="center" width="500">[/b]
                                    <tr class="cTitulos">
                                        <td>Nome</td>
                                        <td width="150">Abrevia&ccedil;&atilde;o</td>
                                        <td width="40">Editar</td>
                                        <td width="40">Excluir</td>
                                    </tr>
                                    <?
                                        if($resultFuncao > 0)
                                        {
                                            while($dadosFuncao = mysql_fetch_array($funcao))
                                            {
                                                $relacao = $mysql->execQuery("select * from militar_funcao where militar_funcao_funcao_cod = ".$dadosFuncao["funcao_cod"]);
                                                $resultRel = mysql_num_rows($relacao);
                                                
                                                //$imgExcluir = "img/Excluir.bmp";
                                                $linkExcluir = "onclick=\"enviaDados('exclui_funcao.php','id=".$dadosFuncao["funcao_cod"]."','funcoes','Funcao');\"";
                                                
                                                if($resultRel > 0)
                                                {
                                                    $span = "Existem Militares com esta Fun&ccedil;&atilde;o. Ao exclu&iacute;-la os mesmos ficar&atilde;o sem fun&ccedil;&atilde;o definida.";
                                                }
                                                else
                                                {
                                                    $span = "Exclui a Fun&ccedil;&atilde;o da Base de Dados";
                                                }
                                    ?>
                                    <tr>
                                        <td><? echo $dadosFuncao["funcao_nome"]; ?></td>
                                        <td><? echo $dadosFuncao["funcao_abrev"]; ?></td>
                                        <td>
                                            <p class="imgLink">
                                                <img src="img/Editar.bmp" width="22" height="22" border="0" onclick="mostra('<? echo $dadosFuncao["funcao_cod"]; ?>','sel_funcao.php','Funcao');" title="Altera os Dados j&aacute; cadastrados" />
                                            </p>
                                        </td>
                                        <td>
                                            <p class="imgLink">
                                                <img src="img/Excluir.bmp" width="22" height="22" border="0" <? echo $linkExcluir; ?> title="<? echo $span; ?>" />
                                            </p>
                                        </td>
                                    </tr>
                                    <?
                                            }
                                        }
                                        else
                                        {
                                    ?>
                                    <tr>
                                        <td colspan="4"><div align="center">N&atilde;o h&agrave; Fun&ccedil;&otilde;es cadastradas.</div></td>
                                    </tr>
                                    <?
                                        }
                                    ?>
                                </table>
                            </td>
                        </tr>
                    </table>
                </form>
            </td>
        </tr>
    </table>
    
    <div id="oculto">
        <form id="formFuncao" name="formFuncao" method="post" action="#">
            <table class="form" align="center" width="500">
                <tr>
                    <td class="desc">Nome da Fun&ccedil;&atilde;o:<input name="id" size="1" type="hidden" value="<? echo $dadosFuncao["funcao_cod"]; ?>" /></td>
                    <td><? echo $dadosFuncao["funcao_nome"]; ?><input id="campos" type="text" name="nome" size="40" value="<? echo $dadosFuncao["funcao_nome"]; ?>" /></td>
                </tr>
                <tr>
                    <td class="desc">Abrevia&ccedil;&atilde;o:</td>
                    <td><input id="campos" type="text" name="abrev" size="40" value="<? echo $dadosFuncao["funcao_abrev"]; ?>" /></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div align="center">
                            <input class="botao" id="btnSalvar" type="button" name="btnSalvar" value="Salvar" onclick="cadDados('formFuncao','atualiza_funcao.php','funcoes','Funcao');"  /><!-- onclick="busca(ficha.nomeGuerra.value,'busca_militar.php','militar');" -->
                            <input class="botao" id="btnCancelar" type="button" name="btnCancelar" value="Cancelar" onclick="esconde('oculto');" />
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    
    <div id="msg">
    teste
    </div>
<?
    }
    else
    {
        //include("index.php");
        header("Location: index.php");
    }
?>
</body>

Uso COKIEs de sessão para dar permissão de acesso à página ao usuário. Na tabela com id="funcoes" lá no meio do código aí em cima ele carrega os dados do BD na forma de tabela. Abro a página e está tudo bem, então altero os dados no BD, ou inserindo dados, ou excluindo etc. usando o AJAX para não haver o re-load da página, tudo certo, os dados são exibidos dinamicamente perfeitos. Então clico no menu para ir a outra página do meu site, ok. Então clico no menu novamente para voltar a esta página da tabela aí em cima, nem uso o botão VOLTAR do browser, e os dados inseridos não estão lá. Penso que ao clicar no link do menu para este site deveria haver uma nova leitura do script, e se houvesse essa nova leitura do script ele deveria apresentar os dados atualizados, o que não está acontecendo.

Ahh, e o menu usa AJAX, não existem re-loads no site, clicou no menu, ele chama via AJAX a página e a carrega na div #conteudo do site entende? Mesmo assim, penso que deveria carregar a página atualizada, fazendo nova leitura do script correto? Parece que o IE guarda um cash das páginas e o AJAX vai buscar ali, porque isso é só no IE mesmo.

Já muito obrigado karoi pela ajuda, um dos problemas estão resolvidos, para a perfeição resta esta pendenga aí em cima. vlw mesmo.

Entrar

Meu AJAX e IE 7 não se entendem (ajuda)

Pergunta

Maicon_S

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

kuroi

Link para o comentário

Compartilhar em outros sites

Maicon_S

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades