Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Andre Mesquita

[Resolvido] Conteúdo retornado para o DIV não respeita o CSS da p

Por , em Javascript

Recommended Posts

Andre Mesquita    0

Andre Mesquita
Postado

Tenho uma página de pesquisa onde existe uma caixa de texto e um botão entitulado Pesquisar. Ao ser acionado, este faz uma requisição ajax que chama o processamento do banco de dados e retorna os dados, no caso, um <TABLE> como se fosse um grid. Esse resultado é inputado em um DIV através do "innerHTML". O funcionamento está quase perfeito. O problema é que este <TABLE>, após se inputado no DIV não respeita a folha de estilo carregada no documento de pesquisa, exibindo uma tabela sem formatação.

 

Assim como no caso anterior apresentado aqui, o conteúdo é exibido, mas se clicarmos no IE em "Exibir código da página", o resultado não é exibido. Isso significa que a carga pelo innerHTML é virtual?

 

Por favor, alguém já passou por isso?

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Sim. Oque é carregado por Javascript é 'virtual', não vai aparecer no código fonte.

 

O que você descreveu, não é 'verdade'. Mostre como fez.

Se a tabela tiver um ID, ou for estilizada por um CSS já carregado, vai funcionar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andre Mesquita    0

Andre Mesquita
Postado

Sim. Oque é carregado por Javascript é 'virtual', não vai aparecer no código fonte.

 

O que você descreveu, não é 'verdade'. Mostre como fez.

Se a tabela tiver um ID, ou for estilizada por um CSS já carregado, vai funcionar.

 

consultarSistema.html

<HTML>
  <HEAD>        
    <TITLE>..:: Consultar Sistema ::..</TITLE>
    <META NAME="AUTHOR" CONTENT="Andre Veloso de Mesquita">	
    <META NAME="COPYRIGHT" CONTENT="© 2010 - Message Informática">	
    <META http-equiv="content-Type" content="text/html; charset=iso-8859-1" />		
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">	
    <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">	
    <META NAME="ROBOTS" CONTENT="NONE">
    <META NAME="GOOGLEBOT" CONTENT="NOARCHIVE"> 	
    <script language="javascript" type="text/javascript" src="ajaxConsultarSistema.js"></script>	
    <link rel="stylesheet" type="text/css" href="css/table.css" media="Screen"/>   
  </HEAD>
  <BODY>
    <P align="center"><FONT face="Comic Sans MS" size="5">Pesquisar Sistema</FONT></P>
	<P align="center">
	  <FORM title="consultarSistema" name="frmConsultarSistema" action="javascript:Atualiza(frmConsultarSistema.edtDescricao.value);" method="post">
	    <P align="center">
		  <FONT size = 4>Informe o que deseja procurar:
		    <INPUT maxLength="100" size="30" name="edtDescricao"> 
		  </FONT>
		  <INPUT type="submit" value="Pesquisar" name="btnPesquisar">
		</P>
	  </FORM>
	  <P></P>
	  <P align="center"><FONT size="5"> </FONT></P>
	  <div id="atualiza"></div>
	</P>	
  </BODY>
</HTML>

ajaxConsultarSistema.js

var comunicacao;

function buscarDados(url,descricao)
{
  comunicacao = null;
  // Procura por um objeto nativo (Mozilla/Safari)
  if ( window. XMLHttpRequest )
  {
    comunicacao = new XMLHttpRequest();
	comunicacao.onreadystatechange = tratarRetorno;
	comunicacao.open("GET", url+'?descricao='+descricao, true);
	comunicacao.send(null);
  }
  else
  if ( window.ActiveXObject ) // Procure por uma versao ActiveX (IE)
  {
    comunicacao = new ActiveXObject("Microsoft.xmlRequest"); // Microsoft.XMLHTTP    
	if ( comunicacao )
	{
	  comunicacao.onreadystatechange = tratarRetorno;
	  comunicacao.open("GET", url+'?descricao='+descricao, true);
	  comunicacao.send(null);
	}
  }
}

function tratarRetorno()
{
  // apenas quando o estado for "completado"
  if ( comunicacao.readyState == 4 )
  {
    // apenas se o servidor retornar "OK"
	if ( comunicacao.status == 200 )
	{
	  // procura pela div id="atualiza" e insere o conteudo recebido
	  document.getElementById('atualiza').innerHTML = comunicacao.responseText;
	}
    else
	{
	  alert("Houve um problema ao obter os dados:\n" + comunicacao.statusText);
	}
  }
}

