How to fix the scroll at the bottom? - javascript

I am developing a Messaging system.I need Scroll bar to be fixed down ,Because when new data arrives It should automatically go down.How to do that in HTML/CSS
Don't mine if this full code is in a unprofessional way..
Home.php
<?php
// Turn off all error reporting
error_reporting(0);
//shop not login users from entering
if(isset($_SESSION['id'])){
$user_id = $_SESSION['id'];
}else{
}
require_once("./inc/connect.inc.php");
?>
<header>
<link rel="stylesheet" href="home - Copy.css" />
<nav>
<h3><a class="h3" href="#">CP</a></h3>
<div><span>Logout</span></div>
<div>
<?php
//Start your session
session_start();
//Read your session (if it is set)
if (isset($_SESSION['user_login'])){
echo '<div id="ull">'.strtoupper($_SESSION['user_login']).'</div>';
}
?>
</div>
</nav>
<body>
<div class="shead">
<div class="a1"> <li >Frequent Member</li>
<div class="fm">
<ul>
<?php
//show all the users expect me
$user_id = $_SESSION['id'];
$q = mysql_query("SELECT * FROM `users` WHERE id!='$user_id'");
//display all the results
while($row = mysql_fetch_assoc($q)){
echo " <div class='usernames'>
<a id=\"usernames\" href='home.php?id={$row['id']}'>{$row['username']}</a>
</div>
";
}
?>
</ul>
</div>
</div>
<div class="a2"> <li >Site's Popular in Your College</li></div>
</div>
</header>
<div class="rss">
<?php
// include('rssclass.php');
//include('rss.php');
?>
</div>
<div class="message-right">
<!-- display message -->
<div class="display-message">
<?php
//check $_GET['id'] is set
if(isset($_GET['id'])){
$user_two = trim(mysql_real_escape_string( $_GET['id']));
//check $user_two is valid
$q = mysql_query( "SELECT `id` FROM `users` WHERE id='$user_two' AND id!='$user_id'");
//valid $user_two
if(mysql_num_rows($q) == 1){
//check $user_id and $user_two has conversation or not if no start one
$conver = mysql_query( "SELECT * FROM conversation WHERE (user_one='$user_id' AND user_two='$user_two') OR (user_one='$user_two' AND user_two='$user_id')");
//they have a conversation
if(mysql_num_rows($conver) == 1){
//fetch the converstaion id
$fetch = mysql_fetch_assoc($conver);
$conversation_id = $fetch['id'];
}else{ //they do not have a conversation
//start a new converstaion and fetch its id
$q = mysql_query( "INSERT INTO `conversation` VALUES ('','$user_id',$user_two)");
$conversation_id = mysql_insert_id($con);
}
}else{
die("Invalid $_GET ID.");
}
}else {
die("Click On the Person to start Chating.");
}
?>
</div>
<script type="text/javascript">
var objDiv = document.getElementById("display-message");
objDiv.scrollTop = objDiv.scrollHeight;
</script>
<div class="send-message">
<!-- store conversation_id, user_from, user_to so that we can send send this values to post_message_ajax.php -->
<input type="hidden" id="conversation_id" value="<?php echo base64_encode($conversation_id); ?>">
<input type="hidden" id="user_form" value="<?php echo base64_encode($user_id); ?>">
<input type="hidden" id="user_to" value="<?php echo base64_encode($user_two); ?>">
<div class="textbox">
<input class="t_box" type="text" id="message" placeholder="Enter Your Message"/>
<button class="t_btn" id="reply">Reply</button>
<span id="error"></span>
</div>
</div>
</div>
<!--
<div class="textbox">
<form action="#" method="post">
<input type="text" name="msg_body" class="t_box" id="t_box" >
<input type="submit" class="t_btn" id="t_btn" name="submit" value="Send">
</form>
</div>-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
Getmsg.php
<?php
require_once("./inc/connect.inc.php");
if(isset($_GET['c_id'])){
//get the conversation id and
$conversation_id = base64_decode($_GET['c_id']);
//fetch all the messages of $user_id(loggedin user) and $user_two from their conversation
$q = mysql_query( "SELECT * FROM `messages` WHERE conversation_id='$conversation_id'");
//check their are any messages
if(mysql_num_rows($q) > 0){
while ($m = mysql_fetch_assoc($q)) {
//format the message and display it to the user
$user_form = $m['user_from'];
$user_to = $m['user_to'];
$message = $m['message'];
//get name and image of $user_form from `user` table
$user = mysql_query( "SELECT username FROM `users` WHERE id='$user_form'");
$user_fetch = mysql_fetch_assoc($user);
$user_form_username = $user_fetch['username'];
//display the message
echo "
<div class='message'>
<div class='text-con'>
<a href='#''>{$user_form_username}:</a>
<p> {$message}<p>
</div>
</div>
<hr>";
}
}else{
echo "No Messages";
}
}
?>

