Reload php page using ajax with updated data

Question

Reload php page using ajax with updated data

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I use the ajax code to make a post and update a record inside the database. After that I wanted to load the page again without reloading the page. 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 it should show "Delivered". The update process in the database works. So I would just like to change this text of the situation without refresh. Can you do that?

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

php jquery ajax

asked by anonymous 12.12.2018 / 16:25

2 answers

2

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

Try something like 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
});

12.12.2018 / 16:36

Error when querying EntityFramework Try-catch in loop causing error

score 1 · Accepted Answer

There are some problems that I could detect in your code:

Missing event as function argument:

function realizaEntrega(event) {

Does it work without? Some browsers work (Chrome and Opera, for example), but not in Firefox, as approached in this answer .

How to select the id's

It does not make sense to search for an id. As addressed 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 are probably generating a list of elements with the same id and are looking for these id's in relation to the clicked button. It works? It even works, but it's wrong. One thing to work does not mean it's right. The correct is to change id by class, then it would be correct and would not change the functionality of your code. Just change # to . :

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

In order to change the element text, as mentioned in Mark, use the $.post callback to search for 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's good to send a PHP return to find out that everything worked, for example, a echo "ok"; . That's because, if you have given something wrong, the callback will still be executed, and you will always find that everything went well. Then:

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

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

});

Instead of BUSCAR O ELEMENTO you must select the element that contains the text, either by class or something else. Since you did not post the HTML in the question, you can not tell how it is.