Ir para conteúdo

Arquivado

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

Thiago - Bulfaitelo

Montando div dinamico com jQuery

Recommended Posts

Olá amigos, estou batendo bastante cabeça aqui pra montar esse div do meu projeto da faculdade, vamos lá:

 

hoje eu tenho essa div montada em HTML:

<div class="col-lg-10 text-questionario">
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <span class="item-questionario" >31</span>  
                        <button type="button" class="btn btn-info btn-lg header-button">Esconder</button>
						<a class="fancybox fancybox.ajax" href="ajax.php?id=20">
                        	<button type="button" class="btn btn-default btn-lg header-button">Dicas</button>
                        </a>                        
                        
                    </h3>
                    <hr>
                </div>
                <div class="panel-body">
                    <div class="div-questao">                    	
                        <p>No programa do balé Parade, apresentado em 18 de maio de 1917, foi empregada publicamente, pela primeira vez, a palavra sur-realisme. Pablo Picasso desenhou o colagem de ações isoladas seguindo um estímulo musical.</p>                                              
                    </div>
                    <hr>
                    <div class="radio div-radio-questao">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
                            <b>A) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente. 
                        </label>
                    </div>
                    <div class="radio div-radio-questao">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
                            <b>A) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente. 
                        </label>
                    </div>
                    <div class="radio div-radio-questao">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
                            <b>B) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente. 
                        </label>
                    </div>
                    <div class="radio div-radio-questao">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
                            <b>B) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente. 
                        </label>
                    </div>
                    <div class="radio div-radio-questao">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
                            <b>D) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente. 
                        </label>
                    </div>
                    <div class="radio div-radio-questao">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
                            <b>E) </b> oxidação, pois a luz solar que incide sobre o tronco ativa fotoquimicamente a cal, que elimina os seres vivos do microambiente. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit animi esse at ullam voluptates qui accusamus corporis quis perferendis, explicabo, ad quod impedit unde aliquid dolore rerum sapiente suscipit.
                        </label>
                    </div>
                    
                </div>
                <hr>
            </div>
        </div >

Estou tentando melhorar ela e monta-la utilizando jQuery pra poder reduzir o trafego entre o servidor e tornar a aplicação mais maleável pois utilizarem Ajax para tal, mas isso já a segunda parte).

 

O meu foto é quero criar uma função a qual eu passe um vetor de dados e ela em sí venha montar a div em questão com os dados estruturados. Porem como já disse estou batendo legal cabeça com isso. o que progredi até agora foi isso:

    <script type="text/javascript">
    	$('<div/>', {
		    id: 'q_div-',
		    class: 'col-lg-10 text-questionario'
		}).appendTo( "#main-container" );
    	$('<div/>', {
		    id: 'q_div-painel',
		    class: 'painel'	   
		}).appendTo( "#q_div-" );
		$('<div/>', {		    
		    class: 'painel-heading'	   
		}).appendTo( "#q_div-painel" );
		$('<h3/>', {		    
		    class: 'panel-title'	   
		}).appendTo( ".painel-heading" );

		$('<span/>', {		    
		    class: 'item-questionario',
		    text: '33'	   
		}).appendTo( ".painel-title" );		
		$('<hr/>').appendTo( ".painel-heading" );

		jQuery('<div/>', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!'
}).appendTo('.painel-heading');

    </script>

Porem estou achando com uma enorme cara de Gambiarra.

 

então, Alguém poderia me ajudar nessa?

Compartilhar este post


Link para o post
Compartilhar em outros sites

[...] realmente essa é a melhor e mais otimizada forma ?

 

Eu nunca disse que é. Mas se funciona, não perca tempo tentando imaginar o que será que pode ser melhorado.

 

Refatoração espontânea só faz quem já conhece uma maneira melhor, não quem vai descobrir para poder implementar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

Eu nunca disse que é. Mas se funciona, não perca tempo tentando imaginar o que será que pode ser melhorado.

 

Refatoração espontânea só faz quem já conhece uma maneira melhor, não quem vai descobrir para poder implementar.

 

Eu entendo e concordo plenamente, eu estou progredindo com a função mas empaquei no seguinte problema:

hoje eu to montando uma função que toda vez que ela for chamada eu quero que ela insira uma div, chamando ela novamente eu insiro outra div a baixo e assim vai, até ai estou progredindo e finalmente entendendo, porem empaquei com o seguinte problema, quando chamo a função pela segunda vez uma das div internas está sendo inserida dentro de todas, olha o atual código:

	function createDivToQuest(valuesQuest) {

	// text-questionario, panel
	$('<div>',{
		class 		: 'col-lg-10 text-questionario',
		append : $('<div>',{
						class	: 'panel' 
		}),
		appendTo	: '.j_container'
	});
	// panel-heading
	$('<div>', {
		class		: 'panel-heading',
		text 		: 'painel', // apagar
		appendTo 	: '.panel'
	});	

Repare a segunda inserção de div a qual vai ser inserida dentro da classe panel toda vez que chamo essa função ela insere esse dados em todas as classes com panel e eu queria saber um jeito de não ocorrer isso;

 

tive a seguinte ideia, uma meio de verificar se a div da classe panel ja existe a div com a classe panel headimg porem eu não sei como realizar essa verificação ou o que procurar para estudar isso.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Finalmente terminei essa parte de criação de forma provavelmente usável.

 

Para uso e consulta futura segue o código:

function createDivToQuest(obQuestionario) {

		// text-questionario, panel
		$('<div>',{
			class 		: 'col-lg-10 text-questionario',
			append : $('<div>',{
							class	:   'panel',
							append  : 	$('<div>', {
											class : 'panel-heading'
										})
			}),		
			appendTo	: '.j_container',		
		});
		// panel-title
		$('<h3>', {
			class		: 'panel-title',
			append 		: [
								$('<span>', {
									class	: 'item-questionario',
									text 	: obQuestionario.numPergunta
								}),
								$('<button>', {
									type	: 'button',
									class	: 'btn btn-info btn-lg header-button',
									text 	: 'Esconder'
								}),
								$('<a>', {
									class	: 'fancybox fancybox.ajax',
									href	: 'ajax.php?id='+ obQuestionario.idPergunta,
									append  : $('<button>', {
													type	: 'button',
													class	: 'btn btn-default btn-lg header-button',
													text 	: 'Dicas'
											  })
								})						
						  ],					  
			appendTo	: $('.panel-heading').last()
		});	
		$('<hr/>', {appendTo : $('.panel-heading').last()});
		//  panel-body
		$('<div>', {
			class		: 'panel-body',
			append 		: $('<div>', {
								class	: 'div-questao',
								html 	: obQuestionario.textPergunta
						  }),
			appendTo	: $('.panel').last()
		});
		$('<hr/>', {appendTo : $('.div-questao').last()});

		// console.log(obQuestionario.opcoesPergunta);
		// Percorrenco as opções de pergunta.
		var selected = null;
		$.each(obQuestionario.opcoesPergunta, function(index, value){
			if(index == obQuestionario.opcaoSelecionadaPergunta){
				checked  = 'checked : "checked"';
			}else{
				checked = null;
			}
			// radio div-radio-questao
			$('<div>', {
				class		: 'radio div-radio-questao',
				append 		: $('<label>', {
									append 	: [
													$('<input>', {
														type	: 'radio',
														name	: 'optionsRadios['+ obQuestionario.idPergunta+']',
														value 	: index,
														checked
													}),
													$('<b>', {
														text 	: index+') '
													}),											
													value,											
											  ]							
							  }),		
				appendTo	: $('.panel-body').last()
			});

		});	
	} // Fim função createDiv...

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • 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 juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • 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>
    • Por babylon
      Olá galera tudo bem?
      Deixa eu perguntar, estava mexendo no meu site e queria adicionar em html essa tabela porem esta dando erro pois fica assim:
       

      Porem gostaria que ficasse assim:

      Segue o código da tabela:
      <center><table border="0">
          <tr>
      <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Bicicleta<br> <font color="#0092df">..</font>Track Bikes<br> <font color="#0092df">..</font>Aro 29 TKS</b></a></span><br><br><font size="5"><center><span style="background-color: #A1CD44">DE:</span></font> <br><font size="5"><s>R$ 1.999,99</center></font></s> </td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itembicicleta.jpg"><br><font size="5"><center><span style="background-color: #A1CD44">COM - 60%:</span></font> <br><font size="5">1.199,99</font></center></a></td>
             <td><font color="#ffffff">....</font></td>
              <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Monitor 24"<br> <font color="#0092df">..</font>Samsung<font color="#0092df">aa.aa</font><br> <font color="#0092df">..</font>1ms 144hz</b></a></span></center></td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itemmonitor.jpg"></a></td>
          </tr>
          </table></center>
      O que estaria errado, pois não sei como colocar nessa tabela outro fundo de outra cor, veja que usei td bgcolor="#0092df" para o azul escuro mas não sei como usaria pro "#e4f1fb" para o fundo ficar de azul claro em baixo bem como não ficou correto em altura o "DE:" com o "COM - 60%:".
      Bom é isso, obg.


    • Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
×

Informação importante

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