You didn't mention if you are using jQuery. If yes, you can do something like this:
$('#your_div_id').scrollTop($('#your_div_id')[0].scrollHeight);
Alternatively, only with Javascript you can find solution here:
Scroll to bottom of div?
You always need to pass the height of the div to the scroll option so it is sticked to the bottom. This means that you need to bind this to the event which detects when the new message is received and rendered.

Your solution si based on scrollHeight, these two ling of code can help you
var objDiv = document.getElementById("toScrollBottom");
objDiv.scrollTop = objDiv.scrollHeight;
You can see this snippet for example, just click on the blue div to add messages
var count = 0;
var objDiv = document.getElementById("toScrollBottom");
objDiv.scrollTop = objDiv.scrollHeight;
$("body").on("click","#toScrollBottom",function(){
$("#messages").append('<p>Message Line' + count + '<br/>Message line</p>');
var objDiv = document.getElementById("toScrollBottom");
objDiv.scrollTop = objDiv.scrollHeight;
count++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toScrollBottom" style="height: 150px; overflow-y: scroll; margin: 50px; border: solid 2px blue;">
<div id="messages">
<p>Message Line FIRST<br/>Message Line</p>
</div>
</div>

Related

CRUD application create working, but not update or delete

I tried getting the CRUD app to work from Tutorial Republic. I can create rows, but can’t read, update, or delete them.
I uploaded index, create, read, update, delete, config, and error.php. It loads index.php fine but when I try to update, read, or delete, all I get is a blank page. Please help. Here’s the code.
config.php
<?php
/* Database credentials. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'user');
define('DB_PASSWORD', 'secret');
define('DB_NAME', 'demo');
/* Attempt to connect to MySQL database */
$link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
// Check connection
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>
read.php
<?php
// Check existence of id parameter before processing further
if(isset($_GET["id"]) && !empty(trim($_GET["id"]))){
// Include config file
require_once "config.php";
// Prepare a select statement
$sql = "SELECT * FROM employees WHERE id = ?";
if($stmt = mysqli_prepare($link, $sql)){
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "i", $param_id);
// Set parameters
$param_id = trim($_GET["id"]);
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt)){
$result = mysqli_stmt_get_result($stmt);
if(mysqli_num_rows($result) == 1){
/* Fetch result row as an associative array. Since the result set
contains only one row, we don't need to use while loop */
$row = mysqli_fetch_array($result, MYSQLI_ASSOC);
// Retrieve individual field value
$name = $row["name"];
$address = $row["address"];
$salary = $row["salary"];
} else{
// URL doesn't contain valid id parameter. Redirect to error page
header("location: error.php");
exit();
}
} else{
echo "Oops! Something went wrong. Please try again later.";
}
}
// Close statement
mysqli_stmt_close($stmt);
// Close connection
mysqli_close($link);
} else{
// URL doesn't contain id parameter. Redirect to error page
header("location: error.php");
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>View Record</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.wrapper{
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1 class="mt-5 mb-3">View Record</h1>
<div class="form-group">
<label>Name</label>
<p><b><?php echo $row["name"]; ?></b></p>
</div>
<div class="form-group">
<label>Address</label>
<p><b><?php echo $row["address"]; ?></b></p>
</div>
<div class="form-group">
<label>Salary</label>
<p><b><?php echo $row["salary"]; ?></b></p>
</div>
<p>Back</p>
</div>
</div>
</div>
</div>
</body>
</html>
update.php
<?php
// Include config file
require_once "config.php";
// Define variables and initialize with empty values
$name = $address = $salary = "";
$name_err = $address_err = $salary_err = "";
// Processing form data when form is submitted
if(isset($_POST["id"]) && !empty($_POST["id"])){
// Get hidden input value
$id = $_POST["id"];
// Validate name
$input_name = trim($_POST["name"]);
if(empty($input_name)){
$name_err = "Please enter a name.";
} elseif(!filter_var($input_name, FILTER_VALIDATE_REGEXP, array("options"=>array("regexp"=>"/^[a-zA-Z\s]+$/")))){
$name_err = "Please enter a valid name.";
} else{
$name = $input_name;
}
// Validate address address
$input_address = trim($_POST["address"]);
if(empty($input_address)){
$address_err = "Please enter an address.";
} else{
$address = $input_address;
}
// Validate salary
$input_salary = trim($_POST["salary"]);
if(empty($input_salary)){
$salary_err = "Please enter the salary amount.";
} elseif(!ctype_digit($input_salary)){
$salary_err = "Please enter a positive integer value.";
} else{
$salary = $input_salary;
}
// Check input errors before inserting in database
if(empty($name_err) && empty($address_err) && empty($salary_err)){
// Prepare an update statement
$sql = "UPDATE employees SET name=?, address=?, salary=? WHERE id=?";
if($stmt = mysqli_prepare($link, $sql)){
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "sssi", $param_name, $param_address, $param_salary, $param_id);
// Set parameters
$param_name = $name;
$param_address = $address;
$param_salary = $salary;
$param_id = $id;
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt)){
// Records updated successfully. Redirect to landing page
header("location: index.php");
exit();
} else{
echo "Oops! Something went wrong. Please try again later.";
}
}
// Close statement
mysqli_stmt_close($stmt);
}
// Close connection
mysqli_close($link);
} else{
// Check existence of id parameter before processing further
if(isset($_GET["id"]) && !empty(trim($_GET["id"]))){
// Get URL parameter
$id = trim($_GET["id"]);
// Prepare a select statement
$sql = "SELECT * FROM employees WHERE id = ?";
if($stmt = mysqli_prepare($link, $sql)){
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "i", $param_id);
// Set parameters
$param_id = $id;
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt)){
$result = mysqli_stmt_get_result($stmt);
if(mysqli_num_rows($result) == 1){
/* Fetch result row as an associative array. Since the result set
contains only one row, we don't need to use while loop */
$row = mysqli_fetch_array($result, MYSQLI_ASSOC);
// Retrieve individual field value
$name = $row["name"];
$address = $row["address"];
$salary = $row["salary"];
} else{
// URL doesn't contain valid id. Redirect to error page
header("location: error.php");
exit();
}
} else{
echo "Oops! Something went wrong. Please try again later.";
}
}
// Close statement
mysqli_stmt_close($stmt);
// Close connection
mysqli_close($link);
} else{
// URL doesn't contain id parameter. Redirect to error page
header("location: error.php");
exit();
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Update Record</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.wrapper{
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2 class="mt-5">Update Record</h2>
<p>Please edit the input values and submit to update the employee record.</p>
<form action="<?php echo htmlspecialchars(basename($_SERVER['REQUEST_URI'])); ?>" method="post">
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control <?php echo (!empty($name_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $name; ?>">
<span class="invalid-feedback"><?php echo $name_err;?></span>
</div>
<div class="form-group">
<label>Address</label>
<textarea name="address" class="form-control <?php echo (!empty($address_err)) ? 'is-invalid' : ''; ?>"><?php echo $address; ?></textarea>
<span class="invalid-feedback"><?php echo $address_err;?></span>
</div>
<div class="form-group">
<label>Salary</label>
<input type="text" name="salary" class="form-control <?php echo (!empty($salary_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $salary; ?>">
<span class="invalid-feedback"><?php echo $salary_err;?></span>
</div>
<input type="hidden" name="id" value="<?php echo $id; ?>"/>
<input type="submit" class="btn btn-primary" value="Submit">
Cancel
</form>
</div>
</div>
</div>
</div>
</body>
</html>
delete.php
<?php
// Process delete operation after confirmation
if(isset($_POST["id"]) && !empty($_POST["id"])){
// Include config file
require_once "config.php";
// Prepare a delete statement
$sql = "DELETE FROM employees WHERE id = ?";
if($stmt = mysqli_prepare($link, $sql)){
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "i", $param_id);
// Set parameters
$param_id = trim($_POST["id"]);
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt)){
// Records deleted successfully. Redirect to landing page
header("location: index.php");
exit();
} else{
echo "Oops! Something went wrong. Please try again later.";
}
}
// Close statement
mysqli_stmt_close($stmt);
// Close connection
mysqli_close($link);
} else{
// Check existence of id parameter
if(empty(trim($_GET["id"]))){
// URL doesn't contain id parameter. Redirect to error page
header("location: error.php");
exit();
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Delete Record</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.wrapper{
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2 class="mt-5 mb-3">Delete Record</h2>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="alert alert-danger">
<input type="hidden" name="id" value="<?php echo trim($_GET["id"]); ?>"/>
<p>Are you sure you want to delete this employee record?</p>
<p>
<input type="submit" value="Yes" class="btn btn-danger">
No
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
error.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Error</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.wrapper{
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2 class="mt-5 mb-3">Invalid Request</h2>
<div class="alert alert-danger">Sorry, you've made an invalid request. Please go back and try again.</div>
</div>
</div>
</div>
</div>
</body>
</html>

Automatic submit of form on page load cause infinite loop

i'm using a Filter in which i use the Form..When a user a land on the list page it should automatically submit the form so user can get values only he want to see. i have tried a lot of things like jquery JS and using snippet in body but none of them is working. For the following code the form keep on submitting.
<div class="container shop-filter">
<div class="filter">
<form action="" method="POST" enctype="multipart-form-data" id="city-filter" name="cit-filter">
<select name="filter" id="select">
<option value="all">All city</option>
<?php
$sql="SELECT * FROM tcity";
$connect= mysqli_query($conn, $sql) or die ("Failed To Connect.");
while($rows= mysqli_fetch_array($connect, MYSQLI_ASSOC)){ ?>
<option value= "<?php echo $rows['c_id']?>" id="optin_val" <?php echo (!empty($_COOKIE['dropdown']) && $_COOKIE['dropdown'] == $rows['c_id'] ? 'selected' : ''); ?>><?php echo $rows['city_nm'];?></option>
<?php }
?>
</select>
<input type="submit" name="submitt" id="submitt" value="filter" class="btn .btn-default">
</form>
</div>
<div class="view">
<i class="fa fa-th fa-lg" aria-hidden="true"></i><span id="grid-view"> Grid</span>
<i class="fa fa-th-list fa-lg" aria-hidden="true"></i><span id="list-view"> list</span>
</div>
<hr id="hr-1" style="width:100%">
</div>
<div class="container blocks" id="content">
<?php
//Grab the variable sent through link by sub_category.php
//session_start();
$subcategory_id='';
$subcategory_id= $_GET['sub_id'];
$_SESSION['sub'] = $subcategory_id;
$row_count = 0;
if(isset($_POST['submitt'])){
$city_id=$_POST['filter'];
if($city_id == 'all'){
$sql="SELECT * FROM tadd WHERE sub_id = '$subcategory_id' ORDER BY add_nm";
}else{
$sql="SELECT * FROM tadd WHERE sub_id = '$subcategory_id' AND c_id = '$city_id' ORDER BY add_nm";
}
}else{
$sql="SELECT * FROM tadd WHERE sub_id = '$subcategory_id' ORDER BY add_nm";
}
//$sql="SELECT * FROM tadd WHERE sub_id = '$subcategory_id' AND c_id = '$city_id'";
$conection = mysqli_query($conn, $sql);
while ($rows = mysqli_fetch_array($conection, MYSQLI_ASSOC)){
$name = $rows['add_nm'];
$add_id = $rows['add_id'];
//get the join date and Expiry date to hide Expired Contents
$current_date = strtotime(date('Y-m-d'));
$exp = strtotime($rows['exp_dt']);
$row_count = mysqli_num_rows($conection);
//get Images
//$shop_image = trim($add_id.'.jpg');
?>
<!-- Do Not Show Expired Contents -->
<?php if( $current_date <= $exp ) {?>
<div class="dialog">
<div class="shop_img">
<img src="../image/shops/1.jpg" alt ="<?php echo $name;?>" >
</div>
<hr id="hr">
<div class="shop_name">
<?php echo strtoupper($name);?>
</div>
<a href="detail.php?add=<?php echo $add_id;?>"><div class="address">
<span id="1">ADDRESS</span><span id="2"><i class="fa fa-arrow-right" aria-hidden="true"></i></i></span>
</div></a>
</div>
<?php
}
}
if( $row_count == 0 ){
echo '<div class ="msg">Sorry! No Entries Found.</div>';
}
?>
</div>
</body>
<footer>
<?php
include("../footer.html");
?>
</footer>
<script>
$(document).ready(function(){
$("#city-filter").submit();
})
</script>
As i shown in image when user comes to this page it has to show only success classes. But it is showin all...when i hot filter it'll show currect.so i want to cancel hiting submit manually and auto submit the form
You could put it inside a condition to check if there are some dialog divs:
$(document).ready(function(){
if($('.dialog').length === 0 ){ // check the length of dialog div if 0
$("#city-filter")[0].submit(); // then only submit the form
}
})
Instead use the native .submit() event on the form.

how to restrict the user not to post again on the same page if already posted

I have the below code for User Rating & Comment system which is working fine, but user can post and rate again and again.
I want that if a user posted comment already he/she should not see the comment box but a message that " You have already posted comment on this page".
I tried by using the query in the Add-Comment.php but did not worked.
Need help to solve this issue. Thanks
URL: index.php?id=1
Add-Comment.php
<?php
session_start();
$ipaddress = $_SERVER["REMOTE_ADDR"];
$users = session_id();
if(!empty($_POST)){
extract($_POST);
if($_POST['act'] == 'add-com'):
$comment = htmlentities($comment);
$rating = htmlentities($rating);
// Connect to the database
require_once '../../inc/db.php';
$default = "mm";
$size = 35;
$grav_url = "http://www.gravatar.com/avatar/" . "?d=" . $default . "&s=" . $size;
$sql = "INSERT INTO rest_rating (rate, comment, sr_id, ip, user)
VALUES ('$rating', '$comment', '$id_post', '$ipaddress', '$users')";
$sqls = "select user from rest_rating
where sr_id = '$id_post' and user ='$users' )";
$tt = $db->query($sqls);
if ( $tt['user'] == $users ) {
echo '<font size="3" color="red">You Have Already Rated For This Restaurant</font>';
}elseif ( $db->query($sql)==true) {
?>
<div class="cmt-cnt">
<img src="<?php echo $grav_url; ?>" alt="" />
<div class="thecom">
<!--<h5><?php echo $name; ?></h5>-->
<b>Rating : </b><?php echo $rating; ?>
<span class="com-dt"><?php echo date('d-m-Y H:i'); ?></span>
<br/>
<p><?php echo $comment; ?></p>
</div>
</div><!-- end "cmt-cnt" -->
<?php } ?>
<?php endif; ?>
<?php } ?>
index.php
<?php
require_once '../../inc/db.php';
$id=$_GET['id'];
?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/example.css">
<link href="css/star-rating.css" media="all" rel="stylesheet" type="text/css"/>
<script src="js/star-rating.js" type="text/javascript"></script>
<div class="container">
<h3>Comments</h3>
<?php
$id_post = $id;
?>
<div class="cmt-container" >
<?php
session_start();
$users = session_id();
$results = $db->query("SELECT * FROM rest_rating WHERE sr_id = $id_post");
foreach ($results as $affcom) {
$comment = $affcom['comment'];
$rating = $affcom['rate'];
$date = $affcom['date'];
$default = "mm";
$size = 35;
$grav_url = "http://www.gravatar.com/avatar/" . "?d=" . $default . "&s=" . $size;
?>
<div class="cmt-cnt">
<div class="thecom">
<input id="input-5a" class="rating" value="<?php echo $rating; ?>" data-size="xs" data-show-clear="false" data-show-caption="false" data-readonly="true">
<span data-utime="1371248446" class="com-dt"><?php echo $date; ?></span>
<br/>
<p>
<?php echo $comment; ?>
</p>
</div>
</div><!-- end "cmt-cnt" -->
<?php } ?>
<div class="new-com-bt">
<span>Write a comment ...</span>
</div>
<div class="new-com-cnt">
<input name="starrating" id="starrating" value="1" type="number" class="rating" min=0 max=5 step=1 data-size="xs2" >
<textarea class="the-new-com"></textarea>
<div class="bt-add-com">Post comment</div>
<div class="bt-cancel-com">Cancel</div>
</div>
<div class="clear"></div>
</div><!-- end of comments container "cmt-container" -->
<?php
$sqls = "select user from rest_rating
where sr_id = '$id_post' and user ='$users' )";
$tt=$db->query($sqls);
$userT=$tt['user'];
?>
<script type="text/javascript">
$(function(){
//alert(event.timeStamp);
$('.new-com-bt').click(function(event){
$(this).hide();
$('.new-com-cnt').show();
$('#name-com').focus();
});
/* when start writing the comment activate the "add" button */
$('.the-new-com').bind('input propertychange', function() {
$(".bt-add-com").css({opacity:0.6});
var checklength = $(this).val().length;
if(checklength){ $(".bt-add-com").css({opacity:1}); }
});
/* on clic on the cancel button */
$('.bt-cancel-com').click(function(){
$('.the-new-com').val('');
$('.new-com-cnt').fadeOut('fast', function(){
$('.new-com-bt').fadeIn('fast');
});
});
// on post comment click
$('.bt-add-com').click(function(){
var theCom = $('.the-new-com');
var starrating = $('#starrating');
if( !theCom.val()){
alert('You need to write a comment!');
}else{
$.ajax({
type: "POST",
url: "add-comment.php",
data: 'act=add-com&id_post='+<?php echo $id_post; ?>+'&rating='+starrating.val()+'&comment='+theCom.val(),
success: function(html){
theCom.val('');
starrating.val('');
$('.new-com-cnt').hide('fast', function(){
$('.new-com-bt').show('fast');
$('.new-com-bt').before(html);
})
}
});
}
});
});
</script>
</div>
You can construct a query to check whether the user has already posted a comment on that particular page or not, and display the rating and comment box accordingly. Here's the code snippet,
// your code
$results = $db->query("SELECT * FROM rest_rating WHERE sr_id = '". $id_post . "' AND user ='". $users . "'");
if($results->num_rows){
// user has already posted a comment
echo '<p>You have already posted comment on this page</p>';
}else{
// user hasn't posted any comment on this page yet
// display rating and comment box
?>
<div class="new-com-bt">
<span>Write a comment ...</span>
</div>
<div class="new-com-cnt">
<input name="starrating" id="starrating" value="1" type="number" class="rating" min=0 max=5 step=1 data-size="xs2" >
<textarea class="the-new-com"></textarea>
<div class="bt-add-com">Post comment</div>
<div class="bt-cancel-com">Cancel</div>
</div>
<div class="clear"></div>
</div><!-- end of comments container "cmt-container" -->
<?php
}
// your code

Populate multiple form fields from foreach statement

I'm trying to populate multiple form fields from a generated button in a foreach statement. I don't have a vast knowledge of JS so I don't know if I'm just not thinking of a certain function or not.
I have the following code and I'm able to get title to populate in the form but I have no clue where to start for populating content as well based of the same button. ex: one button will load a specific title and content value while another edit button will load another specific title and content value.
//Announcement table select
$sql = "SELECT * FROM `announcements` ORDER BY `startDate` DESC"; //I want to see all existing announcements from database
$announcement = $dbConnect->query($sql);//execute query
$a = 0;
?>
<script type="text/javascript">
function changeText(title, content){
document.getElementById('title').value = title.id;
document.getElementById('content').value = document.getElementById(content).getAttribute('data-content');
}
</script>
<?php
foreach ($announcement as $row){ //Displays title, startDate, endDate from announcement table from database
$x[$a] = $row["title"];
$y[$a] = $row["content"];
echo "<h2 style=width:auto;padding:8px;margin-top:-30px;font-size:18px;><a style=text-decoration:none;color:#c4572f; >".$row["title"]."</a></h2><br>";
echo "<p style=padding-top:10px;>".$row["content"]."</p><br>";
echo "<p style=font-size:10px;>Posted: ".$row["startDate"]."</p><br>";
echo '<input id="'.$x[$a].'" type=button class=test onclick="changeText(this, '.$y[$a].');" value="Edit">';
echo '<p id="'.$y[$a].'" data-content="'.$row["content"].'">test</p>';
echo "<h5 style=line-height:2px;margin-top:-15px;><p>_____________________________________</p></h5><br>";
}
?>
</div>
</div>
</div> <!--m4 ends here-->
<div class="col m8 s8"> <!--m8 starts here-->
<div class="titleboxmargin grey" style="width:100%;">
<div class="bar yellow"></div>
<img class="boxicon" src="../images/announcementsicon.svg">
<h3 class="title">Announcements</h3>
</div>
<div class="col yellow-light"> <!--Announcement Form Starts-->
<form action="includes/postAnnouncement.php" method="post">
<ul class="yellow-form">
<li class="textfield-container">
<label for="text" class="textlabelblack">Title:</label>
<input id="title" name= "title" type="text" placeholder="Title of My Announcement">
</li>
<li class="textfield-container">
<label for="textarea" class="textlabelblack">Start Date:</label>
<input type="date" id="startDate" name="startDate">
</li>
<li class="textfield-container">
<label for="textarea" class="textlabelblack">End Date:</label>
<input type="date" id="endDate" name="endDate">
</li>
<li class="textfield-container">
<label for="textarea" class="textlabelblack">Announcement:</label>
<textarea id="content" name="content" rows="7"></textarea>
</li>
<li class="textfield-container">
<div class="leftsidebutton">
<input type="submit" class="button" style="width:auto; padding:5px; border:0;" name="register" value="Submit the form"/><!--Action: Attempts to Redirect to postAnnouncement.php-->
</div>
</li>
</ul>
</form>
The following code works
Edit:
<script type="text/javascript">
function changeText(title, content){
document.getElementById('content').value = document.getElementById(content).getAttribute('data-content');
document.getElementById('title').value = document.getElementById(title).getAttribute('data-content');
}
</script>
<?php
foreach ($announcement as $row){ //Displays title, startDate, endDate from announcement table from database
$tile = $row["announcementID"] * 2;
$cont = $row["announcementID"];
echo "<h2 style=width:auto;padding:8px;margin-top:-30px;font-size:18px;><a style=text-decoration:none;color:#c4572f; >".$row["title"]."</a></h2><br>";
echo "<p style=padding-top:10px;>".$row["content"]."</p><br>";
echo "<p style=font-size:10px;>Posted: ".$row["startDate"]."</p><br>";
echo '<input id="'.$tile.'" data-content="'.$row["title"].'" type=button class=test onclick="changeText(id, '.$cont.');" value="Edit">';
echo '<p id="'.$cont.'" data-content="'.$row["content"].'">test</p>';
echo "<h5 style=line-height:2px;margin-top:-15px;><p>_____________________________________</p></h5><br>";
}
?>
You could add a second parameter to your onclick handler:
$a = 0;
?>
<script type="text/javascript">
function changeText(elem, content){
document.getElementById('title').value = elem.id;
/*
* Here we get the value of the hidden content by the passed
* in id and assign it to the value of the #content form element
*/
document.getElementById('content').value = document.getElementById(content).value;
}
</script>
<?php
foreach ($announcement as $row){ //Displays title, startDate, endDate from announcement table from database
$x[$a] = $row["title"];
$y[$a] = $row["content"];
echo "<h2 style=width:auto;padding:8px;margin-top:-30px;font-size:18px;><a style=text-decoration:none;color:#c4572f; >".$row["title"]."</a></h2><br>";
echo "<p style=padding-top:10px;>".$row["content"]."</p><br>";
echo "<p style=font-size:10px;>Posted: ".$row["startDate"]."</p><br>";
echo '<input id="'.$x[$a].'" type=button class=test onclick="changeText(this, '.$y[$a].'); startDate('.$y[$a].'); " value="Edit">';
echo '<p style="display:hidden;" id="'.$y[$a].'" ></p>';
echo "<h5 style=line-height:2px;margin-top:-15px;><p>_____________________________________</p></h5><br>";
}
EDIT:
$a = 0;
?>
<script type="text/javascript">
function changeText(elem, contentID){
var contentElem = document.getElementById(contentID);
document.getElementById('title').value = elem.getAttribute('data-title');
/*
* Get the value of the hidden content's data attribute by the passed
* in id and assign it to the value of the #content form element
*/
document.getElementById('content').value = contentElem.getAttribute('data-content');
}
</script>
<?php
// Let's get $index as well
foreach ($announcement as $index => $row){ //Displays title, startDate, endDate from announcement table from database
$x[$a] = $row["title"];
$y[$a] = $row["content"];
echo "<h2 style=width:auto;padding:8px;margin-top:-30px;font-size:18px;><a style=text-decoration:none;color:#c4572f; >".$row["title"]."</a></h2><br>";
echo "<p style=padding-top:10px;>".$row["content"]."</p><br>";
echo "<p style=font-size:10px;>Posted: ".$row["startDate"]."</p><br>";
// Not sure if I'm escaping quotes correctly on this line:
echo '<input id="title'.$index.'" data-title="'.$x[$a].'" type=button class=test onclick="changeText(this, \"content'.$index.'\"); startDate('.$y[$a].'); " value="Edit">';
// Generate a unique id that we can reference
// and add `data-content` attribute
echo '<p style="display:hidden;" id="content'.$index.'" data-content="'.$y[$a].'"></p>';
echo "<h5 style=line-height:2px;margin-top:-15px;><p>_____________________________________</p></h5><br>";
}
I am not sure what your title and content values are, but I suspect they are not valid HTML element IDs. I think it would be better to avoid using the DOM as a data store and instead create a JSON representation of your announcement table in your script. My PHP is a little rusty, but it should be something similar to:
<script>
var rows = <?php echo json_encode($announcement); ?>;
</script>
Hopefully this will produce something like the following:
var rows = [
{
"title": "Title One",
"content": "Content One"
},
{
"title": "Title Two",
"content": "Content Two"
}
];
This way, our changeText function need only accept a row index as parameter:
function changeText (index) {
document.getElementById('title').value = rows[index].title;
document.getElementById('content').value = rows[index].content;
}
All that is left is to pass the row index where we call changeText:
<?php foreach ($announcement as $index => $row) { ?>
<!-- echo your HTML markup here. -->
<button onclick="changeText(<?php echo $index; ?>);">Edit</button>
<?php } ?>

Ajax Pagination Script Send Variable to php Script

//index.php
<?php
include("config.inc.php");
if(!empty($_GET['email'])){
$dude = $_GET['email']; // user email address to be gotten by javascript variable
// dude and sent to fetch_pages.php
echo '<input type="text" style="display:none" id="hide" value="'. $dude .'" />';
}
$results = mysqli_query($connecDB,"SELECT COUNT(*) FROM user_registration_details");
$get_total_rows = mysqli_fetch_array($results); //total records
$item_per_page = 5;
//break total records into pages
$pages = ceil($get_total_rows[0]/$item_per_page);
//create pagination
if($pages > 1)
{
$pagination = '';
$pagination .= '<ul class="paginate">';
for($i = 1; $i< $pages; $i++)
{
$pagination .= '<li>'.$i.'</li>';
}
$pagination .= '</ul>';
}
?>
<?php
/*
* Ajax form submit
*/
# request sent using HTTP_X_REQUESTED_WITH
if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) ){
if (isset($_POST['name']) AND isset($_POST['email']) AND isset($_POST['subject']) AND isset($_POST['message'])) {
$to = 'your#mail.id';
$name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$subject = filter_var($_POST['subject'], FILTER_SANITIZE_STRING);
$message = filter_var($_POST['message'], FILTER_SANITIZE_STRING);
$sent = email($to, $email, $name, $subject, $message);
if ($sent) {
echo 'Message sent!';
} else {
echo 'Message couldn\'t sent!';
}
}
else {
echo 'All Fields are required';
}
return;
}
/**
* email function
*
* #return bool | void
**/
function email($to, $from_mail, $from_name, $subject, $message){
$header = array();
$header[] = "MIME-Version: 1.0";
$header[] = "From: {$from_name}<{$from_mail}>";
/* Set message content type HTML*/
$header[] = "Content-type:text/html; charset=iso-8859-1";
$header[] = "Content-Transfer-Encoding: 7bit";
if( mail($to, $subject, $message, implode("\r\n", $header)) ) return true;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Pagination</title>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var dude = document.getElementById("hide").value;//variable to be sent to fetch_pages //to present user email
$("#results").load("fetch_pages.php", {'page':0}, function() {$("#1-page").addClass('active');}); //initial page number to load
$(".paginate_click").click(function (e) {
$("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
var page_num = parseInt(clicked_id[0]); //clicked_id[0] holds the page number we need
$('.paginate_click').removeClass('active'); //remove any active class
//post page number and load returned data into result element
//notice (page_num-1), subtract 1 to get actual starting point
$("#results").load("fetch_pages.php", {'page':(page_num-1)}, function(){
});
$(this).addClass('active'); //add active class to currently clicked element (style purpose)
return false; //prevent going to herf link
});
});
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="profiler.js"></script>
<style type="text/css">
#import url("style2.css");
</style>
<link href="style5.css" rel="stylesheet" type="text/css">
</head>
<body onload="profiler();">
<div id="firstdiv">
<p></p>
<img id="image1" src="2347033609685.jpg" alt="Profile Pic" height="170" width="180" />
<table id="pname"><tr height="49"><td id="name">Richard Berry</td></tr>
<tr id="num"><td>08023818955</td><td width="400">Agent with homes and good event centres</td></tr>
<tr height="20"><td width="200">Specialties: Event Centres / Venue</td>
</tr></table>
<table id="like"><tr><td width="6"></td><td width="31"><img src="2347033609685.jpg" height="27" width="27" /></td>
<td width="71"><img src="yahoo2.PNG" height="27" width="27" /></td></tr>
</table>
<table id="pdetails"><tr><td width="200"><p id="over" onclick="profilerr('pover');" ><button id="o">Overview</button></p></td>
<td width="220"><p id="list" onclick="profile('plist');"><button id="l">Listings()</button></p></td>
<td width="221"><p id="about" onclick="profiles('pabout');"><button id="a">About</button></p></td>
</tr></table>
<div id="pabout" style="display:none">
<table>
<tr><td id="name">About Richard Berry</td></tr>
<tr><td>Firstly, there are two sets of people who come to this hall. The first set are those who just come to watch and/or charge gadgets and the second set are those who come to train.
To the first set of people, we plead that you kindly stay in the waiting area when you visit the hall and far from tables especially when people are playing because most times it serves as a means of distraction and also playing on table is prohibited.
Secondly, to the second set of people who are registered members of the team we are pleading that you should always be in complete sport outfit whenever you come for training and should avoid littering of the hall with nylons, papers, bottles e.t.c
Most especially the new training timetable for the semester is below:</td></tr>
</table></div>
<div id="pover" style="display:none">
<table>
<tr><td id="name">About Richard Berry</td></tr>
<tr><td>Firstly, there are two sets of people who come to this hall. The first set are those who just come to watch and/or charge gadgets and the second set are those who come to train.
To the first set of people, we plead that you kindly stay in the waiting area when you visit the hall and far from tables especially when people are playing because most times it serves as a means of distraction and also playing on table is prohibited.
Secondly, to the second set of people who are registered members of the team we are pleading that you should always be in complete sport outfit whenever you come for training and should avoid littering of the hall with nylons, papers, bottles e.t.c
Most especially the new training timetable for the semester is below:</td></tr>
<tr><td id="listl">Listings (2401) by Richard Berry</td></tr>
</table></div>
<div id="plist" style="display:none">
<table>
<tr><td id="listl">Listings(2401) by Richard Berry</td></tr>
<tr></tr></table>
<div id="results"></div>
<?php echo $pagination; ?>
</div>
</div>
<div id="wrap">
<p id="compdiv">Contact Supplier</p>
<div class="alert">Hello</div>
<form id="form" action="" method="post">
<div>
<label>
<span id="spandisp">Name: * </span>
<input placeholder="Name" type="text" id="input" name="name" required>
</label>
</div>
<div>
<label>
<span id="spandisp">Email: * </span>
<input placeholder="Email address" id="input" type="email" name="email" required>
</label>
</div>
<div>
<label>
<span id="spandisp">Subject: * </span>
<input placeholder="Subject" id="input" type="text" name="subject" required>
</label>
</div>
<div>
<label>
<span id="spandisp">Message: *</span>
<textarea id="input2" placeholder="Type your message here...." name="message" required></textarea>
</label>
</div>
<div>
<button name="submit" type="submit" id="submit">Send Message</button>
</div>
</form>
<p>Note: * Fields are required</p>
</div>
</div>
</body>
</html>
//config.inc.php
<?php
$db_username = 'root';
$db_password = '****';
$db_name = '****';
$db_host = 'localhost';
$item_per_page = 5;
$connecDB = mysqli_connect($db_host, $db_username, $db_password,$db_name) or
die('could not connect to database');
?>
//fetch_pages
<?php
include("config.inc.php"); //include config file
$item_per_page = 5;
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
if(!empty($_POST['email'])){
$email = $_POST['email'];
echo "gotcha";
}
//validate page number is really numaric
if(!is_numeric($page_number)){die('Invalid page number!');}
//get current starting point of records
$position = ($page_number * $item_per_page);
//Limit our results within a specified range.
$results = mysqli_query($connecDB,"SELECT * FROM user_registration_details WHERE email = '$email' ORDER BY id ASC LIMIT $position, $item_per_page");
//output results from database
echo '<ul class="page_result">';
while($row = mysqli_fetch_array($results))
{
echo '<li id="item_'.$row["id"].'">'.$row["id"].'. <span class="page_name">'.$row["contact_name"].'</span><span class="page_message">'.$row["email"].'</span><span class="view"> View Details</span></li>';
}
echo '</ul>';
?>
Please the code above is getting the user email from the URL and also successfully inputting it into the JavaScript variable dude. Also all the AJAX pagination script is working perfectly as I want it just that I can't send the user email to fetch_pages.php to be able to restrict the search based a particular user email. please how can I send the user email details to fetch_pages without refreshing the page and not still disturbing the pagination script. please all help will be needed as I need the script for a major project.
i came to understand that the only problem was to add dude to the javascript code as below.
the same webpage cannot send two ajax request to the same php at the same time.
$("#results").load("fetch_pages.php", {'page':0, 'email':(dude)}, function() {$("#1-page").addClass('active');}); //initial page number to load
$(".paginate_click").click(function (e) {
$("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
var page_num = parseInt(clicked_id[0]); //clicked_id[0] holds the page number we need
$('.paginate_click').removeClass('active'); //remove any active class
//post page number and load returned data into result element
//notice (page_num-1), subtract 1 to get actual starting point
$("#results").load("fetch_pages.php", {'page':(page_num-1),'email':(dude)}, function(){
});

Categories