1
votes

Modification et mise à jour de la table en direct à l'aide du problème Ajax

J'ai une table qui récupère des données de la base de données, elle a un bouton d'édition à chaque ligne.

Lorsque je clique sur le bouton "modifier", cette ligne est modifiable et le texte du bouton passe de "modifier" à "enregistrer ".

Jusqu'à ce point, je l'ai fait. Maintenant, je veux envoyer ces données de ligne modifiées dans mon fichier update.php en utilisant la méthode ajax ou post afin de pouvoir mettre à jour ma base de données.

Voici mon code:

$('.editbtn').click(function() {
    var $this = $(this);
    var tds = $this.closest('tr').find('td').filter(function() {
        return $(this).find('.editbtn').length === 0;
    });
    if ($this.html() === 'Edit') {
        $this.html('Save');
        tds.prop('contenteditable', true);
    } else {
        $this.html('Edit');
        tds.prop('contenteditable', false);
    }
});

code jquery:

  while($row = $result->fetch_assoc()) {
  echo "<tr>
    <td>" . $row["Id"]. "</td> 
    <td>" . $row["Receiving"] . "</td> 
    <td>". $row["Date"]. "</td> 
    <td>" . $row["Department"]. "</td>  
    <td>" . $row["D_type"]. "</td> 
    <td>" . $row["Org"]. "</td> 
     <td>" . $row["Org_type"]. "</td> 
  <td>" . $row["File_No"]. "</td> 
  <td>" . $row["Subject"]. "</td> 
  <td>" . $row["File_Name"]. "</td> 
    <td>" . $row["Status"]. "</td> 
  <td> <a class='btn btn-primary' href='MarkReceived.php?id=".$row["Id"]."'>Mark Received</a> </td>
  <td> <a class='btn btn-primary' href='Delete.php?id=".$row["Id"]."'>Delete</a> </td> 
    <td> <button type='button' class = 'editbtn' id=".$row["Id"]." >Edit</button> </td> 
</tr>";
}

php jquery ajax

3 commentaires

Quelle est ta question? Vous rencontrez un problème lors de l'envoi de vos données vers la page PHP? Ou voulez-vous savoir comment envoyer les données vers la page PHP ?. La dernière question a reçu une réponse plusieurs fois et vous devriez pouvoir trouver des informations si vous recherchez sur Google.

@ Umairarshad..simplement, vous pouvez faire comme lorsque vous cliquez sur enregistrer après modification, envoyez simplement ces données au fichier que vous voulez, en utilisant ce mot-clé, vous pouvez envoyer les données de ligne sur lesquelles vous avez cliqué sur enregistrer, c'est juste un moyen de fais ça

Avez-vous des problèmes sur la façon d'utiliser ajax?

3 Réponses :

0
votes

D'après ce que j'ai compris de votre question, vous essayez d'envoyer des données en un clic de sauvegarde en utilisant ajax, vous pouvez donc faire quelque chose comme ceci

$(".save").click(function(){  
          $.ajax({
              async: true,
                url : "Your URL",
                method : "POST",
                data : {
                     Id: currentlyEditId,
                     Receiving: currentlyEditReceiving,
                     Date:currentlyEditDate // and so on

                     },  
            });

Vous pouvez envoyer des données en utilisant ajax comme ceci

0 commentaires

0
votes

$('.editbtn').click(function() {
  var $this = $(this);
  var tds = $this.closest('tr').find('td').filter(function() {
      return $(this).find('.editbtn').length === 0;
  });
  if ($this.html() === 'Edit') {
      $this.html('Save');
      tds.prop('contenteditable', true);
  } else {
      $.ajax({
        type: 'POST',
        url: 'update.php',
        data: {//your data}
      }).success(function (data) {
         // request success, do what you want to do here
      }).error(function () {
         // request error
      });
      $this.html('Edit');
      tds.prop('contenteditable', false);
  }
});
You can do it like this. or you can just change the id of the button if it's edit or save to have a cleaner code and it will separate two different actions. then just use this ajax

0 commentaires

0
votes

$('.editbtn').click(function() {
  var $this = $(this);
  var tds = $this.closest('tr').find('td').filter(function() {
      return $(this).find('.editbtn').length === 0;
  });
  if ($this.html() === 'Edit') {
      $this.html('Save');
      tds.prop('contenteditable', true);
  } else {
      $this.html('Updating..');
      $this.attr('disabled', true);
      $.ajax({
        type: 'POST',
        url: 'update.php',
        data: {//your data}
      }).success(function (data) {
        $this.attr('disabled', false);
        $this.html('Edit');
            tds.prop('contenteditable', false);
         // request success, do what you want to do here
      }).error(function () {
         // request error
      });

  }

0 commentaires