I am trying to create and edit button, like Reddit has, for my forum. I have got it to work but I was wondering if I'd be able to do it without having to refresh the page.
For example, when I click the edit button, it reloads the page and displays the form for editing, then when I click save it will reload yet again to display the new edited post.
Code (EDITED from IncredibleHat's answer):
<?php
session_start();
$host = "host"; // Host name
$user = "username"; // Mysql username
$password = "password"; // Mysql password
$db_name = "database"; // Database name
$tbl_name = "fquestions"; // Table name
// Connect to server and select databse.
$conn = mysqli_connect($host, $user, $password)or die("cannot connect");
mysqli_select_db($conn, $db_name)or die("cannot select DB");
// get value of id that sent from address bar
$id = $_GET['id'];
$sql = "SELECT * FROM $tbl_name WHERE id='$id'";
$result = mysqli_query($conn, $sql);
$rows = mysqli_fetch_array($result);
/*Check if topic is locked or not */
$locked = $rows['locked'];
if ($_SESSION['username'] == $rows['username']) {
$editPost = true;
}
?>
<head>
<!-- ****** faviconit.com favicons ****** -->
<link rel="shortcut icon" href="../images/favicon.ico">
<!-- ****** faviconit.com favicons ****** -->
<link id ="pageStyle" rel="stylesheet" href='../css/defaultStyle.css' type='text/css'> <!-- Loads Default Stylesheet -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto' type='text/css'>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div id="mainContent">
<div id="question">
<p id="date"><?php echo $rows['datetime']; ?></p>
<h2><?php echo $rows['topic']; ?></h2>
<b><p><?php echo $rows['username']; ?></p></b>
<?php
// The Regular Expression filter
$reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";
// The Text you want to filter for urls
$text = htmlspecialchars($rows['detail']);
// Check if there is a url in the text
if(preg_match($reg_exUrl, $text, $url)) {
$url = preg_replace("/^http:/i", "https:", $url);
// make the urls hyper links
echo preg_replace($reg_exUrl, '<a title="Opening this link will take you to a new page" alt="External Link Deleted" target="_blank" href="'.$url[0].'" rel="nofollow">'.$url[0].'</a><br>', '<p id="post">'.$text.'</p>');
} else {
?>
<p id="post"><?php echo htmlspecialchars($rows['detail']); ?></p>
<?php
}
if ($editPost == true) {
$_SESSION['detail'] = $rows['detail'];
$_SESSION['id'] = $rows['id'];
?>
<style>
#editPostButton {
border: none; outline: 0; background-color: #D8D8D8; margin-left: -5px;
}
#editPostButton.dark {
color: white;
background-color: #1C1C1C;
}
</style>
<input type="submit" value="Edit" name="editPostButton" id="editPostButton" data-postId="<?php echo $rows['id']; ?>">
<div id="editFormBlock"></div>
<script>
$(document).ready(function() {
// for clicking on the edit button, to grab the edit form
$("#editPostButton").on('click',function(e) {
e.preventDefault();
$.post(
'ajaxhandler.php',
{ action: 'editform', postid: $(this).data('postId') },
function(htmlReturn) {
$("#editFormBlock").html( htmlReturn ); // replace editForm content
},
'HTML'
);
});
// for clicking the save button for a edit form
// using .on so it catches dynamically added content
$("#editFormBlock").on('click',"#saveButton",function(e) {
e.preventDefault();
var data = $("#editForm").serializeArray();
data.push({name: 'action', value: 'saveform'});
$.post(
'ajaxhandler.php',
data,
function(htmlReturn) {
$("#editFormBlock").html( '' ); // clear edit form out
},
'HTML'
);
});
});
</script>
<?php
}
?>
</div>
<?php
$tbl_name2="fanswer"; // Switch to table "forum_answer"
$sql2 = "SELECT * FROM $tbl_name2 WHERE question_id='$id'";
$result2 = mysqli_query($conn, $sql2);
$row_cnt = mysqli_num_rows($result2);
if ($row_cnt > 0) {
?>
<h3>Replies:</h3>
<div id="replies">
<?php
while($rows = mysqli_fetch_array($result2)) {
?>
<p id="dates"><?php echo $rows['a_datetime']; ?></p>
<div id="reply">
<b><p><?php echo $rows['a_username']; ?></p></b>
<?php
// The Regular Expression filter
$reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";
// The Text you want to filter for urls
$text = htmlspecialchars($rows['a_answer']);
// Check if there is a url in the text
if(preg_match($reg_exUrl, $text, $url)) {
$url = preg_replace("/^http:/i", "https:", $url);
// make the urls hyper links
echo preg_replace($reg_exUrl, '<a title="Opening this link will take you to a new page" alt="External Link Deleted" target="_blank" href="'.$url[0].'" rel="nofollow">'.$url[0].'</a>', $text);
} else {
?>
<p><?php echo htmlspecialchars($rows['a_answer']); ?></p>
<?php
}
?>
</div>
<?php
}
} else {
?>
<div id="answers">
<p style="color: red;">There doesn't seem to be anything here</p>
<?php
}
$sql3 = "SELECT view FROM $tbl_name WHERE id='$id'";
$result3 = mysqli_query($conn, $sql3);
$rows = mysqli_fetch_array($result3);
$view = $rows['view'];
// if have no counter value set counter = 1
if(empty($view)) {
$view = 1;
$sql4 = "INSERT INTO $tbl_name(view) VALUES('$view') WHERE id='$id'";
$result4 = mysqli_query($conn, $sql4);
}
// count more value
$addview = $view+1;
$sql5 = "update $tbl_name set view='$addview' WHERE id='$id'";
$result5 = mysqli_query($conn, $sql5);
mysqli_close($conn);
?>
</div>
<h3>Post A Reply:</h3>
<form name="form1" method="post" action="add-answer" autocomplete="off">
<label>Reply: </label>
<?php
if ($locked == 1) {
echo '<textarea name="a_answer" id="a_answer" style="width: 800px;" readonly> This topic is locked! </textarea><br>';
} else if ($_SESSION['logged_in'] != true) {
echo '<textarea name="a_answer" id="a_answer" style="width: 800px;" readonly>⛔ You must login to reply! ⛔</textarea><br>';
} else {
echo '<textarea name="a_answer" id="a_answer" maxlength="300" required style="width: 800px;"></textarea><br>
<div class="g-recaptcha" data-sitekey="6LdrxD4UAAAAACAaVAR6U9BjOEDC9-j4QaOzBsFh"></div>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">';
}
?>
<input name="id" type="hidden" value="<?php echo $id; ?>">
</form>
</div>
</body>
ajaxhandler.php:
<?php
session_start();
$detail = $_SESSION['detail'];
$id = $_SESSION['id'];
if (!empty($_POST['action'])) {
if ($_POST['action'] == 'editform') {
?>
<style>
#post, #editPostButton {
display: none;
}
#saveButton {
border: none; outline: 0; background-color: #D8D8D8; margin-left: -5px;
}
</style>
<form id="editForm">
<textarea name="detail"><?php echo $detail; ?></textarea><br>
<input type="button" id="saveButton" value="Save">
</form>
<?php
}
if ($_POST['action'] == 'saveform') {
// do save process to db
// echo out a new static post html block
$host = "host"; // Host name
$user = "username"; // Mysql username
$password = "password"; // Mysql password
$db_name = "database"; // Database name
$tbl_name = "fquestions"; // Table name
// Connect to server and select databse.
$conn = mysqli_connect($host, $user, $password)or die("cannot connect");
mysqli_select_db($conn, $db_name)or die("cannot select DB");
$sql = "UPDATE $tbl_name SET detail = '$detail' WHERE id=$id";
$result = mysqli_query($conn, $sql);
}
}
?>
