0

Tenho uma formulário onde insiro no banco a venda e os itens da venda. Ao abrir uma determinada venda, logo é exibido em uma tabela os itens dessa venda. Quando desejo adicionar um novo item a essa venda, meu formulário fica "doidão". Desaparece da tela a tabela e os campos para inserir novo item e trava o html, preciso dar um refresh para voltar a funcionar. Segue abaixo o código de quando eu abro e venda e exibe os itens dessa venda e o código de quando insiro um novo item da venda e a tabela deve ser atualizada com o novo item.

Código abrir venda (Esse tá beleza)

function abrirVenda() {
    var idvenda = $("#idVenda").val();
    var page = 'abrir_venda.php';
    $.ajax({
        type: 'POST',
        dataType: 'html',
        url: page,
        data: {idvenda: idvenda},
        success: function (msg) {
            msg = $.parseJSON(msg);
            if (msg.sucesso == true) {
                // exibe o formulário para adicionar novos itens dessa venda
                $('#itensVenda').css("display", "block");
            }            
        },
    }).done(function () {
        buscarItensDaVenda();
    });
}
$(document).on("click","#abrirVenda",function(e){
//$("#abrirVenda").click(function () {
    abrirVenda();
});

Código para inserir um novo item da venda (Esse dá problema)

function gravarItenVenda() {
    var idvenda  = $("#idvenda").val();
    var idproduto = $("#idproduto").val();
    var preco = $("#preco").val();
    var qtde = $("#qtde").val();
    var subtotal = $("#subtotal").val();
    var page = 'gravar_itenvenda.php';
    $.ajax({
        type: 'POST',
        dataType: 'html',
        url: page,
        async: false,
        data: {idvenda:idvenda, idproduto:idproduto, preco:preco, qtde:qtde, subtotal:subtotal},
        success: function (msg) {
            msg = $.parseJSON(msg);
            if(msg.sucesso == true){
                alert(msg.mensagem);
            } else {
                alert(msg.menssagem);
            }
        },
    }).done(function () {
        buscarItensDaVenda();
    });
}

$(document).on("click","#additen",function(e){
//$("#additen").click(function (){
    gravarItenVenda()
});

E a função que é usado em .done nas duas funções acima

function buscarItensDaVenda(){
    var idvenda = $('#idVenda').val();
    var page = "busca_itensvenda.php";
    $.ajax({
        type: 'POST',
        dataType: 'html',
        async: false,
        url: page,
        data: {idvenda:idvenda},
        success: function (msg) {
            // arqui eu exibo em uma div o resultado da consulta dos itens da venda
            $("#divItensvenda").html(msg)
        }
    });
}

As inserções e as consultas no banco estão ok, o problema está mesmo na hora de exibir no browser. O html, jquery ou sei lá o que faz com que o formulário perca as referencias. Tento exibir o código fonte o navegador dá a mensagem que tenho que dar um refresh na página para exibir. Acredito que o problema esteja no assicronismo do AJAX, não domino muito bem. Se algum puder ajudar.

3
  • Quando manda gravar, no retorno do Ajax está exibindo o alert em alert(msg.mensagem);?
    – Meu ovo
    11/01/2018 às 20:45
  • coloquei o 'async:false' para entrar em 'success' e exibir o 'alert(msg.mensagem);' se deixar como default não entra no 'success', nem no 'error' e nem no'complete'. 11/01/2018 às 20:55
  • Notei uma diferença em $("#idvenda").val() na função gravarItenVenda... o "v" está minúsculo, enquanto que nas outras funções está maiúsculo: $("#idVenda").val()....
    – Meu ovo
    11/01/2018 às 21:48

1 Resposta 1

1

A função html do jquery reseta tudo dentro do elemento dado, ou seja apaga tudo e insere o codigo que passaste por parâmetro.

tenta usar a função append, esta mesma, adiciona e não limpa tudo antes de inserir:

$("#divItensvenda").append(msg);

Atenção no teu backend(php), tem em conta o retorno, ou seja tenta retornar somente os dados, e no front end, adiciona html etc..

Supondo que o tua requisição ajax ao arquivo gravar_itenvenda.php, retornava isto:

$item = ['id' => 2, 'nome' => 'Relogio', 'mensagem' => 'boa qualidade'];
die(json_encode($item));
// Return irá ser: {"id":2,"nome":"Relogio","mensagem":"boa qualidade"}

No teu frontend irias fazer algo do tipo:

var msg = JSON.parse(msg); // converter JSON para objeto javascript
$("#divItensvenda").append('<div id="item">' + msg.id + ' | ' + msg.nome + ' | ' + msg.mensagem + '</div>');
2
  • Já tentei o append, mas não deu certo. Sobre adicionar o html da tabela somente no front-end, tem algum problema em deixa no back-end? 11/01/2018 às 20:36
  • Resposta editada, não é aconselhável, pois não faz muito sentido se no teu front-end consegues faze-lo, PHP = trata / adiciona informação, JAVASCRIPT = busca / monta / organiza informação, isto é a minha opinião entanto, pois tento separar html de php assim formando um back-end limpo e estruturado
    – 13dev
    11/01/2018 às 20:41

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 .