0

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?

4
  • Você está usando apenas HTML e Javascript? Não tem nenhuma linguagem no lado Servidor? 27/06/2017 às 21:52
  • Estou usando PHP também. 27/06/2017 às 22:02
  • Então, você pode escrever todo esse código Javascript no PHP e fazer uma chamada nos que for utilizar. Vou colocar o exemplo na resposta. 27/06/2017 às 22:29
  • na verdade existe include de javascript também mas é com jquery, e eu gosto de utilizar api.jquery.com/jquery.getscript
    – flourigh
    28/06/2017 às 1:47

1 Resposta 1

1

O código em questão você pode escrever no PHP e então incluir o Script nos outros que for utilizar as funções.

Exemplo: funcoes.php

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

Então, para chamar o script use o seguinte código:

<?php require_once 'funcoes.php'; ?>
4
  • Intendi, se eu tivesse o script direto na pagina não teria problema, pois fiz um teste pequeno. Mas no caso eu tenho todo meu script em uma folha JS no qual eu trago para minha pagina por <script src="../js/functionsTrabalhos.js" type="text/javascript"></script> e la na folha JS esse require_once não funciona! 27/06/2017 às 23:01
  • Bom, você poderia então separar o código que é mais utilizado e colocá-lo em outro arquivo ../js/js2.js e a chamada você pode fazer assim: var js2 = document.createElement('script'); js2.src = '../js/js2.js'; document.head.appendChild(js2); 27/06/2017 às 23:17
  • Deu certo agora Carlos, obrigado mesmo! 27/06/2017 às 23:33
  • Por nada amigo. 28/06/2017 às 11:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .