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

[joeythai 0]

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>

[Williams Duarte 431]

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);
      }
    });
  });
});