Ir para conteúdo

POWERED BY:

Arquivado

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

HugoMinari

Carregar HTML dentro da div

Por , em Javascript

Recommended Posts

HugoMinari    1

HugoMinari
Postado

Bom pessoal boa noite a todos.

 

Estou com o seguinte codigo:

echo'
<div class="cliente">
<p class="nome">Nome do cliente</p>
<div class="menu">
<a href="teste.html" title="Menu 1"></a>
<a href="teste1.html" title="Menu 2"></a>
<a href="teste2.html" title="Menu 3"></a>
<a href="teste3.html" title="Menu 4"></a>
</div>
<div id="conteudodiv"></div>
</div>

<div class="cliente">
<p class="nome">Nome do cliente</p>
<div class="menu">
<a href="teste.html" title="Menu 1"></a>
<a href="teste1.html" title="Menu 2"></a>
<a href="teste2.html" title="Menu 3"></a>
<a href="teste3.html" title="Menu 4"></a>
</div>
<div id="conteudodiv"></div>
</div>

<div class="cliente">
<p class="nome">Nome do cliente</p>
<div class="menu">
<a href="teste.html" title="Menu 1"></a>
<a href="teste1.html" title="Menu 2"></a>
<a href="teste2.html" title="Menu 3"></a>
<a href="teste3.html" title="Menu 4"></a>
</div>
<div id="conteudodiv"></div>
</div>';

 

e o JS

 

   $(".menu a").each(function() {
          var href = $(this).attr('href');
          $(this).attr('href','javascript:void(0)');
          $(this).click(function(){
               $('#conteudodiv').html("");
      	    	$("#carregando").show('slow');
                $.get( href , function(data){
                       $('#conteudodiv').html(data);
                       $("#carregando").hide('slow');
                });
               return null;
       });
    });

 

Problema: todas as pagina são inseridas na div conteudo do primeiro cliente, o resto fica vazio.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luis Vasconcellos    0

Luis Vasconcellos
Postado

Você está usando 3 div's com o mesmo id. A marcação HTML não aceita que elementos diferentes possuam o mesmo id. Troque id por class e você deverá encontrar o resultado esperado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

HugoMinari    1

HugoMinari
Postado

Você está usando 3 div's com o mesmo id. A marcação HTML não aceita que elementos diferentes possuam o mesmo id. Troque id por class e você deverá encontrar o resultado esperado.

 

não tinha reparado isso... fiz as modificações no js e no html mas agora ele carrega a mesma página nos 3... eu queria um independente do outro... teria que modificar algo no JS para eu passar uma "id" de cada conteudo pra ele algo assim. testei alguma coisas mas não tive sucesso. peguei alguns codigo tipo de aba, mas acontece a mesma coisa ainda.. carrega nos 3 divs a mesma coisa..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luis Vasconcellos    0

Luis Vasconcellos
Postado

Você está usando 3 div's com o mesmo id. A marcação HTML não aceita que elementos diferentes possuam o mesmo id. Troque id por class e você deverá encontrar o resultado esperado.

 

não tinha reparado isso... fiz as modificações no js e no html mas agora ele carrega a mesma página nos 3... eu queria um independente do outro... teria que modificar algo no JS para eu passar uma "id" de cada conteudo pra ele algo assim. testei alguma coisas mas não tive sucesso. peguei alguns codigo tipo de aba, mas acontece a mesma coisa ainda.. carrega nos 3 divs a mesma coisa..

 

O que ele carrega está vindo do servidor, certo ? Nessa função $.get, você está passando para o servidor sempre os mesmos parametros (nenhum) e sempre para o mesmo endereço (href), logo, a resposta do servidor vai ser sempre a mesma, logo, as 3 div's terão sempre o mesmo conteudo.

 

Se voce quer que cada div receba uma parte do mesmo conteudo vindo do servidor, voce tem que manipular a resposta de modo a exibir em cada uma delas o pedaço que voce quer. Agora, se voce quer que cada uma das div's recebam conteudos diferentes do servidor, voce tem que especificar algum parametro ou pedir o conteudo para endereços diferentes.

Compartilhar este post

Link para o post
Compartilhar em outros sites

HugoMinari    1

HugoMinari
Postado

Eu tentei fazer o seguinte:

 

function abrepag(ida){
   $(".portfolio a.link-ida").each(function() {
          var href = $(this).attr('href');
          $(this).attr('href','javascript:void(0)');
          $(this).click(function(){
               $('.conteudodiv-ida').html("");
      	    	$("#carregando").show('slow');
                $.get( href , function(data){
                       $('.conteudodiv-ida').html(data);
                       $("#carregando").hide('slow');
                });
               return null;
       });
    });
}

 

para cada link passar um id para a div conteudo. ficando:

 

<a href="teste1.html" class="link-1" title="Relatório"></a>
<a href="teste2.html" class="link-2" title="Visitar"></a>

<div class="conteudodiv-1"></div>
<div class="conteudodiv-2"></div>

 

mas não ta dando certo...

 

Fiz em php, mas o problema é que tem o refresh eu quero fazer sem o refresh. em php ficou assim:

 

