Ir para conteúdo

POWERED BY:

Arquivado

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

maiconcrespo

Chamar div de outra página

Por , em Javascript

Recommended Posts

maiconcrespo    0

maiconcrespo
Postado

Bom dia , já faz dias que ando tentando chamar uma div de outra página, já tentei de todas as maneiras e nao consigo nao sei o pq.

 

pode ser alguma configuração ou sei lá.

 

Vamos lá

 

a parte do codigo está assim

 

Pagina com os dados que quero chamar.(estou usando um script pbox)

1 pagina

 

teste.html (a parte do codigo é essa)

<div id="dados">
     
    Dados de produtos e foto

</div>
Pagina pra qual quero passar os dados ao clicar em um link.(obs os dados se coloco na mesma pagina funciona perfeito.)
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>


//links

<li ><a href='#'data-id="dados1"><span>Produto</span></a></li>
<li ><a href='#'data-id="dados2"><span>Produto2/span></a></li>

//chamada pra visualização

<div class="pbox" id="dados1">dados dos produtos</div> // essa funciona perfeito aparece tudo

<div class="pbox" id="dados2"> //essa nao funciona o que estou errando?

    <script> $('#dados2').load('teste.html #dados');</script></div>

</div>

ja tentei tambem assim:

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

<script>

$(document).ready(function () {
 $('#dados2').load('teste.html #dados');
});

</script>

//links

<li ><a href='#'data-id="dados1"><span>Produto</span></a></li>
<li ><a href='#'data-id="dados2"><span>Produto2/span></a></li>

//chamada pra visualização

<div class="pbox" id="dados1">dados dos produtos</div> // essa funciona perfeito aparece tudo

<div class="pbox" id="dados2"> teste</div>//essa nao funciona o que estou errando? s´aparece a palavra teste mas nao busca a div da outra página.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Snowden    94

Snowden
Postado

acho que é por causa do ID. você ta chamando o mesmo id #dados 2 vezes.

.load('teste.html #dados');

se não quer criar outro conteúdo ( tipo #dados2 ) então use CLASS.

.load('teste.html .dados');

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

Cara talvez seu problema seja o load do jquery, quando você chama a página junto de um #id o script é desabilitado, eu não sei explicar muito bem mas você pode ver na documentação do jquery http://api.jquery.com/load/

 

tem esse trecho:

Script Execution

da uma olhada la.

Para resolver esse problema você pode tentar utilizar um callback na sua chamada de página teste.html, e colocar o código que você quer que seja executado sempre após o carregamento da mesma.

 

Acredito que ficaria mais ou menos assim: 

$('#dados1').load('teste.html #dados',function(){ "script aqui" });

Espero ter ajudado :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

maiconcrespo    0

maiconcrespo
Postado

Boa Tarde Douglas , bom ainda nao consegui entender. sou novato com os códigos, consigo copiar modificar alterar somente olhando e entendendo, tenho dificuldades em criar(sou um bom copiador) .

 

aqui está meu código da pagina teste.html. funcionando os link para os conteudo na mesma página.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="js/jquery-1.7.min.js"></script>
  
  <script>

$(document).ready(function () {
    $('.pbox').hide();

    var $mnu = $('#menu').on('click', 'a', function () {
        var $this = $(this), $li = $(this).closest('li');
        if($li.is('.current')){
            return;
        }
        $li.addClass('current');

        $mnu.find('.current').not($li).removeClass('current');
        // fade out all open subcontents
        $('.pbox:visible').hide(600);
        // fade in new selected subcontent
        $('#' + $this.data('id')).show(600);
	
    });

    $mnu.find('a:first').click();
});

</script>
</head>




<body>
<ul id="menu">
    <li><a href="#" data-id="dadosproduto1">Produto 1</a></li>
    <li><a href="#" data-id="dadosproduto2">Produto 2</a></li>
    
</ul><br><br>

 
 
<b>Projects:</b>

// a partir daqui eu queria chamar desde outra página 

  <div class="pbox" id="dadosproduto1">
   <p>
                  Alto Falante 6" coaxial 
                  Potência 50Wrms 
                  Peso: 1,40 Kg 
   </p>
   <p>Medidas: (L x A x P) 235 x 35 x 88mm </p>
  </div>


  <div class="pbox" id="dadosproduto2">
   <p>
                  Alto Falante 10" coaxial 
                  Potência 100Wrms 
                  Peso: 2,40 Kg 
   </p>
   <p>Medidas: (L x A x P) 235 x 35 x 88mm </p>
  </div>
 
</body>
</html>

Agora o que eu queria fazer. Quero colocar os dados dos produtos em outro html. pra facilitar e organizar meus códigos. como deveria montar a outra página para que esses dados ficassem nela.

e eu pudesse chamar desde teste.html. Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

Ola Maicon tudo bem?

cara eu tentei criar um exemplo simples, eu não tenho certeza se é isso que você quer mais da uma olhada

Essa é a index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  
  <script>
/*
$(document).ready(function () {
    $('.pbox').hide();

    var $mnu = $('#menu').on('click', 'a', function () {
        var $this = $(this), $li = $(this).closest('li');
        if($li.is('.current')){
            return;
        }
        $li.addClass('current');

        $mnu.find('.current').not($li).removeClass('current');
        // fade out all open subcontents
        $('.pbox:visible').hide(600);
        // fade in new selected subcontent
        $('#' + $this.data('id')).show(600);
  
    });

    $mnu.find('a:first').click();
});*/
$(document).ready(function(){

    $("#menu li").click(function(){
         var page = $(this).attr("id");
         $(".mostrar-conteudo").load("produtos.html "+"#"+page); 
         /* se você fizer desse jeito o script que estiver na página que você está chamando não vem junto.
            Ai você pode tentar chamar apenas o html sem direcionar para uma class ou id, no caso as páginas produtos1 e 2 seriam apenas
            as divs.
        */
    });
       
});

</script>
</head>




<body>
<ul id="menu">
    <li id="dadosproduto1"><a href="#" >Produto 1</a></li>
    <li id="dadosproduto2"><a href="#" >Produto 2</a></li>
    
</ul><br><br>

 
 
<b>Projects:</b>

<!-- a partir daqui eu queria chamar desde outra página -->
<!-- Aqui vai ser mostrado o conteúdo quando cricar nos links acima -->
<div class="mostrar-conteudo"> 
</div>
 
</body>
</html>

E essa é a página produtos.html ao qual irei pegar as divs e carregar na index

<!DOCTYPE html>
<html>
<head>
  <title>produtos</title>
</head>
<body>
    <div class="pbox" id="dadosproduto1">
       <p>
                      Alto Falante 6" coaxial 
                      Potência 50Wrms 
                      Peso: 1,40 Kg 
       </p>
        <p>Medidas: (L x A x P) 235 x 35 x 88mm </p>
  </div>


  <div class="pbox" id="dadosproduto2">
    <p>
                  Alto Falante 10" coaxial 
                  Potência 100Wrms 
                  Peso: 2,40 Kg 
    </p>
  <p>Medidas: (L x A x P) 235 x 35 x 88mm </p>
  </div>
</body>
</html>

Eu acho que está simples de entender, espero ter ajudado...

Lembrando esse é um exemplo bem simples e eu nem arrumei muito o código, tenta enteder o que eu fiz ai.

Boa sorte :)

 

