Jump to content
joeythai

Não consigo adicionar um valor de forma dinâmica

Recommended Posts

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>

Share this post


Link to post
Share on other sites

Seu código está bastante extenso, tornando a análise um tanto complexa. Além disso, não identifiquei em nenhum ponto específico a execução de uma chamada POST que envie os dados atualizados através de data: {data: JSON.stringify(arrayData)}. É fundamental incluir essa chamada AJAX após a atualização dos dados para garantir que eles sejam enviados corretamente ao seu backend.

Exemplo:
 

$.ajax({
  type: "POST",
  url: "<URL_PARA_ENVIO_DOS_DADOS>",
  data: {data: JSON.stringify(arrayData)},
  success: function(response) {
    // Trate a resposta aqui
  },
  error: function(xhr, status, error) {
    // Trate erros aqui
  }
});


Usei um formatador online, para tentar pelo menos entender teu código, então faça um teste de evento de click:

Lembrando que tu é o pai da criança, só você e Deus sabe oque este código faz, só estou lhe dando um exemplo, não é solução final.

$(document).ready(function () {
  $('#apply_removal').on('click', function () {
    let percentage = $('#percentage').val(); // Coleta o percentual

    if (!percentage) {
      alert('Por favor, insira um percentual válido.');
      return;
    }

    let arrayData = []; // Inicializa o array

    $('.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) * (1 + parseFloat(percentage) / 100);
      let removal_motorcycle = parseFloat(moto) * (1 + parseFloat(percentage) / 100);
      let removal_tuck = parseFloat(caminhao) * (1 + parseFloat(percentage) / 100);
      
      // Atualiza os campos na tabela
      $(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));
      
      // Adiciona os dados atualizados ao array
      arrayData.push({
        removal_vehicle,
        removal_motorcycle,
        removal_tuck
      });
    });

    // Faz a chamada AJAX para enviar ao backend
    $.ajax({
      type: "POST",
      url: "<URL_PARA_ENVIO_DOS_DADOS>", // Substitua pela URL correta do seu backend
      data: JSON.stringify({data: arrayData}), // Certifique-se de que seu backend espera receber um JSON
      contentType: "application/json", // Informa ao servidor que o tipo de conteúdo é JSON
      success: function(response) {
        console.log('Dados enviados com sucesso!', response);
      },
      error: function(xhr, status, error) {
        console.error('Erro ao enviar dados:', error);
      }
    });
  });
});

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • By 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>  
    • By 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?
    • By 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
       
       
       
    • By 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".
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.