Discussoes de Programacao e Tecnologia

Atualizando DIV com jquery - Urgente Help please!

43 respostas
E
Edvaldo_Melo

Ola Pessoal.

Estou com uma duvida, preciso atualizar os dados de uma jsp em uma div (Estou usando jquery), ou seja, na mesma pagina (Principal) eu carrego dados de outra pagina/arquivo, mais ou menos assim.
Clico em um item por exemplo celular e faco um select no DB etc e carrego todos os telefones celulares disponiveis no banco logo abaixo do menu celular (Como uma arvore).

Eu to fazendo assim, (Codigos abaixo), mas me abre sempre uma pagina nova. Eu preciso que atualize os itens na minha div definida (div id="codSector"). Codigo JavaScript: 
$(document).ready(function() {
	                $("a").click(function() {
	                    var file = $("#codSector"+$(this).attr("idsect")).load($(this).attr("href"));;
	        	    $.ajax({
	                         url:file,
	                         cache:false,
	                         success: function(response) {
	                         $("#codSector").html(response);
                         }
                });
          return false;
      });
});
Div que preciso atualizar: 
<div>
<ul class="DescriptionSector">
	<h3>
		<a id='idsect<%=cd_sottosect%>' href="ExclusionElemBySector.jsp?codSector=<%=cd_sottosect%>&cdJob=<%=request.getParameter("cdJob")%>">  
                <%=subsect.getDescription()%></button>												
	</h3>
	</ul>
	<div id="codSector<%=cd_sottosect%>">
                 ***AQUI DEVE CARREGA OS ITENS ***
	</div>
</div>
Arquivo jsp onde realizo o select no BD etc 
<%
	   					if (request.getParameter("codSector") != null) {   
	   						CatalogProduct[] products = pgeManage.getValidProducts(new Long(request.getParameter("codSector"))); 
							for (int k = 0; k < products.length; k++) {
								//Long[] psect = products[k].getCdSectors();
									//for (int q = 0; q < psect.length; q++) {
										//if (psect[q].equals(cd_sottosect)) {
											Item[] items = products[k].getItems();
											if (items.length == 1) {
												Long ijcod = items[0].getItemCode();
		%>
							                    <h3><%=products[k].getTitolo()%></h3>
							                    <input type="checkbox" name="esclusi" value="<%=ijcod%>" id="it<%=ijcod%>" />
							                    <label for="it<%=ijcod%>"><%=ijcod%> <%=products[k].getTitolo()%></label>
							                   	<br/>
		<%
                        					} else {
		%>
                       							<h3><%=products[k].getTitolo()%></h3>
		<%
                           						for (int w = 0; w < items.length; w++) {
                                					Long ijcod = items[w].getItemCode();
                                					Attribute[] attrlist = items[w].getAttributes();
                                					String attr = "";
	                               						for (int r = 0; r < attrlist.length; r++) {
	                                   						attr += attrlist[r].getDescription() + ": " + attrlist[r].getValue() + ", ";
	                               						}
		%>
										                <input type="checkbox" name="esclusi" value="<%=ijcod%>" id="it<%=ijcod%>" />
										                <label for="it<%=ijcod%>"><%=ijcod%> <%=products[k].getTitolo()%> (<%=attr%>)</label>
														<br/>
		<%
												}
											}
										//}
									//}
								}
	   					}
		%>

Agradeco o retorno/ajuda.
Abs e obrigado!!!

ERMelo

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

43 Respostas

J
jaboot

Edvaldo_Melo,

Você nunca vai ter um elemento div com o id codSector. Você sempre terá um id codSector+id

Talvez seja isso. E tire aqueles dois “ponto e vírgula” do fim da linha 3!!! Coloque só um!

Boa sorte, qualquer coisa estamos aí.

E
Edvaldo_Melo

Ola Jaboot.

Agradeco sua resposta, mas nao funcionou tambem.

Vou tentando aqui.

Abs,

J
jaboot

Cria um div de teste, com o id fixo e tenta mandar pra ele.
Vê se funciona.

E
Edvaldo_Melo

Tentei

e
e nada.

Ta complicado… o que poder ser…