Só mais uma coisa, você precisar usar um servidor para funcionar o load (localhost :coolio:​ )

Compartilhar este post

Link para o post
Compartilhar em outros sites

maiconcrespo    0

maiconcrespo
Postado

Boa tarde Douglas, bom funcionou , mas ainda não é o que procuro, vou tentar de outras maneira assim que funcionar te aviso, e sim tava testando no chrome e nao funciona bem , no IE da pra testar melhor sem estar conectado.

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

maiconcrespo    0

maiconcrespo
Postado

Olá bom , tentei tentei e nao consegui, mas quase...rsrsr o código que eu queria monta é mais ou menos assim me ajude se possivel a corrigir os erros pq nao funciona quando adiciono otra var

var page = $(this).attr("id");

e altero o 

$("#content").load( href +" #content");
//para
$("#content").load( href +" #"+page);

fotos.html

<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
</head>
<body>
	<ul id="menu">
		<li><a href="home.html">Home</a></li>
		<li><a href="fotos.html">Fotos</a></li>
		
	</ul>
	<div id="content1">
		<h1>Fotos1</h1>
 
 
		<a href="index.html">Voltar</a>
	</div><!-- /content -->
    
    <div id="content2">
		<h1>Fotos2</h1>
 
 
		<a href="index.html">Voltar</a>
	</div><!-- /content -->
    
</body>
</html>

: home.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    
<script type="text/javascript">
    $(document).ready(function(){
       $("#menu a").click(function( e ){
       e.preventDefault();
          var href = $( this ).attr('href');
          var page = $(this).attr("id"); //essa linha esta certa? Posso colocar aqui?
       $("#content").load( href +" #"+page); //ficaria assim?
});
});

</script>
    <script>


</script>
</head>
<body>

<ul id="menu">
        <li><a href="index.html">Home</a></li>
        <li id="content1"><a href="fotos.html">Fotos</a></li>
        <li id="content2"><a href="fotos.html">Fotos2</a></li>
</ul><!-- /menu -->
  
<div id="content">
Aqui vai as fotos
</div><!-- /content -->

   
</body>
</html>

 

Bom resolvi o problema , que me deixou semanas quebrando a cabeça.

assim fica o código basico.

index.html


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

        <script type="text/javascript">
    $(document).ready(function(){
        $("#menu a").click(function( e ){
            e.preventDefault();
            var page = $( this ).attr('id');
            var href = $( this ).attr('href');
             //essa linha esta certa? Posso colocar aqui?
            $("#content").load( href +" #"+page);
        });
    });
    
    </script>
<script>


</script>
</head>
<body>
    <ul id="menu">
        <li><a href="index.html">Home</a></li>
<li><a href="fotos.html" id="content1">Fotos</a></li>
        <li><a href="fotos.html" id="content2">Fotos2</a></li>
    </ul><!-- /menu -->

    <div id="content">
        Aqui vai as fotos
    </div>

</body>
</html>

fotos.html

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>
<body>
    <ul id="menu">
        <li><a href="home.html">Home</a></li>
        <li><a href="fotos.html">Fotos</a></li>
        <li><a href="dados.html">Contato</a></li>
    </ul>
    <div id="content1">
        <h1>Fotos1</h1>


        <a href="index.html">Voltar</a>
    </div><!-- /content -->

<div id="content2">
        <h1>Fotos2</h1>


        <a href="index.html">Voltar</a>
    </div><!-- /content -->

</body>

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