Insert items into a table using Jquery

Question

I have a form where I insert into the bank the sale and the sale items. When opening a particular sale, the items of that sale are displayed in a table. When I want to add a new item to this sale, my form becomes "crazy". Disappears from the screen the table and fields to insert new item and hangs the html, need to give a refresh to get back to work. Below is the code when I open and sell and displays the items from that sale and the code when I enter a new item from the sale and the table should be updated with the new item.

Code open sale (This is beauty)

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

Code to insert a new sale item (This gives problem)

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

And the function that is used in . done in the two functions above

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

The inserts and queries in the database are ok, the problem is just in time to display in the browser. html, jquery or whatever makes the form lose references. I try to display the source code the browser gives the message that I have to refresh the page to display. I believe that the problem is in the asymchronism of AJAX, I do not dominate very well. If any can help.

Answer 1

The function html of jquery reset everything inside the given element, ie delete everything and insert the code you passed by parameter.

tries to use the function append, this same, adds and does not clean everything before inserting:

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

Heed in your backend(php), take into account the return, ie try to return only the data, and in the front end, add html etc..

Suppose your request ajax to the file gravar_itenvenda.php, would return this:

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

On your front you’d do something like:

var msg = JSON.parse(msg); // converter JSON para objeto javascript
$("#divItensvenda").append('<div id="item">' + msg.id + ' | ' + msg.nome + ' | ' + msg.mensagem + '</div>');