How to change image when changing status in Mysql database without refresh with jquery

Asked

Viewed 197 times

0

I have the following listing:

inserir a descrição da imagem aqui

How would I make it so that by clicking on the exclamation icon, I changed it to the check icon and vice versa and changed the status in the database as well? PHP/Mysql code I know how to do, but jquery I don’t get much. Since the status is coming from BD, the code is like this:

$sql = mysqli_query($this->conexao,"SELECT * FROM documentos");

while($peListar = mysqli_fetch_object($sql)){    

$statusDoc = ($peListar->StatusDocumentos == "A")?"<span style='color: red'><i class=\"fas fa-exclamation-circle fa-lg\" id=\"inativo\"></i></span>":"<span style='color: green'><i class=\"fas fa-check-circle fa-lg\" id=\"ativo\"></i></span>";
    echo $statusDoc;

}
jquery

  • With which id or class the icons are coming from the bank?

  • I’m sorry Jorge. I couldn’t understand your question. You mean the bank id?

  • The icons have classe? Or some other attribute to be identified?

  • No. Only the fountain itself

  • In fact you don’t even need Jquery in this case, just call the action that is updating the button that has the icon

  • If you want I’ll write an answer showing the logic.

  • Right. But I wouldn’t want you to refresh the page.

  • You attentive me to a detail that may have seemed vague. I changed my title.

  • To do with ajax, you will need to turn the return of your database showing the status in json to be able to catch the return with jquery and change the icon

  • Right. I just don’t get a lot of jquery and Ajax. Could you show me an example?

  • You are already encondando the bank result in a json in his php? If yes, post the code of your action and how the result is being shown on the page.

  • It’s in pure PHP, using the traditional mode. I’m not using json.

  • To perform the ajax you will need to turn the return into json, because the method needs to fetch the status in your file php to make the validation, understands?

  • I understand.. but I don’t know how to do that. Could you show me an example that changes my code? I altered my post and put an excerpt of how he is.

  • Post the code of your action. Basically you will need the function json_encode

  • I’m not actually using forms to search for this result. It’s a listing method in the document view.

  • Put the listing code in the question to make it easier for those who want to help you!

Show 12 more comments

2 answers

0

The way it did is almost there, however you are still reloading the page with window.location.reload. In your PHP file you can make the logic return the current status, as it did in the list, something like:

$query = mysqli_query($conexao,"UPDATE pe_documentos_pendentes SET StatusDocumentos = '".$_POST["status"]."' WHERE IdDocumentos = '".$_POST["key"]."';");
$count = mysql_num_rows($query);

if($count >= 1) {
 $response['success'] = true;
 echo json_encode($response);
}

And in Jquery

$.post('alterar.php', {key: posts, status: status}, function(retorno){
  //você possui o retorno da sua página alterar.php aqui, 
  data = $.parseJSON(retorno);
  alert(data.response);    
  //o que precisa fazer é apenas manipular essa resposta, 
  //criar seu ícone, substituir o atual no DOM, e fazer com que esse novo
  //ícone passe por esse mesmo evento de post
});

0

I managed to do it, but I don’t know if it’s the right way and feel free to correct me ;) Follow below:

Listing coming from PHP

<?php
...
$sql = mysqli_query($conexao,"SELECT * FROM pe_documentos_pendentes");
while($peListar = mysqli_fetch_object($sql)){
      $statusDoc = ($peListar->StatusDocumentos == "A")?"<a href='#!' class='alterar' data-id='".$peListar->IdDocumentos."' data-status='E' style='color: red'><i class=\"fas fa-exclamation-circle fa-lg\" id=\"inativo\"></i></span>":"<a href='#!' class='alterar' data-id='".$peListar->IdDocumentos."' data-status='A' style='color: green'><i class=\"fas fa-check-circle fa-lg\" id=\"ativo\"></i></a>";
      echo $statusDoc."<br>";
 }
...
?>

In Jquery, I did it that way:

<script>
  $(document).ready(function(){
    $(".alterar").click(function(){
      var posts = $(this).attr('data-id');
      var status = $(this).attr('data-status');
      $.post('alterar.php', {key: posts, status: status}, function(retorno){
             window.location.reload(true);
       });
    });
  });
</script>

On the change.php page:

mysqli_query($conexao,"UPDATE pe_documentos_pendentes SET StatusDocumentos = '".$_POST["status"]."' WHERE IdDocumentos = '".$_POST["key"]."';");

Browser other questions tagged jquery

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