<a href="http://localhost/site/index.php?local=2&p=am1" class="inf" title="Informações"></a>
<a href="http://localhost/site/index.php?local=2&p=am2" class="tec" title="Ferramentas"></a>
<a href="http://localhost/site/index.php?local=2&p=am3" class="rel" title="Relatório"></a>
<a href="http://www.google.com.br" target="_blank" class="vis"></a>
</div>
<div class="contentptf">';
switch ($_GET['p']){
	case 'am1':
	   	include ("teste.html");
		break;
	case 'am2':
		include ("teste2.html");
		break;
	case 'am3':
		include ("teste3.html");
		break;
}
echo'</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

HugoMinari    1

HugoMinari
Postado

Te mandei uma MP.

 

Então Luiz. estou postando aqui o RAR do meu caso, para que possa entender melhor... fiz algumas modificações e tentarei explicar melhor:

 

O MEU JS ATUAL È

$(function() {	
   $('#conteudo01').cycle({ 
       timeout: 0, 
       speed:   300,
       startingSlide: 2 
   });
   $('#cliente01_1').click(function() { 
       $('#conteudo01').cycle(0); 
       return false; 
   });
   $('#cliente01_2').click(function() { 
       $('#conteudo01').cycle(1); 
       return false; 
   });
$('#cliente01_3').click(function() { 
       $('#conteudo01').cycle(2); 
       return false; 
   });
});

oBS: utilizo o pluguin jquery cycle para isso.

 

o meu HTML é:

<div class="clientes">
<p class="nome">Nome cliente 01</p>
<div class="menu">
<a href="#" id="cliente01_1" class="inf" title="Informações">Info</a>
<a href="#" id="cliente01_2" class="tec" title="Ferramentas">Ferramentas</a>
<a href="#" id="cliente01_3" class="rel" title="Relatório">Relatorios</a>
<a href="http://www.cade.com.br" target="_blank" class="vis" title="Visitar">Visitar</a>
</div>
<div id="conteudo01" class="conteudodiv contentptf">
<p>esse aqui é o conteudo do cliente 01 link 1</p>
<p>esse aqui é o conteudo do cliente 01 link 2</p>
<p>esse aqui é o conteudo do cliente 01 link 3</p>
</div>
</div>
<br /><br /><br /><br />
<div class="clientes">
<p class="nome">Nome cliente 02</p>
<div class="menu">
<a href="#" id="cliente02_1" class="inf" title="Informações">Info</a>
<a href="#" id="cliente02_2" class="tec" title="Ferramentas">Ferramentas</a>
<a href="#" id="cliente02_3" class="rel" title="Relatório">Relatorios</a>
<a href="#" target="_blank" class="vis" title="Visitar">Visitar</a>
</div>
<div id="conteudo02" class="conteudodiv contentptf">
<p>esse aqui é o conteudo do cliente 02 link 1</p>
<p>esse aqui é o conteudo do cliente 02 link 2</p>
<p>esse aqui é o conteudo do cliente 02 link 3</p>
</div>
</div>

 

o arquivo pode ser baixado aki... Clique aqui

Compartilhar este post

Link para o post
Compartilhar em outros sites

HugoMinari    1

HugoMinari
Postado

ESqueçam os códigos anteriores... nessa madrugada chegeui a esse código....

 

Objetivo: A idéia é fazer varias divs onde cada uma tem suas informações, ferramentas, relatorios etc.

 

 

Problema: Só funciona a primeira div. e se eu deleto a primeira div a segunda funciona.. ou seja ela só pega o primeiro ID... se alguem puder dar uma ajuda aih... agradecido...

 

 

o JS

$(function() {
var ide = $(".siteclientes").attr("id");
var idL = $(".portfolio").attr("id");
var conteudo = "#cont"+ide;
var links = idL+0;
var acionar = "#"+links+1;
var acionar2 = "#"+links+2;
var acionar3 = "#"+links+3;

   $(conteudo).cycle({ 
       timeout: 0, 
       speed:   300,
       startingSlide: 2 
   });
   $(acionar).click(function() { 
       $(conteudo).cycle(0); 
       return false; 
   });
   $(acionar2).click(function() { 
       $(conteudo).cycle(1); 
       return false; 
   });
$(acionar3).click(function() { 
       $(conteudo).cycle(2); 
       return false; 
   });
});

 

O HTML

<div class="siteclientes" id="01">
<p class="nomesite">Cliente 01</p>
<div class="portfolio" id="atm">
<a id="atm01" class="inf" title="Informações"></a>
<a id="atm02" class="tec" title="Ferramentas"></a>
<a id="atm03" class="rel" title="Relatório"></a>
<a href="http://www.cade.com.br" target="_blank" class="vis" title="Visitar"></a>
</div>
<div id="cont01" class="conteudodiv contentptf">
<p>esse aqui é o conteudo 1</p>
<p>esse aqui é o conteudo 2</p>
<p>esse aqui é o conteudo 3</p>
</div>
</div>';

<div class="siteclientes" id="02">
<p class="nomesite">Cliente 02</p>
<div class="portfolio" id="fes">
<a id="fes01" class="inf" title="Informações"></a>
<a id="fes02" class="tec" title="Ferramentas"></a>
<a id="fes03" class="rel" title="Relatório"></a>
<a href="http://www.cade.com.br" target="_blank" class="vis" title="Visitar"></a>
</div>
<div id="cont02" class="conteudodiv contentptf">
<p>esse aqui é o conteudo 1</p>
<p>esse aqui é o conteudo 2</p>
<p>esse aqui é o conteudo 3</p>
</div>
</div>

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