I googled for it but did not understand . I am working on a QA forum like stackoverflow . I can write and handle PHP codes but the JS is challange for me .
As you know that , every question on forum contain an comment box where user can comment.
I have worked for single textarea . It's working cool but when I create second textarea for second answer it doesn't work. Everytime only first textarea works .
Index.php
<style>
body{width:40%;}
.message-box{margin-bottom:20px;border-top:#F0F0F0 2px solid;background:#FAF8F8;padding:10px;}
.btnEditAction{background-color:#2FC332;border:0;padding:2px 10px;color:#FFF;}
.btnDeleteAction{background-color:#D60202;border:0;padding:2px 10px;color:#FFF;margin-bottom:15px;}
#btnAddAction{background-color:#09F;border:0;padding:5px 10px;color:#FFF;}
</style>
<?php
require_once("config.php");
?>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function showEditBox(editobj,id) {
$('#frmAdd').hide();
$(editobj).prop('disabled','true');
var currentMessage = $("#message_" + id + " .message-content").html();
var editMarkUp = '<textarea rows="5" cols="80" id="txtmessage_'+id+'">'+currentMessage+'</textarea><button name="ok" onClick="callCrudAction('edit','+id+')">Save</button><button name="cancel" onClick="cancelEdit(''+currentMessage+'','+id+')">Cancel</button>';
$("#message_" + id + " .message-content").html(editMarkUp);
}
function cancelEdit(message,id) {
$("#message_" + id + " .message-content").html(message);
$('#frmAdd').show();
}
function callCrudAction(action,id) {
$("#loaderIcon").show();
var queryString;
switch(action) {
case "add":
//get closest comment list box
var selector = $(id).closest(".comment-list-box")
//get text area and post id values
var txtmessage = selector.find(".txtmessage").val()
var postid = selector.find(".postid").val()
console.log(txtmessage + " --" + postid)
queryString = 'action=' + action+ '&txtmessage=' + txtmessage+'&postid='+ postid;
break;
case "edit":
queryString = 'action='+action+'&message_id='+ id + '&txtmessage='+ $("#txtmessage_"+id).val();
break;
case "delete":
queryString = 'action='+action+'&message_id='+ id;
break;
}
jQuery.ajax({
url: "crud_action.php",
data:queryString,
type: "POST",
success:function(data){
switch(action) {
case "add":
$(".comment-list-box").append(data);
//selector.append(data);
//empty the textareas
break;
case "edit":
$("#message_" + id + " .message-content").html(data);
$('#frmAdd').show();
$("#message_"+id+" .btnEditAction").prop('disabled','');
break;
case "delete":
$('#message_'+id).fadeOut();
break;
}
$("#txtmessage").val('');
$("#postid").val('');
$("#loaderIcon").hide();
},
error:function (){}
});
}
function commentdh() {
$("#cbd").show();
$("#cbd1").show();
}
</script>
<?php $res = mysqli_query($conn,"SELECT * FROM comment where postid=119"); ?>
<div class="form_style">
<div class="comment-list-box">
<div id="frmAdd"><textarea name="txtmessage" class="txtmessage" cols="80" rows="2"></textarea>
<input type="hidden" value="119" name="postid" class="postid">
<p><button id="btnAddAction" name="submit" onClick="callCrudAction('add',this)">Add</button></p>
</div>
<img src="LoaderIcon.gif" id="loaderIcon" style="display:none" />
</div>
<?php
if(!empty($res)) {
while($comments=mysqli_fetch_array($res)) {
?>
<div class="message-box" id="message_<?php echo $comments['id'];?>">
<div class="message-content"><?php echo $comments['message']; ?></div>
<div>
<button class="btnEditAction" name="edit" onClick="showEditBox(this,<?php echo $comments['id']; ?>)">Edit</button>
<button class="btnDeleteAction" name="delete" onClick="callCrudAction('delete',<?php echo $comments['id']; ?>)">Delete</button>
</div>
</div>
<?php
}
} ?>
</div>
<?php $res = mysqli_query($conn,"SELECT * FROM comment where postid=120"); ?>
<div class="form_style">
<div class="comment-list-box">
<div id="frmAdd"><textarea name="txtmessage" class="txtmessage" cols="80" rows="2"></textarea>
<input type="hidden" value="120" name="postid" class="postid">
<p><button class="btnAddAction" name="submit" onClick="callCrudAction('add',this)">Add</button></p>
</div>
<img src="LoaderIcon.gif" id="loaderIcon" style="display:none" />
</div>
<?php
if(!empty($res)) {
while($comments=mysqli_fetch_array($res)) {
?>
<div class="message-box" id="message_<?php echo $comments['id'];?>">
<div class="message-content"><?php echo $comments['message']; ?></div>
<div>
<button class="btnEditAction" name="edit" onClick="showEditBox(this,<?php echo $comments['id']; ?>)">Edit</button>
<button class="btnDeleteAction" name="delete" onClick="callCrudAction('delete',<?php echo $comments['id']; ?>)">Delete</button>
</div>
</div>
<?php
}
} ?>
</div>
<!-- This may be 3,4,5, answers------ etc from database with comment box -->
crud_action.php
<?php
require_once("config.php");
$action = $_POST["action"];
if(!empty($action)) {
switch($action) {
case "add":
if(strlen($_POST["txtmessage"])<12) {
echo "<font color='red'>12 characters atleast </font>";
}
else {
echo $_POST['postid'];
$query = "INSERT INTO comment(message,postid) VALUES('".$_POST["txtmessage"]."','".$_POST["postid"]."')";
$run = mysqli_query($conn,$query);
$insert_id = mysqli_insert_id($conn);
if($insert_id){
echo '<div class="message-box" id="message_' . $insert_id . '">
<div>
<button class="btnEditAction" name="edit" onClick="showEditBox(this,' . $insert_id . ')">Edit</button>
<button class="btnDeleteAction" name="delete" onClick="callCrudAction('delete',' . $insert_id . ')">Delete</button>
</div>
<div class="message-content">' . $_POST["txtmessage"] . '</div></div>';
}
}
break;
case "edit":
$query = "UPDATE comment set message = '".$_POST["txtmessage"]."' WHERE id=".$_POST["message_id"];
$result = mysqli_query($conn,$query);
if($result){
echo $_POST["txtmessage"];
}
break;
case "delete":
if(!empty($_POST["message_id"])) {
$query = "DELETE FROM comment WHERE id=".$_POST["message_id"];
$result = mysqli_query($conn,$query);
}
break;
}
}
?>
Everytime the first textarea works .
Value from second textarea
In the image above , you can see the first comment box is working but if i enter in second box , it doesn't work .
How can i solve it for CRUD operation for different answers.
Like stackoverflow , user can comment on any answer using textarea and every textarea works .
I want use JS function one time for all texareas . How to do that all texarea work using same function for CRUD operation like stackoverfloe comment box below answers.
I am attaching my database table here -
CREATE TABLE `comment` (
`id` int(11) NOT NULL,
`message` text NOT NULL,
`postid` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
This is my database table for comment with postid and comment id autoincrement...
Also i am providing more easy way .
My connecton file -
config.php
<?php
session_start();
$dbHost = 'localhost';
$dbName = 'test';
$dbUsername = 'root';
$dbPassword = '';
$conn= mysqli_connect($dbHost, $dbUsername, $dbPassword, $dbName);
?>