E
Edvaldo_Melo

Pessoal, to inviando tambem o pedaco da div que to querendo atualizar, talvez alguem consiga me ajudar

<div>
										<ul class="DescriptionSector">
											<h3>
												<a id="idsect<%=cd_sottosect%>" href="ExclusionElemBySector.jsp?codSector=<%=cd_sottosect%>&cdJob=<%=request.getParameter("cdJob")%>"><%=subsect.getDescription()%></a>												
											</h3>
										</ul>
										<di id="cod-Sector<%=cd_sottosect%>">
											
										</div>
										
									</div>
vlw
W
windsofhell

Ola,

tem alguma razao especial pela qual vc cria o div com esse ID:

<div id="codSector<%=cd_sottosect%>">

A unica razao que e vejo eh se voce vai ter varios DIVs criados dinamicamente. Eh isso?

Bem, caso vc tenha somente esse div criado, vc pode usar um selector que seleciona um elemento com o ID que inicia com “codSector”, por exemplo:

$(document).ready(function() {  
    $("a").click(function() {  
               var file = $("#codSector"+$(this).attr("idsect")).load($(this).attr("href"));               
               $.ajax({  
                     url:file,  
                     cache:false,  
                     success: function(response) {  
                         // seleciona o div que inicia com "codSector"
                         $('div[id^="codSector"]').html(response);
                    }  
               });  
            return false;  
    });  
});

Novamente, se vc tiver mais de um div com ID que comeca com codSector vc vai ter problema. Mas se vc tiver apenas 1, acho que isso resolve o seu problema

//Daniel

E
Edvaldo_Melo

So tenho um div com essa identificacao codSector. Fiz como vc falou, mas continua carregando uma nova pagina. Caracas… ta dificil.

J
jaboot

Por favor, posta aqui o código HTML do browser mesmo. Gostaria de ver como ficou depois de renderizado na tela.
Tem como?! Não todo, mas pelo menos o(s) div(s).

Valeu!