function Atualiza(descricao)
{
  buscarDados("consultarSistema.php", descricao);  
}

table.css

tabela_consulta
{
  text-align: left; 
  width: 80%;
}

td.cabecalho_col_codigo
{
  background-color: rgb(102, 0, 204); 
  color: rgb(255, 255, 255); 
  font-weight: bold; 
  font-family: Verdana; 
  width: 80px;
}

td.cabecalho_col_descricao
{
  background-color: rgb(102, 0, 204); 
  color: rgb(255, 255, 255); 
  font-weight: bold; 
  font-family: Verdana; 
  width: 297px;
}								

th.cabecalho_col_codigo
{
  background-color: rgb(102, 0, 204); 
  color: rgb(255, 255, 255); 
  font-weight: bold; 
  font-family: Verdana; 
  width: 80px;
}

th.cabecalho_col_descricao
{
  background-color: rgb(102, 0, 204); 
  color: rgb(255, 255, 255); 
  font-weight: bold; 
  font-family: Verdana; 
  width: 297px;
}								


td.corpo_col_codigo
{
  font-family: Verdana; 
  width: 80px;
  text-align:center;  
}

td.corpo_col_descricao
{
  font-family: Verdana; 
  width: 297px;
  text-align:left;  
}

consultarSistema.php

<?php

  // conexao com o banco de dados
  require "php/conexao.php";  
  
  // pega o parametro enviado pelo formulario HTML
  import_request_variables("gP");
  
  // prepara e executa a sentenca SQL
  $sql = " SELECT " .
         "   s.COD_SISTEMA, s.NOM_SISTEMA " .
		 " FROM " .
		 "   TB_SISTEMA s " .
		 " WHERE " .
		 "   (s.NOM_SISTEMA like '%$descricao%') ";
  
  $resultado = mysql_query($sql) or die("A busca por sistema falhou: " . mysql_error() );
  
  $existe = mysql_num_rows($resultado);

  header("Content-Type: text/html; charset=ISO-8859-1", true);  
  
  // verifica se existe e inicia a montagem da tabela de resultados
  if ($existe)
  {    	
    echo "<TABLE class=\"tabela_consulta\">";	
	echo "  <TBODY>";
	echo "    <TR>";
	echo "      <TD class=\"td.cabecalho_col_codigo\">Código</TD>";
	echo "      <TD class=\"td.cabecalho_col_descricao\">Nome do Sistema</TD>";
	echo "    </TR>";
  } else echo "<P align=\"center\"><b>Sistema não encontrado!</b></p>";

  while ($linha = mysql_fetch_array($resultado))
  {
    // prepara o retorno dos dados para o browser
	$cod_sistema   = $linha["COD_SISTEMA"];
	$nom_sistema   = $linha["NOM_SISTEMA"]; 	
	echo "    <TR>";
	echo "      <TD class=\"td.corpo_col_codigo\">$cod_sistema</TD>";
	echo "      <TD class=\"td.corpo_col_descricao\">$nom_sistema</TD>";
	echo "    </TR>";
  }
  echo "  </TBODY>";
  echo "</TABLE>";
    
?>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andre Mesquita    0

Andre Mesquita
Postado

Resolvido!

 

A solução estava somente no arquivo "consultarSistema.php".

 

Onde estava:

 

  echo "<TABLE class=\"tabela_consulta\">";

passei para:

 

  echo "<TABLE id=\"tblSistema\" class=\"tabela_consulta\">";

 

Onde estava:

 

  echo "      <TD class=\"td.cabecalho_col_codigo\">Código</TD>";

passei para:

 

  echo "      <TD class=\"cabecalho_col_codigo\">Código</TD>";

Ou seja, criei uma IDentificação para a tabela e retirei a identificação da folha de estilo da chamada à classe.

 

 

Estou postando a resposta porque é comum encontrarmos por dúvidas em foruns sem respostas, o que ajuda em futuros problemas para outras pessoas. A pessoa que enviou a pergunta que eu citei não teve a mesma solidariedade em compartilhar ou parou de desenvolver logo após o problema, em 2008.

 

Obrigado ao MODERADOR pelo tempo gasto e pela velocidade com que respondeu.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito