Wie aktualisiert man eine Tabellenzeile mit jQuery Ajax?

Question

Ich habe eine Tabelle, die zwei Schaltflächen enthält, wo der Benutzer entweder genehmigen oder ablehnen kann. Ich benutze jQuery .post() Methode, um eine MySQL-Datenbank mit diesen Informationen zu aktualisieren und alles funktioniert gut. Gegenwärtig gibt PHP nur eine Textantwort zurück.

Jetzt möchte ich Ajax verwenden, um das Statusfeld in der Tabelle mit dieser neuen Information zu aktualisieren, nachdem die Schaltfläche geklickt wurde. Ich bin mir nicht sicher, wie ich am besten vorgehen soll. Soll die Tabelle mit jQuery .get() von der Serverseite geholt werden oder kann ich einfach das Statusfeld aktualisieren?

Die Tabelle

**Username Status    Change Status** 
Anderson no   (decline button) (Add button) 
julian  yes   (decline button) (Add button) 

Die jQuery

$(document).ready(function() { 
$("#myForm2").submit(function(e) { //If add btn pressed 
    e.preventDefault(); 
    var id = this.id; 


    var url = "process_ajax6.php"; 

    var formdata = $(this).serialize(); 
    formdata += "&btn=btn_add"; // added the btn 
    $.post(url, formdata, 
     function(data) { 

      $("#results").html(data); //Response 

     }); 
}); 

$("#myForm1").submit(function(e) { //If add btn pressed 
    e.preventDefault(); 
    var id = this.id; 
    var url = "process_ajax6.php"; 

    var formdata = $(this).serialize(); 
    formdata += "&btn=btn_remove"; // added the btn 
    $.post(url, formdata, 
     function(data) { 

      $("#results").html(data); //Response 
     }); 
    }); 

}); 

der HTML-Tabelle und Form

echo "<tr> 
<td> 
<a href=\"profile.php?user_id=".$collab_userid." \" 
<span class=\"label label-default\" id=\"tag\">".$collab_username."</span></a> 
</td> 
<td> 
".$status." 
</td> 

<td> 
<form id=\"myForm1\" class=\"myForm1\" action=\"\" method=\"post\" enctype=\"multipart/form-data\"> 
<input type=\"hidden\" name=\"user_id\" value=". $collab_userid." /> 
<input type=\"hidden\" name=\"id\" value=".$upload_id." /> 

    <button type=\"submit\" id=\"btn_remove\" class=\"btn_remove\" name= \"btn_remove\">Remove</button> 

</form> 
</td> 
<td> 
<form id=\"myForm2\" class=\"myForm2\" action=\"\" method=\"post\" enctype=\"multipart/form-data\"> 
<input type=\"hidden\" name=\"user_id\" value=". $collab_userid." /> 
<input type=\"hidden\" name=\"id\" value=".$upload_id." /> 

    <button type=\"submit\" id=\"btn_add\" class=\"btn_add\" name= \"btn_add\">Add</button> 

</form> 
</td> 

</tr>"; 

} 
"</tbody> 
</table>"; 

Die PHP

if ($btn=="btn_add") { 
$status="yes"; 

$stmt = $db_conx->prepare('UPDATE tbl_collab SET approved=? WHERE collab_userid=? AND tbl_upload_id=?'); 
$stmt->bind_param('sss',$status,$user_id,$id); 
$stmt->execute(); 
if($stmt){ 



     echo "<p>user approved</p>"; 


} 
} 
    elseif ($btn=="btn_remove"){ 

$status="no"; 

$stmt = $db_conx->prepare('UPDATE tbl_collab SET approved=? WHERE collab_userid=? AND tbl_upload_id=?'); 
$stmt->bind_param('sss',$status,$user_id,$id); 
$stmt->execute(); 
if($stmt){ 

    echo "<h1>user declined</h1>"; 


} 
} 

Answer 1

eine ID für Ihre Statusfeld in Tabelle wie folgt festgelegt:

<td id='status_1'> 
".$status." 
</td> 

, wenn Sie PHP-Code respone erhalten, wie Sie einen Text sagen Sie nur Statusfeld HTML-Wert wie folgt ändern:

$.post(url, formdata, 
    function(data) { 
     $("#status_1").html('Yes'); //Response 
    }); 

});

Answer 2

Ich würde empfehlen, als Antwort auf die Aktualisierungsabfrage den neuen Status vom Server zurückzugeben und ihn zu verwenden, um den Status am Frontend im $ .post Callback zu aktualisieren.

schnellste Weg, dies zu tun - ist Status der Antwort als dom-Element hinzuzufügen:

echo "<answer><h1>user declined</h1></answer><status>$status</status>; 

und in $ wie diese .post Rückruf Zugang zu empfangenen Daten:

$("#results").html($(data).find('answer').html()); //Response 
$("#whatever").html($(data).find('status').html()); //Status 

natürlich sollten sie td mit status by etw markieren, um darauf zuzugreifen