I want to create form for edit data from MySQL with javascript. when I click link Edit it will show edit form for edit data.
This is from and php code for show data.
<form id="form-edit" method="post">
<?php
$sql = "SELECT * FROM comment WHERE question_id = $question_id ORDER BY id DESC";
$r1 = mysqli_query($link, $sql);
while($cm = mysqli_fetch_array($r1)) {
$comment_id = $cm['id'];
echo '<section class="section-comment">';
echo '<span class="commentator">' .$cm['user_id'] . '</span>';
echo $cm['detail'];
// This is link Edit
echo 'Edit';
echo $comment_id; //This can show correct comment_id
?>
<div id="form-edit-dialog">
<input type="text" name="user_id" value="<?php echo $user_id ?>" readonly > <br>
//I add this line for check comment_id but it show max comment_id to min when I open and close form
<input type="text" name="id" value="<?php echo $comment_id ?>" readonly > <br>
<textarea name="detail"></textarea><br>
<button type="submit" id="submit-edit">Submit</button>
<input type="hidden" name="comment_id" id="comment-id">
}
</form>
</div>
I write code java script like this.
$(function() {
$('a.edit-comment').click(function(event) { //Click link Edit
$('#form-edit')[0].reset();
event.preventDefault();
var t = "Edit Comment";
$('#form-edit-dialog').dialog({
width: '600px',
title: t,
modal: true,
position: { my: "center", at: "center", of: window}
});
//set value for hidden
$('#comment-id').val($(this).attr('edit-id'));
});
$('#submit-edit').click(function() {
$('form#form-edit').ajaxForm({
url: 'save-edit.php',
type: 'post',
dataType: 'script',
beforeSend: function() {
$.blockUI({message:'<h3>Sending data...</h3>'});
},
complete: function() {
$.unblockUI();
}
});
});
});
PHP can list all comment and show comment_id correctly but when I click at Edit , it show max number of comment_id and when I close form and click Edit again. The comment_id will reduce comment_id number untill no comment_id.
Can I use php and javascript create form edit data or I have to send data to new page?
if the user has the right to comment it means he is logged, so basically you can get the id from session, cookie; doesn't make sens to extract here the user id OR you can make the check if he has the right to comment ( user_id is same with session one).
just make the switch between and like this:
<
<div id="showtext<?php echo $comment_id ?>" >
<span id="comment<?php echo $comment_id ?>"><?php echo $cm['detail'] ?></span>
Edit
<div>
<!-- this is invisible at start -->
<div id="showedit<?php echo $comment_id ?>" style="display:none">
<textarea id="edittext<?php echo $comment_id ?>"><?php echo $cm['detail'] ?></textarea>
Save comment
</div>
and javascript to toggle views:
$('.edit-comment').click(function() {
var id=$(this).attr("id");
$("#showedit"+id).show();
$("#showtext"+id).hide();
});
and to submit
$('.submit-comment').click(function() {
var id=$(this).attr("id");
var comment=$("#edittext"+id).val();
//send the data via ajax with parameters id and comment to alter the row, in php add the user id from session, cookie and on success:
//replace the old text
$("#comment"+id).html(comment);
//and make the switchback
$("#showedit"+id).hide();
$("#showtext"+id).show();
})
Related
Well,
I have this code which generate CSS on-off button in a php while loop:
<div class="onoffswitch">
<input type="hidden" name="hiddenID" value="<?php echo $id; ?>">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch<?php echo $i ?>" <?php echo $status; ?>>
<label class="onoffswitch-label" for="myonoffswitch<?php echo $i; ?>">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
When the on-off button changes then I am calling a PHP page using jQuery/Ajax.
jQuery/Ajax Code:
$(document).ready(function () {
$(".onoffswitch").change(function() {
var hiddenID = $(this).find("[name='hiddenID']").val()
var status = $('.onoffswitch-checkbox').val();
$.ajax({
type: 'post',
url: 'changeInlineData.php',
data: {
'id' : hiddenID,
'status' : status,
},
dataType : 'html',
success: function ( result ) {
$('.validation_msg').html(result);
}
});
});
});
Here you can see I just pass 2 key which is id and status in a php page. Now in php page I see the id value only not status value. Everytime status key is showing 0. It's should be 0 or 1.
PHP page:
<?php
echo $id = (int) $_POST['id'];
echo $status = (int) $_POST['status'];
Can you tell me what I am doing wrong?
Update:
I see in console log network tab that is showing status:on always if I toggle the button to on or off!!
Form Data
id:2203
status:on
You have to take value of checked checkbox. Change your status var in jquery as below :
var status = $('.onoffswitch-checkbox:checked').val();
I have a comment system that is working fine. But now I wanna make it work into a loop, so it needs is add an id to identify as unique every "comment box", "submit buttom", so on. Due to there are many classes involved I got lost adding the index to the js function ... and actually everything.
This is my code:
<?php
$sql = mysql_query("SELECT * FROM tblopiniones_persopoli WHERE id_post = '$id_post' AND intActivo = '1' LIMIT 0,10") or die(mysql_error());
while($affcom = mysql_fetch_assoc($sql)){
$name = $affcom['intName'];
$email = $affcom['email'];
$comment = $affcom['strComment'];
$date = $affcom['date'];
// Get gravatar Image
// https://fr.gravatar.com/site/implement/images/php/
$default = "mm";
$size = 35;
$grav_url = "http://www.gravatar.com/avatar/".md5(strtolower(trim($email)))."?d=".$default."&s=".$size;
?>
<div class="cmt-cnt">
<img src="<?php echo $grav_url; ?>" />
<div class="thecom">
<h5><?php echo ObtenerNombreFull_Usuario($name); ?></h5><span data-utime="1371248446" class="com-dt"></span>
<br/>
<p>
<?php echo $comment; ?>
</p>
</div>
</div><!-- end "cmt-cnt" -->
<?php } ?>
<div class="new-com-bt" id="<?php echo $m; ?>">
<span id="">Escribe un comentario ...</span>
</div>
<div class="new-com-cnt">
<a name="coment_box" id="coment_box">
<input type="hidden" id="name-com" name="name-com" value="<?php echo $_SESSION['MM_IdUser']; ?>" />
<input type="hidden" id="mail-com" name="mail-com" value="<?php echo 'xxxxxxx#gmail.com'; ?>" />
<input type="hidden" id="pic-com" name="pic-com" value="<?php echo ObtenerNombreFoto_Usuario($_SESSION['MM_IdUser']); ?>" />
<textarea class="the-new-com" placeholder="Ingresa tu comentario"></textarea>
<div class="bt-add-com">Publicar comentario</div>
<div class="bt-cancel-com">Cancelar</div>
</a>
</div>
My Js code:
<script type="text/javascript">
$(function(){
//alert(event.timeStamp);
$('.new-com-bt').click(function(event){
$(this).hide();
$('.new-com-cnt').show();
$('#coment_box').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 theName = $('#name-com');
var theMail = $('#mail-com');
var thePic = $('#pic-com');
if( !theCom.val()){
alert('¡Por favor escribe un comentario!');
}else{
$.ajax({
type: "POST",
url: "add-comment.php",
data: 'act=add-com&id_post='+<?php echo $id_post; ?>+'&name='+theName.val()+'&email='+theMail.val()+'&comment='+theCom.val()+'&pic='+thePic.val(),
success: function(html){
theCom.val('');
/*theMail.val('');
theName.val('');*/
$('.new-com-cnt').hide('fast', function(){
$('.new-com-bt').show('fast');
$('.new-com-bt').before(html);
})
}
});
}
});
});
I'll highly appreciate any help with this lack of knowledge & expertise.
Many thanks in advance.
I have one question for you.
Have this code right now:
<?php
use yii\helpers\Url;
use yii\helpers\Html;
use yii\web\JsExpression;
?>
<form action="<?= Url::to(['/worker/equipment/updatecol']) ?>" id="editcol" method="POST">
<div class="form-group">
<?php foreach($columns as $column) { ?>
<label >Edit title</label>
<input type="text" class="form-control" value="<?= $column->equipment_column_title ?>" name="equipment_column_title" placeholder="Put name.." />
<?php } ?>
</div>
<div class="form-group">
<?php foreach($columns as $column) { ?>
<label>Edit type</label>
<select class="form-control" name="equipment_column_type">
<option value="1" <?php if ($column->equipment_column_type==1) echo "selected='selected'"?>>Int</option>
<option value="2" <?php if ($column->equipment_column_type==2) echo "selected='selected'"?>>Varchar</option>
<option value="3" <?php if ($column->equipment_column_type==3) echo "selected='selected'"?>>Date</option>
<option value="3" <?php if ($column->equipment_column_type==4) echo "selected='selected'"?>>File</option>
</select>
<?php } ?>
</div>
<input type="hidden" name="_csrf" value="<?=Yii::$app->request->getCsrfToken()?>" />
<?php foreach($columns as $column) { ?>
<input type="hidden" name="column" value="<?= $column->equipment_column_id ?>" />
<?php } ?>
<button type="submit" class="btn btn-primary">Update column</button>
</form>
</div>
This is my form for edit choosen column right?
Its yii2 framework and now my problem. This is form for editing my columns, but i dont want list all of fields, but one field i wanna edit. How i do it?
This function is my form controller:
public function actionUpdatecolumnform()
{
$columns = EquipmentColumn :: find() -> all();
return $this->renderAjax('_editcol',['columns'=>$columns]);
}
And this i have for updating columns:
public function actionUpdatecol(){
$model = EquipmentColumn::findOne($_POST['id']);
$model -> equipment_column_title = $_POST['equipment_column_title'];
$model -> equipment_column_type = $_POST['equipment_column_type'];
$model -> update();}
Now we going for jquery, where i have modal.
$('.editcolumn').click(function()
{
var essay_id = $(this).data('id');
$.ajax({
cache: false,
type: 'POST',
url: '".Url::to(['/worker/equipment/updatecolumnform'])."',
data: 'id='+essay_id,
success: function(data)
{
console.log(data);
$('#update_col').modal('show');
$('#edit_col').html(data);
}
});
});
$('#editcol').submit(function(){
var th=$(this);
console.log(th);
$.ajax({
url: '".Url::to(['/worker/equipment/updatecol'])."',
type: 'POST',
data: th.serialize(),
error: function(data,status,text) {alert(text);},
success: function(data) {
var n=noty({
text: '".Yii::t('app', 'Type was saved')."',
type:'success',
layout: 'topCenter',
animation: {
open: 'animated bounceInLeft', // Animate.css class names
close: 'animated bounceOutLeft', // Animate.css class names
easing: 'swing', // unavailable - no need
speed: 500 // unavailable - no need
}
})
}
})
})
This two part of jquery scripts i using for submit edited fields.
My question is: This code list all of columns with titles and types, but i want list only one column with title and type which i want edit.
Thanks for the help :)
I think there is a problem with foreach, but im not sure. :)
You update for given id but render all. With foreach you see all of records. If you want to see just the edited one data record, send one data to view.
$columns = EquipmentColumn::model()->findAllByPk($id);
With that code you get all the infos by given id which belongs to changed record.
My php file loops out each blog post in my database and also creates the comments section. The blogs post great. When I comment on the most recent blog post, the comment does not appear but it seems to add a line as the space expands, just does not include the comment. When I comment on the first post, it works great and exactly as expected. I can't figure out how to correct it. I thought it was a matter of add a .closest to the comment-block selector but that didn't seem to do the trick.
I appreciate any help or feedback!
PHP/HTML
<?php // retrive post
include('php/config.php');
include ('php/function.php');
dbConnect();
$blog_query = mysql_query(
'SELECT *
FROM Blog
ORDER BY DATE DESC');
$date = date_create($row['DATE']);
while($row = mysql_fetch_array($blog_query)): ?>
<div class="post">
<h2><?php echo $row['TITLE']?></h2>
<h3><?php echo date_format($date, 'l, F j, Y')?></h3>
<p><?php echo $row['CONTENT']?></p>
</div>
<h2>Comments.....</h2>
<div class="comment-block">
<?php // retrieve comments with post id
$comment_query = mysql_query(
"SELECT *
FROM Comments
WHERE BID = {$row['ID']}
ORDER BY CID DESC
LIMIT 15") or die(mysql_error());
while($comment = mysql_fetch_array($comment_query)):?>
<div class="comment-item">
<div class="comment-post">
<h3><?php echo $comment['UNAME'] ?> <span>said....</span></h3>
<p><?php echo $comment['COMMENT']?></p>
</div>
</div>
<?php endwhile?>
</div>
<h2>Submit new comment</h2>
<!--comment form -->
<form id="form" method="post">
<div>
<input type="hidden" name="BID" value="<?php echo $row['ID']?>">
<label> <span>Display Name: *</span>
<input id="uname" type="text" tabindex="1" name="commentName" required />
</label>
</div>
<div>
<label> <span>Comment: *</span>
<textarea id="textarea" placeholder="Enter your comment here..." tabindex="2" name="commentMessage" required></textarea>
</label>
</div>
<div>
<input type="submit" id="submit" value="Submit Comment">
</div>
</form>
<?php endwhile?>
</div>
Jquery/Ajax:
var form = $('form');
var submit = $('#submit');
form.on('submit', function(e) {
// prevent default action
e.preventDefault();
// send ajax request
$.ajax({
url: 'php/ajaxcomment.php',
type: 'POST',
cache: false,
data: form.serialize(), //form serizlize data
beforeSend: function(){
// change submit button value text and disabled it
submit.val('Submitting...').attr('disabled', 'disabled');
},
success: function(data){
// Append with fadeIn see http://stackoverflow.com/a/978731
var item = $(data).hide().fadeIn(800);
$('.comment-block').append(item);
// reset form and button
form.trigger('reset');
submit.val('Submit Comment').removeAttr('disabled');
},
error: function(e){
alert(e);
}
});
});
ajajcomment.php
<?php
if (isset( $_SERVER['HTTP_X_REQUESTED_WITH'] )):
include('config.php');
include('function.php');
dbConnect();
if (!empty($_POST['commentName']) AND !empty($_POST['commentMessage']) AND !empty($_POST ['BID'])) {
$name = mysql_real_escape_string($_POST['commentName']);
$comment = mysql_real_escape_string($_POST['commentMessage']);
$BID = mysql_real_escape_string($_POST['BID']);
mysql_query("
INSERT INTO Comments
(UNAME, BID, COMMENT)
VALUES('{$name}', '{$BID}', '{$comment}')");
}
?>
<div class="comment-item">
<div class="comment-post">
<h3><?php echo $name ?> <span>said....</span></h3>
<p><?php echo $comment ?></p>
</div>
</div>
<?php
dbConnect(0);
endif?>
What does "php/ajaxcomment.php" return when you post a comment? Pure HTML?
I'd make the "php/ajaxcomment.php" return JSON, for example:
<?php
/*
here you do what ever you do now,
Insert the new comment to database, etc
*/
// Then you return the inserted data:
$data = array(
'UNAME' => $username,
'COMMENT' => $comment,
);
header('Content-Type: application/json');
print json_encode( $data );
?>
..and change the ajax:
...
...
success: function(data){
var commentItem = $('<div/>').addClass('comment-item');
var commentPost = $('<div/>').addClass('comment-post');
var user = $('<h3/>').html( data.UNAME +'<span>said...</span>' );
var comment = $('<p/>').html( data.COMMENT );
commentItem.html( commentPost.html( user + comment ) ).hide().fadeIn(800);
$('.comment-block').append(commentItem);
// reset form and button
form.trigger('reset');
submit.val('Submit Comment').removeAttr('disabled');
},
...
...
SO i have this piece of AJAX that work as it should be but i want to add some validation to it.I dont want it to send empty information.The AJAX is done for a comment system.It takes the value from the form and then with php it inserts it to the databse. The Problem i am haveing is that it just insert empty comment to the database
index.php
<?php
require_once("menu.php");
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="comments.js" type="text/javascript" ></script>
<script type="text/javascript">
function validateForm()
{
var comment = document.getElementsByName('comment').value;
if (comment == "" )
{
alert("Please fill in all the fields");
return false;
}
else
{
return true;
}
}
</script>
<?php
$connection = connectToMySQL();
$selectPostQuery = "SELECT * FROM (SELECT * FROM `tblposts` ORDER BY id DESC LIMIT 3) t ORDER BY id DESC";
$result = mysqli_query($connection,$selectPostQuery)
or die("Error in the query: ". mysqli_error($connection));
while ($row = mysqli_fetch_assoc($result))
{
$postid = $row['ID'];
?>
<div class="wrapper">
<div class="titlecontainer">
<h1><?php echo $row['Title']?></h1>
</div>
<div class="textcontainer">
<?php echo $row['Content']?>
</div>
<?php
if (!empty($row['ImagePath'])) #This will check if there is an path in the textfield
{
?>
<div class="imagecontainer">
<img src="images/<?php echo "$row[ImagePath]"; ?>" alt="Article Image">
</div>
<?php
}
?>
<div class="timestampcontainer">
<b>Date posted :</b><?php echo $row['TimeStamp']?>
<b>Author :</b> Admin
</div>
<?php
#Selecting comments corresponding to the post
$selectCommentQuery = "SELECT * FROM `tblcomments` LEFT JOIN `tblusers` ON tblcomments.userID = tblusers.ID WHERE tblcomments.PostID ='$postid'";
$commentResult = mysqli_query($connection,$selectCommentQuery)
or die ("Error in the query: ". mysqli_error($connection));
#renderinf the comments
echo '<div class="comment-block_' . $postid .'">';
while ($commentRow = mysqli_fetch_assoc($commentResult))
{
?>
<div class="commentcontainer">
<div class="commentusername"><h1>Username :<?php echo $commentRow['Username']?></h1></div>
<div class="commentcontent"><?php echo $commentRow['Content']?></div>
<div class="commenttimestamp"><?php echo $commentRow['Timestamp']?></div>
</div>
<?php
}
?>
</div>
<?php
if (!empty($_SESSION['userID']) )
{
?>
<form method="POST" class="post-frm" action="index.php" onsubmit="return validateForm();">
<label>New Comment</label>
<textarea name="comment" class="comment"> </textarea>
<input type="hidden" name="postid" value="<?php echo $postid ?>">
<input type="submit" name ="submit" class="submitComment"/>
</form>
<?php
}
echo "</div>";
echo "<br /> <br /><br />";
}
require_once("footer.php") ?>
My AJAX code.I have tried to do some validation but it doesnt work properly and i dont know what is wrong with it.I am quite new to AJAX so not rlealy able to debug it myself.
$(document).ready(function(){
$(document).on('click','.submitComment',function(e) {
e.preventDefault();
//send ajax request
var form = $(this).closest('form');
var comment = $('.comment');
if (!comment.val()){
alert('You need to write a comment!');
}
else{
$.ajax({
url: 'ajax_comment.php',
type: 'POST',
cache: false,
dataType: 'json',
data: $(form).serialize(), //form serialize data
beforeSend: function(){
//Changeing submit button value text and disableing it
$(this).val('Submiting ....').attr('disabled', 'disabled');
},
success: function(data)
{
var item = $(data.html).hide().fadeIn(800);
$('.comment-block_' + data.id).append(item);
// reset form and button
$(form).trigger('reset');
$(this).val('Submit').removeAttr('disabled');
},
error: function(e)
{
alert(e);
}
});
}
});
});
My php code to insert into the database.
<?php
if (isset($_SERVER['HTTP_X_REQUESTED_WITH'])):
session_start();
include('connection.php');
$connection = connectToMySQL();
$userId = $_SESSION['userID'];
$username = $_SESSION['username'];
$postId = $_POST['postid'];
$comment = $_POST['comment'];
$date_format = " Y-m-d g : i : s";
$time = date ($date_format);
$insertCommentQuery = "INSERT INTO `tblcomments`
(`Content`,`UserID`,`PostID`,`Timestamp`)
VALUES (
'$comment','$userId','$postId',
CURRENT_TIMESTAMP)";
$result = mysqli_query($connection,$insertCommentQuery);
$obj = array();
$obj['id'] = $postId;
$obj['html'] = '<div class="commentcontainer">
<div class="commentusername"><h1> Username :'.$username.'</h1></div>
<div class="commentcontent">'.$comment.'</div>
<div class="commenttimestamp">'.$time.'</div>
</div>';
echo json_encode($obj);
connectToMySQL(0);
endif?>
You never call the function validateForm()
And this part
if (!comment.val()){
alert('You need to write a comment!');
}
will always pass if there is a input field with the class comment, even if it's empty. You could do something like:
//send ajax request
if(validateForm()===false){
alert('You need to write a comment!');
return false;
}
else{
....
You could try to change the comment.val() to comment.text() since you are using a textarea and see if that solves your problem. The change is to be modified in your js code