Inserting items into a table using Jquery

Question

Inserting items into a table using Jquery

Navigation

#1 by (0 votes)

0

I have a form where I enter in the bank the sale and the items of the sale. When opening a particular sale, the items in that sale are then displayed in a table. When I want to add a new item to this sale, my form gets "stale." It disappears from the screen the table and the fields to insert new item and it blocks the html, I need to give a refresh to return to work. Below is the code for when I open and sell and displays the items of this sale and the code when I insert a new item from the sale and the table should be updated with the new item.

Open sales code (That's 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 enter a new sales 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 above functions

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 even when it is displayed in the browser. The html, jquery or whatever does that causes the form to miss the references. I try to display the source code the browser gives the message that I have to refresh the page to display. I believe the problem lies in the AJAX assymetry, I do not master it very well. If anyone can help.

javascript jquery ajax

asked by anonymous 11.01.2018 / 21:22

1 answer

How to change an attribute in a list of objects and write this list in a file node.js / receiver.js

score 0 · Answer 1

The html function of jquery resets everything within the given element, ie it erases everything and inserts the code you passed by parameter.

try to use the append function, it adds and does not clean everything before inserting :

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

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

Assuming your ajax request to the file gravar_itenvenda.php , returned this:

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

In your frontend you would 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>');