E
Edvaldo_Melo
Segue um pedaco do que ta sendo gerado: Vlw. 
<script type="text/javascript" src="../include/javascript/jquery-1.7.1.js">
	            function g(id) {
	                return document.getElementById(id);
	            }
	            function h(id) {
	                var el=g(id);
	                if (el.style.display=='none')
	                    el.style.display='block';
	                else
	                    el.style.display='none';
	            }
                $(document).ready(function() {
                    $(".codSector").click(function() {
                        $("#codSector"+$(this).attr("codSector")).load($(this).attr("href"));
                     return false;
                    });
                });
          	</script>
    </head>
    
    <body>
       <form method="post" action="ExclusionElem.jsp">  
            <h1>Intranet...i</h1>

            <span>
                texto ...
            </span><br/><br/>
		
		            <h1 onClick='h("de0")'>Hi Tech</h1>
		            <div id='de0'>
                
		
		                	<h2 onClick='h("des7848")'>Audio</h2> 
		                	<div id='des7848'>  
		
								<!-- 
									<div id="codSector8264">
										<input type="button" idsect="8264" class="bottonesettore" href="ExclusionElemBySector.jsp?codSector=8264&cdJob=405560" value="MP3 Portatili" />
									</div>
								-->
									<div id="codSector8264">

										<h3>											
											<a class="codSector="8264 href="ExclusionElemBySector.jsp?codSector=8264&cdJob=405560">MP3 Portatili</a>												
										</h3>
									</div>																							
							</div>
		
					</div>
		
								<!-- 
									<div id="codSector8267">
										<input type="button" idsect="8267" class="bottonesettore" href="ExclusionElemBySector.jsp?codSector=8267&cdJob=405560" value="Accessori Audio" />
									</div>
								-->
									<div id="codSector8267">
										<h3>											
											<a class="codSector="8267 href="ExclusionElemBySector.jsp?codSector=8267&cdJob=405560">Accessori Audio</a>												
										</h3>

									</div>																							
							</div>
		
					</div>
		
								<!-- 
									<div id="codSector8689">
										<input type="button" idsect="8689" class="bottonesettore" href="ExclusionElemBySector.jsp?codSector=8689&cdJob=405560" value="Hi Fi" />
									</div>
								-->
									<div id="codSector8689">
										<h3>											
											<a class="codSector="8689 href="ExclusionElemBySector.jsp?codSector=8689&cdJob=405560">Hi Fi</a>												
										</h3>
									</div>																							
							</div>

		
					</div>
		
								<!-- 
									<div id="codSector8690">
										<input type="button" idsect="8690" class="bottonesettore" href="ExclusionElemBySector.jsp?codSector=8690&cdJob=405560" value="Radiosveglie" />
									</div>
								-->
									<div id="codSector8690">
										<h3>											
											<a class="codSector="8690 href="ExclusionElemBySector.jsp?codSector=8690&cdJob=405560">Radiosveglie</a>												
										</h3>
									</div>																							
							</div>
		
					</div>
		
								<!-- 
									<div id="codSector8871">
										<input type="button" idsect="8871" class="bottonesettore" href="ExclusionElemBySector.jsp?codSector=8871&cdJob=405560" value="Piatti e Mixer" />
									</div>
								-->

									<div id="codSector8871">
										<h3>											
											<a class="codSector="8871 href="ExclusionElemBySector.jsp?codSector=8871&cdJob=405560">Piatti e Mixer</a>												
										</h3>
									</div>																							
							</div>
		
					</div>
		            

		
		                	<h2 onClick='h("des7840")'>Climatizzazione</h2> 
		                	<div id='des7840'>  
		
								<!-- 
									<div id="codSector8222">
										<input type="button" idsect="8222" class="bottonesettore" href="ExclusionElemBySector.jsp?codSector=8222&cdJob=405560" value="Condizionatori Fissi" />
									</div>
								-->

									<div id="codSector8222">
										<h3>											
											<a class="codSector="8222 href="ExclusionElemBySector.jsp?codSector=8222&cdJob=405560">Condizionatori Fissi</a>												
										</h3>
									</div>																							
							</div>
		
					</div>
		
								<!-- 
									<div id="codSector8223">
										<input type="button" idsect="8223" class="bottonesettore" href="ExclusionElemBySector.jsp?codSector=8223&cdJob=405560" value="Condizionatori Portatili " />
									</div>
								-->
									<div id="codSector8223">
										<h3>											
											<a class="codSector="8223 href="ExclusionElemBySector.jsp?codSector=8223&cdJob=405560">Condizionatori Portatili </a>												
										</h3>

									</div>																							
							</div>
		
					</div>
J
jaboot

Muda o seu anchor ( ) pra qualquer outra coisa. Tenta isso.

P
pdpbom

Cara axo que teu problema ta no link

teu link ta com href isso fará ele ser direcionado…

tira o href … e testa com url do file e com id do div fixo …

abraço

E
Edvaldo_Melo
Um fragmento do codigo html gerado (
parentese corrigido) Mesmo assim nao funciona. 
!-- 
									<div id="codSector8264">
										<input type="button" idsect="8264" class="bottonesettore" href="ExclusionElemBySector.jsp?codSector=8264&cdJob=405560" value="MP3 Portatili" />
									</div>
								-->
									<div id="codSector8264">

										<h3>											
											<a class="codSector8264" href="ExclusionElemBySector.jsp?codSector=8264&cdJob=405560">MP3 Portatili</a>												
										</h3>
									</div>																							
							</div>
		
					</div>
		
								<!-- 
									<div id="codSector8267">
										<input type="button" idsect="8267" class="bottonesettore" href="ExclusionElemBySector.jsp?codSector=8267&cdJob=405560" value="Accessori Audio" />
									</div>
								-->
									<div id="codSector8267">
										<h3>											
											<a class="codSector8267" href="ExclusionElemBySector.jsp?codSector=8267&cdJob=405560">Accessori Audio</a>												
										</h3>

									</div>																							
							</div>
		
					</div>
P
pdpbom 
<a class="codSector="8267 href="ExclusionElemBySector.jsp?codSector=8267&cdJob=405560">

tem erro nisso

