Tenho uma dashboard onde quando algum valor ou informação é atualizada, automaticamente os outros valores são recalculados sem refresh.
Um exemplo é que ao adicionar um gasto na tabela, ele precisa recalcular todos os gastos, atualizar o BD, atualizar varias outras informações como gastos totais, saldo...Enfim eu ja tenho todos isso, mas por ex quando a pessoa edita apenas o produto, la preciso colocar todo aquele código novamente, pq tudo precisa ser atualizado. Meu JS esta muito grande pq são muitas ações na mesma pagina.
Pesquisei e vi que algo parecido com o inlude do PHP não poderia ser usado nesse caso, mas teria como fazer algo tipo colocar tudo o codigo de atualização das informaçoes dentro de uma função tipo
$(function() { });
Esse é um trecho de duas açoes distintas que começam diferentes mas se o ajax retornar nenhum erro, ambos precisam fazer a mesma função "atualizar todos os dados".
$(document).on('click','#addCom', function (){
var data = $("#dataAddCom").val();
var funcionario = $("#funcionarioAddCom").val();
var valor = $("#valorRecAddCom").val();
var idJob = $("#idJob").html();
if(data == '' || funcionario == '' || valor == ''){
$.notify({
message: 'Preencha todos os campos!',
},{
// settings
element: 'body',
position: null,
type: "danger",
placement: {
from: "top",
align: "center"
}
});
}else{
$.ajax({
type : 'POST',
url : '../conexao/addDespesa.php',
data : { cadastraCom:"1", data: data, funcionario: funcionario, valor: valor, idJob: idJob },
dataType: 'json',
success : function(retorno){
if(retorno.erro == 0){
**Varias funções que atualizam os dados**
}else{
}
});
}
});
Outra ação(editar).
$(document).on('click','#boxCom .save-edit', function (){
var idCom = $(this).closest('.center').siblings('.id-despesa').text();
var data = $(this).closest('.center').siblings('.data-despesa');
var funcionario = $(this).closest('.center').siblings('.funcionario-despesa');
var valorRep = $(this).closest('.center').siblings('.valor-rep');
var idJob = $("#idJob").html();
var dataText = data.find('.temp input').val();
var funcionarioText = funcionario.find('.temp select').val();
var valorRepText = valorRep.find('.temp input').val();
var boxOrig = $(this).closest('.actions').find('.orig');
var boxTemp = $(this).closest('.actions').find('.temp');
if(dataText == '' || funcionarioText == '' || valorRepText == ''){
$.notify({
message: 'Preencha todos os campos!',
},{
// settings
element: 'body',
position: null,
type: "danger",
placement: {
from: "top",
align: "center"
}
});
}else{
//alert(idCom+dataText+funcionarioText+valorRepText)
$.ajax({
type : 'POST',
url : '../conexao/addDespesa.php',
data : { editCom:"1", dataEdit: dataText, funcionario: funcionarioText, valorRep: valorRepText, idJob: idJob, id: idCom },
dataType: 'json',
success : function(retorno){
if(retorno.erro == 0){
**Varias funções que atualizam os dados (novamente)**
}else{
}
});
}
});
A maioria dos códigos que uso para a atualização são dessa forma.
var valorComSoma = 0;
$('#boxCom .valor-rep').each(function (i) {
valorComSoma = parseFloat($(this).text().replace(/[^0-9]/g, '')) + valorComSoma;});
$("#boxValorTotal1").text(numberParaDolar(valorDespesaSoma/100));
$(function () {
var totalRec = 0;
$('#boxCom tr').each(function () {
var funcDespesa = $(this).find('.funcionario-despesa > p').text().trim();
if (funcDespesa === 'Cesar') {
totalRec += parseInt($(this).find('.valor-rep > p').text().replace(/[^0-9]/g, '').trim());
}
});
if (resultadoFinalSoma > lucroEsperado) {
var saldoTotal = lucroEsperado;
} else {
var saldoTotal = resultadoFinalSoma;
}
var comisao = saldoTotal * 0.45;
var saldo = comisao - totalRec;
$("#saldoComCesar").text(numberParaDolar(saldo / 100));
});
Teria como colocar todo o código de atualização dentro de uma função, e depois apenas chamá-la?