Ir para conteúdo

POWERED BY:

Arquivado

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

Julio Cesar Antunes

[Resolvido] Carregar pág dentro de DIVs

Por , em Javascript

Recommended Posts

Julio Cesar Antunes    0

Julio Cesar Antunes
Postado

To querendo montar algo parecido com um combobox dinâmico, mas não dentro de um Select e sim dentro de uma DIV

 

EX:

+----DIV1----+   +---DIV2----+   +---DIV3----+    +---DIV4----+
|   Marca    |   |   Modelo  |   |    COR    |    |    Ano    |
+------------+   +-----------+   +-----------+    +-----------+
>> FIAT      |   |  Palio    |   |>>ROSA(kkK)|    |    1914   |
  FORD      |   |>>Strada   |   |           |    | >> 1944   |
  BMW       |   |  UNO zero |   +-----------+    +-----------+
+------------+   |  Punto    | 
                |     .     | 
                +-----------+

A ideia é o seguinte, o conteúdo dentro das DIV são Links

<a href="modelo.php?marca=fiat"> FIAT </a>
.

 

Até aonde cheguei.

 

<!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=iso-8859-1" />
<title>Documento sem título</title>
<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//carrega fazendas
$(document).ready(function(){
	$("#marca a").click(function( e ){
		e.preventDefault();
		var href = $( this ).attr('href');
		$("#modelo").load( href +" #modelo");
	});
	//-=============-
	$("#modelo a").click(function( e ){
		e.preventDefault();
		var href = $( this ).attr('href');
		$("#cor").load( href +" #cor");
	});
});
</script>
</head>
<body>
<div id="marca"></div>
<div id="modelo"></div>
<div id="cor"></div>
<div id="ano"></div>
</body>
</html>

 

Quando eu cliko na MARCA carrega certinho os Modelo dentro da div modelo, mas quando cliko no MODELO carrega a COR em uma nova janela em vez de carregar dentro da DIV cor.

 

Já agradeço por te lido, Abraço. :clap: :clap:

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

isso é pq você colocou os modelos depois da pagina ter sido carregada, Então o teu bind não existe.

faça assim:

 

$("#modelo a").live('click', function( e ){

Compartilhar este post

Link para o post
Compartilhar em outros sites

Julio Cesar Antunes    0

Julio Cesar Antunes
Postado

:clap: Funcionou perfeitamente, muito Obrigado mesmo pela ajuda William Bruno(virei visitante fiel do teu Site).

 

Pra quem tem espaço no sistema, acredito que essa lógica de demonstrar dados é muito melhor para o usuário quando comparado com o Combobox.

PQ:

:seta: Economiza um click ( abrir o combobox)

:seta: Usuário visualiza os dados maior facilidade, mais fácil estilizar.

 

Código certinho

 

<!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=iso-8859-1" />
<title>Documento sem título</title>
<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
       //carrega fazendas
       $(document).ready(function(){
               $("#marca a").click(function( e ){
                       e.preventDefault();
                       var href = $( this ).attr('href');
                       $("#modelo").load( href +" #modelo");
               });
               //-=============-
               $("#modelo a").live('click', function( e ){  
                       e.preventDefault();
                       var href = $( this ).attr('href');
                       $("#cor").load( href +" #cor");
               });
               //-=============-
               $("#cor a").live('click', function( e ){  
                       e.preventDefault();
                       var href = $( this ).attr('href');
                       $("#ano").load( href +" #ano");
               });
       });
       </script>
</head>
<body>
<div id="marca"></div>
<div id="modelo"></div>
<div id="cor"></div>
<div id="ano"></div>
</body>
</html>

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