Ir para conteúdo

Arquivado

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

carlosmadeiracunha

Relacionar atributo rel a classe de div

Recommended Posts

Boa noite, um dia desses eu fiz um blog para um site e nas imagens eu usei o Magnific PopUp ( Documentação), e achei bacana pela facilidade de se usar, cheguei a abrir um tópico ( Como verificar se uma imagem contém link? ) pra poder implementar oque eu queria, quem quiser ver o blog, está aqui http://www.neoraddepoxipiso.com.br/blog.php , é só clicar nas imagens que abrirão em uma galeria lightbox.

 

Só que agora eu estou tentando bolar uma galeria de imagens, não pra este blog mas pra poder usar em um projeto posterior a este, é o seguinte, eu tenho um div com a classe zoom-gallery e um atributo rel com conteúdo indicando, por exemplo uma categoria e dentro deste div eu tenho várias imagens com links contendo a classe gallery_popup que acionam o Magnific popUp, como mostrado abaixo.

<div class="zoom-gallery" rel="aguia">    
        <a class="gallery_popup" href="http://www.fundospaisagens.com/Imagens/aguia-numa-montanha-cheia-de-neve.jpg" data-info="O vôo nas montanhas geladas" title="O vôo nas montanhas geladas">
            <img src="http://www.fundospaisagens.com/Imagens/aguia-numa-montanha-cheia-de-neve.jpg" alt="O vôo nas montanhas geladas" class="thumb">
        </a>
        
        <a class="gallery_popup" href="https://4.bp.blogspot.com/-pYwZMgxXJ2k/V-kSJwhGOuI/AAAAAAAASHI/F0y5Y353NZcumIylBQQRxUXPu3btUcGygCLcB/s640/aguia.jpg" data-info="A visão da águia voando" title="A visão da águia voando">
            <img src="https://4.bp.blogspot.com/-pYwZMgxXJ2k/V-kSJwhGOuI/AAAAAAAASHI/F0y5Y353NZcumIylBQQRxUXPu3btUcGygCLcB/s640/aguia.jpg" alt="A visão da águia voando" class="thumb">
        </a>
        
</div>

<div class="zoom-gallery" rel="animais">
		<a class="gallery_popup" href="http://2.bp.blogspot.com/-rUediYr7vOQ/Tdpq25pgBpI/AAAAAAAAAFU/4zBKBfSxN3Q/s1600/9874coelho1.jpg" data-info="Coelhinho" title="Coelhinho">
            <img src="http://2.bp.blogspot.com/-rUediYr7vOQ/Tdpq25pgBpI/AAAAAAAAAFU/4zBKBfSxN3Q/s1600/9874coelho1.jpg" alt="Coelhinho" class="thumb">
        </a>
        
        <a class="gallery_popup" href="http://animais.culturamix.com/blog/wp-content/gallery/As-Esp%C3%A9cies-de-Urso-Mais-Conhecidas-2/Esp%C3%A9cies-de-Urso-Mais-Conhecidas-4.jpg" data-info="Ao amanhecer" title="Ao amanhecer">
            <img src="http://animais.culturamix.com/blog/wp-content/gallery/As-Esp%C3%A9cies-de-Urso-Mais-Conhecidas-2/Esp%C3%A9cies-de-Urso-Mais-Conhecidas-4.jpg" alt="Ao amanhecer" class="thumb">
        </a>
</div>

<!--b sem o atributo rel -->
<div class="zoom-gallery">
		<a class="gallery_popup" href="http://2.bp.blogspot.com/-rUediYr7vOQ/Tdpq25pgBpI/AAAAAAAAAFU/4zBKBfSxN3Q/s1600/9874coelho1.jpg" data-info="Coelhinho" title="Coelhinho">
            <img src="http://2.bp.blogspot.com/-rUediYr7vOQ/Tdpq25pgBpI/AAAAAAAAAFU/4zBKBfSxN3Q/s1600/9874coelho1.jpg" alt="Coelhinho" class="thumb">
        </a>
        
        <a class="gallery_popup" href="http://animais.culturamix.com/blog/wp-content/gallery/As-Esp%C3%A9cies-de-Urso-Mais-Conhecidas-2/Esp%C3%A9cies-de-Urso-Mais-Conhecidas-4.jpg" data-info="Ao amanhecer" title="Ao amanhecer">
            <img src="http://animais.culturamix.com/blog/wp-content/gallery/As-Esp%C3%A9cies-de-Urso-Mais-Conhecidas-2/Esp%C3%A9cies-de-Urso-Mais-Conhecidas-4.jpg" alt="Ao amanhecer" class="thumb">
        </a>
