Reload php page using ajax with updated data

Question

I use the Ajax code to do a post and update a record within the database. After that I wanted to load the page again without reloading the page. It refers to a product delivery screen. When I click on the delivery button a label with the situation of the product shows the text "Open" and after I click it should show "Delivered". The database update process works. So I would just like to change this situation text without refresh. There are ways to do this?

Ajax code:

$(".tabela-detalhes").on("click","#botao-entrega-volume",realizaEntrega);

function realizaEntrega() {
  event.preventDefault();
  var compra = $(this).parent().parent().find("#compra").val();
  var sequencia = $(this).parent().parent().find("#sequencia").val();
  var volume = $(this).parent().parent().find("#volume").val();
  var dados = {
    compra:compra,
    sequencia:sequencia,
    volume:volume
  };

  $(".entrega-volume").attr("name","entrega-volume").attr("value",JSON.stringify(dados));

  $.post("controle/compras-volume-entrega.php",dados);    
}

Answer 1

In $.post, the third parameter is a callback, which will run after the request receives a reply

Try something similar to the code below:

$.post("controle/compras-volume-entrega.php", dados, function(response){
    //altera o texto.
    console.log(response); //irá imprimir no console o retorno da requisição
});  

Answer 2

There are some problems I could detect in your code:

• The event as a function argument:

  function realizaEntrega(event) {

Works without? In some browsers they work (Chrome and Opera, for example), but not in Firefox, as addressed in this answer.

• How to select id’s

It makes no sense to seek an id. As discussed in this topic, an id must be unique, and if it is unique, there is no need to fetch it within elements. Just access it directly with $("#campo").

You’re probably generating a list of elements with the same id and you’re searching for those id’s relative to the button you clicked. Does it work? It even works, but it’s wrong. One thing that works doesn’t mean it’s right. The correct is to exchange id for class, then it would be correct and would not change the functionality of your code. Just change the # for .:

$(this).parent().parent().find(".compra").val();

Regarding changing the text of the element, as mentioned by Marcos, use the callback of the $.post to find the element and change the text:

$.post("controle/compras-volume-entrega.php",dados, function(data){
    var elemento = BUSCAR O ELEMENTO;
    elemento.text("Entregue");
});

But it is good to send a PHP return to know that everything worked, for example, a echo "ok";. This is because, if something goes wrong, the callback will be executed anyway, and you will always think that everything went right. So:

$.post("controle/compras-volume-entrega.php",dados, function(data){

    if(data.trim() == "ok"){
       var elemento = BUSCAR O ELEMENTO;
       elemento.text("Entregue");
    }

});

In place of BUSCAR O ELEMENTO you should select the element that contains the text, either by class or something else. Since you didn’t post the HTML in the question, you can’t tell how it is.