Ir para conteúdo

POWERED BY:

Arquivado

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

Aender

Método load (Jquery/Ajax) carrega página mas formatação CSS é perdida

Por , em Javascript

Recommended Posts

Aender    3

Aender
Postado

Olá pessoal tudo bem ? Sou iniciante em Ajax e Jquery e estou com problemas.Bom é o seguinte estou usando o Método load para carregar uma página dentro de uma div que vai ser como uma " Div Mestra " onde as demais páginas vão abrir. Consigo carregar numa boa quando tem somente texto e imagem,mas quando as páginas tem CSS , Js etc , a página é carregada mas aparece somente texto puro, a formatação CSS e os elementos js não são carregados . O que pode estar ocorrendo ? O código segue abaixo :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax com jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("input[type=button]").click(function(event) {
       $("#conteudo").load('pagina.html',aviso());
   });
});
function aviso(){
   alert('O conteúdo será carregado agora!');
}
</script>
</head>
<body>
   <p><input type="button" value="Carregar conteúdo" /></p>
   <div id="conteudo"></div>
</body>
</html>

Exemplo de página que é aberta na Div conteúdo :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style>
#div1{ color: #F90; font-size:18px; border: 3px solid #CCC; padding:6px;}
</style>
</head>

<body>
<div id="div1">Consectetur adipisicing elit, sed do eiusmod tempor incididunt duis aute irure dolor. Sunt in culpa lorem ipsum dolor sit amet, ullamco laboris nisi. Ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Consectetur adipisicing elit,  </div>
</body>
</html>

O script carrega pagina.html dentro da Div conteudo , mas se no arquivo pagina.html tiver CSS , JS etc é ignorado pelo load, toda formatação é perdida.

Desde já obrigado pessoal.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aender    3

Aender
Postado

:thumbsup: Obrigado a todos que participaram no tópico, valeu mesmo !!!

Pôxa, realmente o código está correto mesmo, consegui carregar a página com CSS e JS sem problemas.O problema estava no bendito DreamWeaver que estava dando um pau que até agora não consegui identificar, aí eu não conseguia carregar o CSS e o JS , as vezes um IDE acaba atrapalhando em vez de ajudar.Esse problema de não carregar o CSS e o JS das páginas estava ocorrendo com outro Script que eu estava usando e dessa vez não era o DreamWeaver o culpado , mas já que consegui resolver isso usando o Script que postei aqui, nem vou tentar descobrir o problema do outro.

Abraço pessoal, valeu mesmo .

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