<a class="codSector=8267" href="ExclusionElemBySector.jsp?codSector=8267&cdJob=405560">
W
windsofhell

AHHHH, agora eu entendi.

Vc nao pode colocar o seu link desse jeito:

<a id='idsect<%=cd_sottosect%>' href="ExclusionElemBySector.jsp?codSector=<%=cd_sottosect%>&cdJob=<%=request.getParameter("cdJob")%>">

Ai vai para outra pagina mesmo.
Esses parametros vc tem que passar junto com o ajax request. O seu link nao pode apontar para nada.

//daniel

E
Edvaldo_Melo

Sim pdpbom ja corrigi.

Ola Jaboot e pdpbom. Ja tentei com button, span etc. nao funciona.

Estou testando assim agora, vou ver se funciona:

<div id="codSector"> <h3> <span class="codSector<%=cd_sottosect%>" url_page'="ExclusionElemBySector.jsp?codSector=<%=cd_sottosect%>&cdJob=<%=request.getParameter("cdJob")%>"><%=subsect.getDescription()%></span> </h3> </div>

E
Edvaldo_Melo

O javascript ta assim agora.

$(document).ready(function() { $(".codSector").click(function() { $("#codSector"+$(this).attr("codSector")).load($(this).attr("url_page")); return false; }); });

E
Edvaldo_Melo

windsofhell, vc pode me dar um exemplo, eu nao sou muito bom em jquery/javascript, to apanhando nesse inicio.
Agradeco.

J
jaboot

Talvez o que ele tenha dito é que no seu href tem que ser href="#" e o link fica na chamada do ajax.
É isso?!

E
Edvaldo_Melo

windsofhell, vc pode me dar um exemplo/luz de como passa via ajax request. Te agradeco. To comecando com jquery/javascript. uso quase nunca.
Vlw

E
Edvaldo_Melo

Jaboot/windsofhel,

to fazendo assim, mas to em duvidas como passar a url para o ajax:

$(document).ready(function() { $("a").click(function() { var file = $("#codSector"+$(this).attr("idsect")).load($(this).attr("url_page")); $.ajax({ url:file, cache:false, success: function(response) { $('div[id^="codSector"]').html(response); } }); return false; }); });

<div url_page="ExclusionElemBySector.jsp?codSector='<%=cd_sottosect%>'&cdJob=<%=request.getParameter("cdJob")%>"> <ul class="DescriptionSector" > <h3> <a id="idsect<%=cd_sottosect%>" href="#"><%=subsect.getDescription()%></a> </h3> </ul> <div id="codSector<%=cd_sottosect%>"> </div> </div>

E
Edvaldo_Melo

ajuda…

J
jaboot

Edvaldo_Melo,

