Question

Right now, I am working on a web project in PHP and for the next phase, we’re going to change our original post back option to AJAX. Last week, we implemented a threaded comments page which we sent comments into mySQL with php, this week we want that to happen asynchronously instead of using postbacks… i’m kinda confused how to use this

we are expected to use the jQuery library and obviously to use AJAX. I have used AJAX.net toolkit, but that wasnt much AJAX, so i’m kind of confused how to make the transition. heres some code if you want it…

 if($_POST){

//Connection string to get to database
$host = 'localhost'; 
$user = 'user'; 
$password = 'pw'; 
$dbh = new mysqli($localhost, $user, $password, "database schema name");

//Prpared statement for user inpur, prevent sql-injection attacks
$isEntered = $_POST['txt_isEntered'];
$stmt = $dbh->prepare("INSERT INTO tbl_Comment (comment, project_title, parent_comment_id) VALUES (? , ? , ?)");
$stmt->bind_param('ssi', $prevComment, $prevAssignment, $parentID);

//if this is for parent level comments
if(strcmp($isEntered, 'yes') == 0){

    $prevComment = $_POST['txt_comment'];
    $prevAssignment = $_POST['txt_assignment'];
    $parentID = $_POST['txt_pid'];


    $stmt->execute();
}
    if(strcmp($isEntered, 'nested') == 0){

    $prevComment = $_POST['txt_nestedComment'];     

    $prevAssignment = $_POST['txt_assignment'];
    $parentID = $_POST['txt_pid'];

    $stmt->execute();

}

 //redirect page 
 header("Location: viewComments.php");
 exit();

}

this is at the beginning of the page and uses a post, redirect, refresh method (in case if users refresh the page, it does not repeat insert command since it will redirect itself)

heres the code that gets info…

            echo "<form action=\"viewComments.php\" method = \"post\">";
                echo "<textarea rows='3' cols='20' name='txt_nestedComment'>Enter comment here...</textarea>" . "</br>";
                echo "<input tpye = 'text' name = 'txt_assignment' value = $assignment class = 'hidden'>";
                echo "<input tpye = 'text' name = 'txt_pid' value = $cid class = 'hidden'>";
                echo "<input tpye = 'text' name = 'txt_isEntered' value = 'nested' class = 'hidden'>";
        echo "<button type='submit'>Submit Comment</button>" ;
        echo "</form>";

when the user presses the insert button, the page redirects itself and goes to the previous code, and then inserts stuff. any ideas where to start converting this into AJAX? If you need more code, please ask! Thanks!

Answer 1

With Ajax you get get rid of the form. You will be sending the values to a script via javascript.

$.ajax({
  type: "POST",
  url: "addcomment.php",
  data: "assignment=" + $('txt_assignment').val() + "&pid=" + $('txt_pid').val() + "Boston",
  success: function(newTableRowCodeFromServer){
    $("#commmentsTable").append(newTableRowCodeFromServer);
  } 
});

This will send and proces the data then the addComments will result in response that generates the row to insert at the end of the current table or comment display.