Reload php page using ajax with updated data

Asked

Viewed 281 times

1

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);    
}
  • If an id is unique, it makes no sense to use $(this).parent().parent().find("#compra").val(). It was just enough $("#compra").val(). I believe your HTML is invalid.

  • I think your comment has nothing to do with the question, isn’t it? Or I didn’t understand. This code works, I already use in the application. The id is generated dynamically within several rows in a table. Ai I have to know the values of some inputs that are a few levels up in table code.

  • I think you don’t understand rs... Look, an id should be unique on the page. For example, on the page there can be no other id #compra, then it makes no sense to search for Parent() to find an id if it can be found directly with $("#compra").

2 answers

2

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
});  
  • But in the php code I insert in the database I have to do some return code? Because basically I wanted to reload the data from the page without giving refresh.

  • Your PHP code must have a TRUE or FALSE return. Or only 1 or 2. In javascript the Response variable will contain the value that came from PHP.

1


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.

  • I’ll try using callback. As for the id question, I think it’s just the semantics that’s wrong, isn’t it? I just didn’t want to touch it, because it’s been like this for a long time and it works. But I’ll change it here to make it right. Thanks.

  • It’s better to leave and do things according to specifications so you don’t have a headache in the future and get worse to fix. After all, it’s so simple rss.. just replace # by dot.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.