Agora que eu reparei. No seu $("a").click(function() { var file = $("#codSector"+$(this).attr("idsect")).load($(this).attr("url_page")); $.ajax({ url:file,eu acho que não pode ser o file a sua url. A sua URL é aquela que está no href do seu anchor.

E
Edvaldo_Melo

nada, nao funciona mesmo assim.

P
pdpbom

cara segue um exemplinho de como pode ser feito soh q pra facilitar aqui usei um hide e show …

gera a url no JS

e executa o ajax …

abração

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <style type="text/css">
			body {padding-top: 60px;}
		</style>
		<script type="text/javascript">
	
		$(function() {
			var cdJob = "666";
			$('.escondido').hide();
			$('.codSector').each(function(){
				$(this).click(function(){
					$('.escondido').hide();
					
					$('#destino').html("ExclusionElemBySector.jsp?codSector=" + $(this).attr('id') + "&cdJob=" + cdJob);
					$('#destino').show();
				})
			});
			
		});

		</script>
	</head>
	<body>
		<form class="form-horizontal" id="autocompleteForm" name="autocompleteForm" action=""  method="post">
			<div>  
				<h3>                                            
					<a class="codSector" id="1">MP1</a>
					<a class="codSector" id="2">MP2</a>
					<a class="codSector" id="3">MP3</a>
				</h3>  
			</div>
			<div class="escondido" id="destino"> </div> <!-- destino -->
		</form>
	</body>
</html>
E
Edvaldo_Melo

Vlw pdpbom. Mas para a minha situacao ainda nao funcionou. Mudei a linha e to tentando dessa forma, carrega normalmente os dados, mas sempre em outra page, nao atualiza nunca a div.

$("#post").click(function(){
	$("#codSector").html(ajax_load);
		$.post(
			loadUrl,
			//{language: "php", version: 5},
			function(responseText){
			 	$("#codSector").html(responseText);
			},
		"html"
	);
});


<ul>
	<h3>
		<a id="idsect<%=cd_sottosect%>" href="ExclusionElemBySector.jsp?codSector=<%=cd_sottosect%>&cdJob=    
                     <%=request.getParameter("cdJob")%>">                       
                    <%=subsect.getDescription()%></a>												
	</h3>
</ul>
	<div id="codSector<%=cd_sottosect%>">
	</div>
P
pdpbom

Cara as alterações que eu faria…
trocaria os id de :
id=“idsect<%=cd_sottosect%>”
para
id="<%=cd_sottosect%>"

colocaria o “idsect” em um class;
retiraria o href (é ele quem esta fazendo abrir a nova janela ) e colocaria no JS;

final teria o link ± assim

<a id="<%=cd_sottosect%>" class="idsect"><%=subsect.getDescription()%></a>

Porquê da alteração:

retirada do href, não ira executar o link ao clica-lo;

id=  mante o valor que deve ser passado

class=idsect , para que possa ser efetuado o select do campo;

monta a url no JS

E
Edvaldo_Melo

Ola pdpbom. te agradeco muito pela forca. Vou testar na segunda feira. talvez resolva. Vou dar uma estudada tambem.
Vc consegue me dizer como posso montar a url via js, como faco para pegar o codSector ? via request.getParameter ?

Vlw, bom fim de semana.

P
pdpbom

cara segue como fica … pode ter varios links mas apenas 1 div de destino
fiz um teste ake com 2 arquivos um q seria o teu jsp e outro q seria a pagina de consulta
salva os 2 em uma pasta e faz o teste pra ver …

os codigos html em comentarios () seria o codigo java dele

seria o teu JSP (salvar como index.html)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <style type="text/css">
			body {padding-top: 60px;}
		</style>
		<script type="text/javascript">
	
		$(function() {
			/* 
				MONTANDO A URL
				
				partindo principio que a url que eu kero acessar é:
						** troquei a extensão pra testar aqui
				      ExclusionElemBySector.html?cdJob=405560&codSector=8267" 
				ExclusionElemBySector.html? => caminho do arquivo
				codSector=8267&cdJob=405560 => parametros
					codSector=8267 => varia de link pra link, vira do ir do link
					cdJob=405560 => fixo 
			*/
			var url = "ExclusionElemBySector.html";
			$('.codSector').each(function(){
				$(this).click(function(){
				
					 var id = $(this).attr('id');
					 var cdJob= $('#cdJob').val();
					 
					$.ajax({
						url: url,
						type: "GET",
						dataType: "html",
						data: { "codSector": id, "cdJob": cdJob },
						success: function(data) {
							$('.result').html(data);
						}
					})
				})
			});
			
		});

		</script>
	</head>
	<body>
		<form class="form-horizontal" id="autocompleteForm" name="autocompleteForm" action=""  method="post">
			<div>  
				<h3>
					<!-- em comentario os codigos como ficariam em java -->
					<!-- <input type="hidden" id="cdJob" value="<%=request.getParameter("cdJob")%>"/> -->
					<input type="hidden" id="cdJob" value="405560"/>
					<!-- <a class="codSector" id="<%=cd_sottosect%>"><%=subsect.getDescription()%></a>  -->
					<a class="codSector" id="1">MP1</a>
				</h3>  
			</div>
			<div class="result" id="result"> </div> <!-- destino -->
		</form>
	</body>
</html>

seria a pagina de consulta saltar como “ExclusionElemBySector.html” para testar

<!DOCTYPE html>
<html>
aaa
</html>
E
Edvaldo_Melo

Ola pdpbom e todos que deram uma forca.

pdpbom, funcionou. A atualizacao da div/a carga dos dados.

So que agora ta acontecendo o seguinte.
Por exemplo, eu tenho os itens:

  • TELEFONE
  • CARROS

Quando clico em telefone, carrega os subitens de telefone tambem para os carros e seus subitens, ou seja, ta repetindos tudo dentro de todos os subitens de telefono, itens carros e seus subitens.

Agradeco a ajuda.
Abs,

P
pdpbom

Edvaldo_Melo:
Ola pdpbom e todos que deram uma forca.

pdpbom, funcionou. A atualizacao da div/a carga dos dados.

So que agora ta acontecendo o seguinte.
Por exemplo, eu tenho os itens:

  • TELEFONE
  • CARROS

Quando clico em telefone, carrega os subitens de telefone tambem para os carros e seus subitens, ou seja, ta repetindos tudo dentro de todos os subitens de telefono, itens carros e seus subitens.

Agradeco a ajuda.
Abs,

Não entendi muito bem …

Tipo quando clicar em telefone ele atualiza um div especifico tipo resultTelefones, quando clica em carros ResultCaros ??
ou quando clica telefone ele atualiza um div result com os dados de telefone e quando clica em carros o div result fica com o resultado de carros ??

E
Edvaldo_Melo

pdpbom,

Nesse trecho de codigo abaixo, vem relacionado do banco varios itens (como exemplo telefone, carro etc), se clico em telefone expandi abaixo de telefone e relaciona tudo relativo a telefone. ta fazendo isso, mas ao mesmo tempo da repetindo tudo em baixo de carro (itens e subitens) tudor repetido.

<div>
<h3>
<input type="hidden" id="cdJob"	value="<%=request.getParameter("cdJob")%>"/>
<a class="codSector" id="<%=cd_sottosect%>"><%=subsect.getDescription()%></a> 
</h3>
</div>
<div class="result" id="<%=cd_sottosect%>"> </div>
P
pdpbom

algo mais ou menos assim q vem ?

<div>  
<h3>  
<input type="hidden" id="cdJob"  value="<%=request.getParameter("cdJob")%>"/>  
<a class="codSector" id="telefone">telefone</a>   
<a class="codSector" id="carro">carro</a>   
<a class="codSector" id="endereco">Endereço</a>   
</h3>  
</div>  
<div class="result" id="<%=cd_sottosect%>"> </div>

??

se tiver como mostrar algo + perto da realidade eu consigo ajudar

ou cola uma parte do html gerado identificando oq eh o carro e oq eh o telefone

E
Edvaldo_Melo

Nesse seu exemplo, otimo, quando clico em telefone, me relaciona abaixo de telefone os suitens relativos a telefones, e nao deve repetir nos outros itens (carro etc). Ta fazendo tudo certo, mas ta repetindo abaixo dos outros itens que nao tem nada haver.

P
pdpbom

Por acaso teu codigo ta ± assim ?

<div>    
<h3>    
<input type="hidden" id="cdJob"  value="<%=request.getParameter("cdJob")%>"/>    
<a class="codSector" id="telefone">telefone</a>     
<div class="result" id="<%=cd_sottosect%>"> </div> 
<a class="codSector" id="carro">carro</a>
<div class="result" id="<%=cd_sottosect%>"> </div>      
<a class="codSector" id="endereco">Endereço</a>
<div class="result" id="<%=cd_sottosect%>"> </div>      
</h3>    
</div>

Acredito que seja isso

muda para isso

$('.codSector').each(function(){  
                $(this).click(function(){  
                  
                     var id = $(this).attr('id');  
                     var cdJob= $('#cdJob').val();  
                       
                    $.ajax({  
                        url: url,  
                        type: "GET",  
                        dataType: "html",  
                        data: { "codSector": id, "cdJob": cdJob },  
                        success: function(data) {  
                            $('.result_'+id).html(data);  
                        }  
                    })  
                })  
            });

<div>    
<h3>    
<input type="hidden" id="cdJob"  value="<%=request.getParameter("cdJob")%>"/>    
<a class="codSector" id="telefone">telefone</a>     
<div class="result_telefone" id="<%=cd_sottosect%>"> </div> 
<a class="codSector" id="carro">carro</a>
<div class="result_carro" id="<%=cd_sottosect%>"> </div>      
<a class="codSector" id="endereco">Endereço</a>
<div class="result_endereco" id="<%=cd_sottosect%>"> </div>      
</h3>    
</div>

observe que mudamos o destino para algo especifico usando o id

$('.result_'+id).html(data);
E
Edvaldo_Melo

pdpbom, quando clico em MP3 que e um iten de Audio, todos os itens relativos a mp3 sao relacionados, mas como eu te falei antes, repeti tambem em todos os outros intes que nao tem nada haver (Hi Fi - Climatizacao)
Hi Tech
- Audio
MP3 Portatil
Accessorios Audio
Hi Fi
- Climatizacao

*HTML GERADO* 
<div>

										<h3>
											<input type="hidden" id="cdJob"	value="405560"/>
											<a class="codSector" id="8264">MP3 Portatil</a> 
										</h3>
									</div>
									<div class="result" id="8264"> </div> 
		
							</div>
		
									<div>
										<h3>

											<input type="hidden" id="cdJob"	value="405560"/>
											<a class="codSector" id="8267">Accessorios Audio</a> 
										</h3>
									</div>
									<div class="result" id="8267"> </div> 
		
							</div>
		
									<div>
										<h3>
											<input type="hidden" id="cdJob"	value="405560"/>

											<a class="codSector" id="8689">Hi Fi</a> 
										</h3>
									</div>
									<div class="result" id="8689"> </div> 
		
							</div>
		
									<div>
										<h3>
											<input type="hidden" id="cdJob"	value="405560"/>
											<a class="codSector" id="8690">Radio</a> 
										</h3>

									</div>
									<div class="result" id="8690"> </div> 
		
							</div>
		
									<div>
										<h3>
											<input type="hidden" id="cdJob"	value="405560"/>
											<a class="codSector" id="8871">PRATOi e Mixer</a> 
										</h3>
									</div>

									<div class="result" id="8871"> </div> 
		
							</div>
E
Edvaldo_Melo

com o id no result, nao funciona. Eu so tenho uma div, porque clico somente em um item.

<div> <h3> <input type="hidden" id="cdJob" value="<%=request.getParameter("cdJob")%>"/> <a class="codSector" id="<%=cd_sottosect%>"><%=subsect.getDescription()%></a> </h3> </div> <div class="result" id="<%=cd_sottosect%>"> </div>

E
Edvaldo_Melo

pdpbom,

Eu fiz passando o id no result, mas nao funcionou. Essa parte da aplicacao ta funcionando bem com jquery (atualizando a DIV), o problema e que ta funcionando bem demais, ou seja, o exemplo que eu te dei dos telefones, quando clico em algum item, carrega seus subitens mas aparece isso repetido para todos os itens da raiz da arvore. (NO EXEMPLO baixo eu cliquei em celular, me traz SAMSUN, mas repetido para todos, deve atualizar so abaixo de celular). To perdendo os cabelos.

Agradeco a ajuda.

Abs

-TELEFONE

  • CELULAR
    ** SAMSUNG
  • FIXO
    ** SAMSUNG
    -CARRO
    ** SAMSUNG
P
pdpbom

cara varias observações:
soh pode haver um objeto com o id expecifico.
não é necessario repetir o campo hidden visto q ele tera o msm valor em todos os lugares
aprender a diferença entre $(’.result’) e $(’#result’)
. = identificador por classe

identificador por id

se vc colocar no codigo

$('.result').html()

ele vai alterar em todos os q tiverem class=“result”

no codigo abaixo não testei mas acredito que esta certo fiz as alterações e peguei uma parte do teu codigo para criar o meu exemplo

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <style type="text/css">
			body {padding-top: 60px;}
		</style>
		<script type="text/javascript">
	
		$(function() {
			/* 
				MONTANDO A URL
				
				partindo principio que a url que eu kero acessar é:
						** troquei a extensão pra testar aqui
				      ExclusionElemBySector.html?cdJob=405560&codSector=8267" 
				ExclusionElemBySector.html? => caminho do arquivo
				codSector=8267&cdJob=405560 => parametros
					codSector=8267 => varia de link pra link, vira do ir do link
					cdJob=405560 => fixo 
			*/
			var url = "ExclusionElemBySector.html";
			$('.codSector').each(function(){
				$(this).click(function(){
				
					 var id = $(this).attr('id');
					 var cdJob= $('#cdJob').val();
					 
					$.ajax({
						url: url,
						type: "GET",
						dataType: "html",
						data: { "codSector": id, "cdJob": cdJob },
						success: function(data) {
							/* id que ele vai alterar */
							$('#result_'+id).html(data);
						}
					})
				})
			});
			
		});

		</script>
	</head>
	<body>
		<form class="form-horizontal" id="autocompleteForm" name="autocompleteForm" action=""  method="post">
			<!-- <input type="hidden" id="cdJob" value="<%=request.getParameter("cdJob")%>"/> -->
			<input type="hidden" id="cdJob"  value="405560"/>  
					<div>  
						<h3>  
							<!-- <a class="codSector" id="<%=cd_sottosect%>"><%=subsect.getDescription()%></a>  -->
							<a class="codSector" id="8264">MP3 Portatil</a>   
						</h3>  
						<!--<div class="result_<%=cd_sottosect%>"> </div>-->
						<div id="result_8264"> </div>
					</div>  
					
					<div>  
						<h3>  
							<!-- <a class="codSector" id="<%=cd_sottosect%>"><%=subsect.getDescription()%></a>  -->
							<a class="codSector" id="8267">Accessorios Audio</a>   
						</h3>  
						<!--<div class="result_<%=cd_sottosect%>"> </div>-->
						<div id="result_8267"> </div>   
					</div>  
		</form>
	</body>
</html>

testa ae

ele vai alterar em todos os q tiverem class=“result”
repare que alterei de

$('.result').html(data);

para

$('#result_'+id).html(data);

de

<div class="result" id="8267"> </div>

para

<div id="result_8267"> </div>
P
pdpbom

Um lugar bom para aprender sobre selectores

http://api.jquery.com/category/selectors/

tem exemplo a cada tipo :wink:

E
Edvaldo_Melo

pdpbom,
Te agradeco muitissimo pela ajuda. Realmente voce foi muito gentil. Fiz uns testes aqui e funcionou. Vou ajustar na quarta e depois posto aqui/fecho o topico. Em relacao a seletores de jquery, to dando uma estudada, muito bacana essa library.

Mais uma vez muito obrigado a voce e todos do GUJ.

Bom feriado e abs.

E
Edvaldo_Melo

Muito obrigado pdpbom e todos do forum.
pdpbom,
Valeu muitissimo pela grande ajuda.
Precisando, tamos ae.

Abs e boa sorte.

E
Edvaldo_Melo

pdpbom,
So mais uma pergunta, para mim fazer ao contrario, ou seja, quando o usuario clicar no item/link uma segunda vez,
para que eu possa ocultar o conteudo/suitens daquela DIV(ja exibir agora quero ocultar), tem um method do ajax, como posso implementar?
Vlw

E
Edvaldo_Melo

Resolvido.

Criado 26 de abril de 2012
Ultima resposta 4 de mai. de 2012
Respostas 43
Participantes 4

Topicos relacionados

Quando chamo a função javascript não funciona depois de atualizar a página 5 respostas Como Preencher um input a partir de um Combobox 7 respostas [RESOLVIDO] Como mapear um campo char do banco 28 respostas Primefaces - Reaproveitamento Dialog´s 7 respostas Problema para renderizar páginas jsf 5 respostas
Alura Git Flow: entenda o que é, como e quando utilizar Entenda o que é Git Flow, como funciona seu fluxo com branches como Master, Develop, Feature, Release e Hotfix, além de vantagens e desvantagens.
Casa do Codigo Desmistificando WebAssembly: Alta performance,... Por Raphael Amorim — Casa do Codigo
Fiap Pos-Tech: Front-end Engineering Pós-Graduação para desenvolver habilidades avançadas em tecnologias front-end, com foco em...