</div>

Eu estou tentando fazer com que cada div.zoom-gallery abra somente as imagens relativas ao seu respectivo atributo rel.

Da forma que está, quando o lightbox é acionado, todas as imagens entram na galeria independente de existir o atributo rel ou não ou do conteúdo deste atributo. 

 

Eu estava testando aqui e por curiosidade eu copiei o script que aciona o lightbox pela classe zoom-gallery e mudei a classe acionadora para zoom-gallery-rel, é claro que somente as imagens que estiverem dentro do div.zoom-gallery-rel abrem, partindo disso aí, eu imaginei que se eu conseguisse, com javascript ou Jquery, mudar div.zoom-gallery para div.zoom-gallery-rel eu conseguiria isso, mas pra funcionar perfeito teria que fazer com que as classes se relacionassem com o atributo rel também.

Mas se eu conseguir fazer este relacionamento não vou precisar da classe zoom-gallery-rel, seria só relacionar a classe zoom-gallery com o atributo rel e pronto.

 

Está meio confuso, oque eu quero é mais ou menos oque acontece com o prettyPhoto que para agrupar as imagens em galerias basta atribuir um rel com prettyPhoto[galeria1].

Porque não usar o prettyPhoto?? Porque acho ele muito pesado, só isso. 

Tem como fazer isso que eu quero, se entenderam é claro.

 

o script que estou usando é esse aqui.

$(document).ready(function() {
	/*****************************************
		GALERIA DE IMAGENS
	******************************************/
	/*****************************************
		zoom-gallery
	******************************************/
	$('.zoom-gallery').magnificPopup({
		delegate: 'a.gallery_popup',
		type: 'image',
		closeOnContentClick: false,
		closeBtnInside: false,
		mainClass: 'mfp-with-zoom mfp-img-mobile',
		image: {
			verticalFit: true,
			titleSrc: function(item) {
				return item.el.attr('data-info');
			}
		},
		gallery: {
			enabled: true
		},
		zoom: {
			enabled: true,
			duration: 300, 
			opener: function(element) {
				return element.find('img');
			}
		}
		
	});
	
	/*****************************************
		zoom-gallery-rel
	******************************************/
	$('.zoom-gallery-rel').magnificPopup({
		delegate: 'a.gallery_popup',
		type: 'image',
		closeOnContentClick: false,
		closeBtnInside: false,
		mainClass: 'mfp-with-zoom mfp-img-mobile',
		image: {
			verticalFit: true,
			titleSrc: function(item) {				
				return item.el.attr('data-info');
			}
		},
		gallery: {
			enabled: true
		},
		zoom: {
			enabled: true,
			duration: 300, 
			opener: function(element) {
				return element.find('img');
			}
		}
		
	});

Desde já agradeço e me desculpem se escrevi demais e ficou muito texto pra ler, é que eu tento passar por escrito oque eu estou pensando.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Por enquanto só cheguei até aqui, conseguindo somente pegar o conteúdo do atributo rel, falta agora fazer o relacionamento deste conteúdo com o div pra identificar que é pra mostrar somente imagens que estejam dentro deste div.

$('.zoom-gallery').each(function() {
	var zoomGallery = $(this);
	zoomGallery.attr('data-rel');
	var relzoomGallery = zoomGallery.attr('data-rel');
	
	if(relzoomGallery == null){
		
		alert('Não existe relacionamento com conteúdo do atributo data-rel:\n '+ relzoomGallery);
	}
	else if(relzoomGallery){
		var relzoomGallery = $(this);
		//$(this).attr('class','zoom-gallery-rel');
		$(".zoom-gallery").addClass("zoom-gallery-rel");
		$(".zoom-gallery").removeClass("zoom-gallery");
        
			
			alert('Existe relacionamento com conteúdo do atributo data-rel:\n '+ relzoomGallery);
		
		}	
	
})

Estou seguindo a lógica de primeiro identificar o conteúdo do atributo rel, depois de acionar a galeria nas fotos dentro do div[rel].

Eu acho que vou chegar lá logo, se alguém ajudar vai ser mais rápido. 

Valeu.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tive algum avanço mas não a ponto de postar aqui, está difícil relacionar os atributos.

Estou precisando de um empurrãozinho. 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Primeiramente, hospedei temporariamente um exemplo do que eu já tenho neste link aqui.

link removido

Bom, não passei disso aqui,

$(document).ready(function() {
	$('*[data-rel]').each(function() {
		var dataRel = $(this);
		var conteudoRel = dataRel.attr('data-rel');
		
		if(conteudoRel == null || !conteudoRel){
			
			alert('Não existe classe '+ conteudoRel +' no div com data-rel');
			/*****************************************
				se não existir relacionamento
			******************************************/
			$('.zoom-gallery').magnificPopup({
				delegate: 'a.gallery_popup',
				type: 'image',
				closeOnContentClick: false,
				closeBtnInside: false,
				mainClass: 'mfp-with-zoom mfp-img-mobile',
				image: {
					verticalFit: true,
					titleSrc: function(item) {
						//return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">Link imagem</a>';
						return item.el.attr('data-info');
					}
				},
				gallery: {
					enabled: true
				},
				zoom: {
					enabled: true,
					duration: 300, // don't foget to change the duration also in CSS
					opener: function(element) {
						return element.find('img');
					}
				}
				
			});//$('.zoom-gallery').magnificPopup({
			/*****************************************
					//imagem com link automático
			******************************************/			
			
		}//if(conteudoRel == null || !conteudoRel){
		else if(conteudoRel){
			
			alert('Existe classe="'+ conteudoRel +'" no div com data-rel="'+ conteudoRel +'"');
			
			var ClassRel = '.'+ conteudoRel;
			$('[data-rel]').addClass(conteudoRel);
			
			$('.'+ conteudoRel).each(function() {
				/*****************************************
					se existir relacionamento
				******************************************/
				$(ClassRel).magnificPopup({
					delegate: 'a.gallery_popup',
					type: 'image',
					closeOnContentClick: false,
					closeBtnInside: false,
					mainClass: 'mfp-with-zoom mfp-img-mobile',
					image: {
						verticalFit: true,
						titleSrc: function(item) {
							//return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">Link imagem</a>';
							return item.el.attr('data-info');
						}
					},
					gallery: {
						enabled: true
					},
					zoom: {
						enabled: true,
						duration: 300, // don't foget to change the duration also in CSS
						opener: function(element) {
							return element.find('img');
						}
					}
					
				}); //$(ClassRel).magnificPopup({
				/*****************************************
					// imagem com link automático
				******************************************/
					
			})//$('.'+ conteudoRel).each(function() {
			
		} //else de if(conteudoRel == null){
		
	})//$('*[data-rel]').each(function() {

});

Modificação no html da galeria, retirei a classe zoom-gallery e estou adicionando dinamicamente uma classe com nome idêntico ao valor do atributo data-rel conforme script acima.

HTML modificado:

<!-- container com data-rel aguia -->
<div data-rel="aguia">
	<a class="gallery_popup" href="http://www.fundospaisagens.com/Imagens/aguia-numa-montanha-cheia-de-neve.jpg" rel="tooltip" data-info="O vôo nas montanhas geladas" title="O vôo nas montanhas geladas">
		<img src="http://www.fundospaisagens.com/Imagens/aguia-numa-montanha-cheia-de-neve.jpg" alt="O vôo nas montanhas geladas" class="thumb">
	</a>
                
	<a class="gallery_popup" href="https://4.bp.blogspot.com/-pYwZMgxXJ2k/V-kSJwhGOuI/AAAAAAAASHI/F0y5Y353NZcumIylBQQRxUXPu3btUcGygCLcB/s640/aguia.jpg" rel="tooltip" data-info="A visão da águia voando" title="A visão da águia voando">
		<img src="https://4.bp.blogspot.com/-pYwZMgxXJ2k/V-kSJwhGOuI/AAAAAAAASHI/F0y5Y353NZcumIylBQQRxUXPu3btUcGygCLcB/s640/aguia.jpg" alt="A visão da águia voando" class="thumb">
	</a>
</div>

<!-- container com data-rel carrocas -->
<div data-rel="carrocas">
	<a class="gallery_popup" href="http://www.travessiadasamericas.com.br/wp-content/uploads/2012/04/zCarro%C3%A7a-2.jpg" rel="tooltip" data-info="carroça com cockpit" title="carroça com cockpit">
		<img src="http://www.travessiadasamericas.com.br/wp-content/uploads/2012/04/zCarro%C3%A7a-2.jpg" alt="carroça com cockpit" class="thumb">
	</a>
                
	<a class="gallery_popup" href="https://www.listenandlearn.com.br/blog/wp-content/uploads/2014/09/George_Bowman_Hopetoun_2005_horse_driving.jpg" rel="tooltip" data-info="Carroça aberta" title="Carroça aberta">
		<img src="https://www.listenandlearn.com.br/blog/wp-content/uploads/2014/09/George_Bowman_Hopetoun_2005_horse_driving.jpg" alt="Carroça aberta" class="thumb">
	</a>
</div>

Consegui identificar quais div´s contém o atributo data-rel e também identificar o valor deste atributo e passar este valor para uma classe adicionada dinamicamente, mas oque está acontecendo é que sem um looping, ( acho eu ) o script está abrindo todas as imagens que estejam dentro de div´s com data-rel independente do valor, ele abre como se somente o primeiro valor existisse, no exemplo acima, temos o valor de data-rel do primeiro div como aguia e no segundo como carrocas, neste exemplo também temos duas imagens em cada div somando quatro imagens, o script está abrindo todas as quatro e não somente duas a cada container, sei disso porque tem um contador na galeria pra mostrar quantas imagens estão abrindo.
 

Compartilhar este post


Link para o post
Compartilhar em outros sites

RESOLVIDO

-------------------------------

Coisa boa, agora foi identificado o problema, galeria funcionando certinho.

o problema estava nesta linha aqui:

$('[data-rel]').addClass(conteudoRel);

//mudei para
data-rel.addClass(conteudoRel);

Mudei para a variável pois no início eu indico que a var dataRel = $(this);

$('*[data-rel]').each(function() {
        let dataRel = $(this);

e também troquei onde tinha a indicação de variável "var" por "let".

Um amigo me ajudou e me explicou que $('[data-rel]') neste caso é muito genérico e o script estava interpretando que era pra adicionar a classe com o valor do primeiro atributo data-rel em todos os div´s contendo data-rel, no caso, "aguia", explicou por alto que "let" não faz entrar no escopo global, foi oque eu entendi, resolvemos por whatsApp pois moramos distantes, eu ainda vou precisar de mais informações que ele disse que me dará quando estivermos juntos.
 

Precisei de ajuda nisso, não queria incomodar ele mas foi preciso, me matei 3 dias até tomar a iniciativa de pedir ajuda a ele pois aqui ninguém fez nenhum comentário, mas deixa quieto porque foi até bom, eu aprendi pra caramba estudando fóruns e pesquisando pela internet, aprendi um pouco de tudo, até do que nem precisava, com ele foi uma aula de uns 30 minutos, sim 30 minutos, o bastante pra ele ler, entender e me mostrar o erro, foi bastante aprendizado e vou aprender mais.

 

Até.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.