error filling in testfield using mysql and php javascript ajax - javascript

slightly varied question but I have a script that runs and gets data from a mysql db. The end result shows them as buttons, when i click the buttons it gives me an alert with the correct id number correspsonding to whats selected, but when i try to put that into a textfield is isnt the same, its basically the last in the mysql? WHy would the alert show the correct and the updated textfield so totally different information??
The working php that alerts the correct info is :
<?php
include('config.php');
$action = $_REQUEST['action'];
if($action=="showAll"){
$stmt=$dbcon->prepare('SELECT product_id, product_name FROM products ORDER BY product_name');
$stmt->execute();
}else{
$stmt=$dbcon->prepare('SELECT product_id, product_name FROM products WHERE cat_id=:cid ORDER BY product_name');
$stmt->execute(array(':cid'=>$action));
}
?>
<div class="row">
<?php
if($stmt->rowCount() > 0){
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
extract($row);
?>
<div class="col-xs-3">
<div style="border-radius:3px; border:#cdcdcd solid 1px; padding:22px;"><button type="button" class="btn btn-default" onclick="alert('<? echo $product_id; ?>')"><?php echo $product_name; ?></button></div><br />
</div>
<?php
}
}else{
?>
<div class="col-xs-3">
<div style="border-radius:3px; border:#cdcdcd solid 1px; padding:22px;"><button type="button" class="btn btn-default" onclick="alert('<? echo $product_id; ?>')"><?php echo $product_name; ?></button></div><br />
</div>
<?php
}
?>
</div>
<div>
text : <input id="textField1" type="text" value="0" align="right" size="13"/><br>
</div>
<script>
function display()
{
document.getElementById("textField1").value = "<? echo $product_name; ?>";
}
</script>
But if change the button to use the 'display script' it just shows last in database?

Related

How to get values from Input tag using JAVASCRIPT ,the value of the input tags are fetched from mysql database using php

the JS alert need to appear whenever i'm submitting the box,the alert message need to consists an value which is get from the input tag,the value of the input tags are fetched from mysql database using php,whenever i'm submitting the form the JS alert displays an message with the first value of the table,whenever i'm submitting the remaining form,also it gives an first value from the table without giving the related values
HOW to get it?
my code is below, check it. php while loop with html tags
<?php
include "connection.php";
$sqlll="SELECT * FROM feedback";
$result=mysqli_query($conn,$sqlll);
$count=mysqli_num_rows($result);
if($count > 0)
{
while($row=mysqli_fetch_assoc($result))
{
?>
<div class="msgshare">
<div class="contentt">
<div class="userr">
<h3><i class="fa fa-user-circle"></i><?php echo $row["username"] ?></h3>
<h5><?php echo $row["img_location"] ?></h5>
</div>
<div class="imgg">
<img src="../images/feedback/<?php echo $row["img_file"] ?>" height="400px" width="400px">
</div>
<div class="likes">
<form class="likeform" onsubmit="likeso()" method="POST" action="likes.php">
<input type="hidden" id="imgile" name="imaggg" value="<?php echo $row["img_file"] ?>">
<?php
$imga=$row['img_file'];
$sql="SELECT * FROM likes WHERE `username`='$user11' AND `image`='$imga' AND `likes`='true';";
$reslt=mysqli_query($conn,$sql);
$row1=mysqli_num_rows($reslt);
$sql3="SELECT * FROM likes WHERE `image`='$imga';";
$rslt=mysqli_query($conn,$sql3);
$count=mysqli_num_rows($rslt);
if($row1 > 0)
{
echo '<button style="cursor:pointer;" name="like" type="submit" id="likepost" class="like-btn"><i id="empty" class="fa fa-heart pink"></i></button> '.$count.' likes';
}
else
{
echo '<button style="cursor:pointer;" class="willlike" name="like" type="submit" id="likepost" class="like-btn"><i id="empty" class="far fa-heart"></i></button> '.$count.' likes';
}
?>
</form>
</div>
<div class="descriptionn">
<p><span class="desc">DESCRIPTION : </span><?php echo $row["img_description"] ?></p>
</div>
</div>
</div>
<?php
}
}
else
{
echo "<p>There is no more Feedbacks are shared...</p>";
}
?>
the following is an JAVASCRIPT code for an onsubmit event.
<script>
function likeso()
{
var iage=document.querySelector('input').value;
var val="imagge=" + iage;
alert(val);
}
</script>
If you change the function call by adding event
<form class="likeform" onsubmit="likeso(event)" method="POST" action="likes.php">
And alter the function itself to use the event
function likeso(e)
{
var iage=e.target.querySelector('input').value;
var val="imagge=" + iage;
alert(val);
}
Also, you cannot duplicate ID values so
<input type="hidden" id="imgile" name="imaggg" value="<?php echo $row["img_file"] ?>">
should be changed to ( remove ID, it's not needed )
<input type="hidden" name="imaggg" value="<?php echo $row["img_file"] ?>">
The same holds for any element to which you assign an ID - it MUST be unique. If the purpose of the ID is to facilitate easy selection in Javascript using document.getElementById then having duplicate IDs makes a nonsense of that because which element should it select? Generally you can achieve most tasks without using an ID so in many cass it is best to remove them - especially when added in a loop.

HTML & PHP: Wrong button allignment and wrong output

So I have this comment system made with PHP and JS (dialogify) and I have two problems: one is obviously the buttons' allignment and the second is the output of the dialog. At the end of each line i get a <br> even though the line ends without going actually on a new line and the row won't update after pressing ok, I have to reload the page to actually see the updated content.
EDIT: Now the buttons are alligned
<div class="row">
<div class="col-sm-12 text-right">
<form method="post" action="">
<button class="btn btn-warning btn-sm" id="<?php echo $row['id']; ?>" value="Edit" type="button" onclick="edit_row('<?php echo $row['id']; ?>');" /><i class='fa fa-pencil'></i></button>
<button class="btn btn-danger btn-sm" name="delete_reply" type="submit"><i class='fa fa-trash'></i></button>
</form>
</div>
</div>
Here is the code I use to display the comments.
$query_reply = $mysqli->prepare("SELECT * FROM replies WHERE postID=?");
$query_reply = $mysqli->bind_param("i",$postid);
$query_reply ->execute();
$row = $query_reply->fetch_assoc();
<div id="content_val<?php echo $row['id']; ?>"><?php echo nl2br($row['reply']);?><br /></div>
The code for the insertion
if (isset($_POST['edit_row'])) {
$sql = $mysqli->prepare("UPDATE replies SET reply=? WHERE id=? AND postID=?");
$id = $_POST['id'];
$content = $_POST['content'];
$postid = $_SESSION['id'];
$sql->bind_param("sii", $content, $id, $postid);
if ($sql->execute()) {
$sql = $mysqli->prepare("SELECT * FROM replies WHERE postID='$id'");
$sql->bind_param("i", $postid);
$sql->execute();
}
}
EDIT 2: I managed to make the content update in real time by changing the action after $sql->execute();
if ($sql->execute()) {
print "success";
} else {
$error_message = "Problem in editing Record";
}

How to delete values from JSON object array in php?

I have a PHP code and JSON as shown below:
PHP Code:
<?php if (!empty($_POST) && isset($_POST['savechanges']) && $_POST['savechanges'] == 1 && isset($_SESSION['pageadmin'])) {
$output = array();
$output['en_desc']=$_POST['en_desc'];
$output['code']=$_POST['code'];
$fp = fopen('../feeds/ptp-ess_landing_scommittees.json', 'w');
fwrite($fp, json_encode($output));
fclose($fp);
}
if(file_exists('../feeds/ptp-ess_landing_scommittees.json')){
$data = json_decode(file_get_contents('../feeds/ptp-ess_landing_scommittees.json'));
}
?>
<?php if($data) { ?>
<form method="post" id="myform" style="text-align:left;">
<input type="hidden" id="savechanges" name="savechanges" value="1">
<div style="text-align:center; margin-right:9px; margin-bottom:24.703px;">
<button type="submit">Save</button>
</div>
<?php foreach ($data->code as $key => $value) { ?>
<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
<button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
<input type="text" name="code[]" style="margin-right:10px;" value="<?= $data->code[$key] ?>">
<input type="text" name="en_desc[]" value="<?= $data->en_desc[$key] ?>">
</div>
<?php } ?>
</form>
<?php } else { echo 'Cannot read JSON settings file'; }?>
JSON:
{"code":["AEFA","AGFO"], "en_desc":["Foreign Affairs and International Trade","Agriculture and Forestry"]}
The following DOM is generated through the PHP/JSON code above:
DOM (HTML):
<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
<button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
<input type="text" name="code[]" style="margin-right:10px;" value="AEFA">
<input type="text" name="en_desc[]" value="Foreign Affairs and International Trade">
</div>
<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
<button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
<input type="text" name="code[]" style="margin-right:10px;" value="AGFO">
<input type="text" name="en_desc[]" value="Agriculture and Forestry">
</div>
The following JS code deletes a row from the DOM on click of a delete button. On refreshing the page,
the deleted row comes back again as everything is rendered through JSON.
JS code:
<script>
function removeRow(el) {
el.parentNode.remove();
}
</script>
Problem Statement:
The above JS code is deleting the row (on click of a delete button) from the DOM but on refresing the page, everything is rendered again.
I am wondering what PHP code I need to add so that it delete the values from the JSON on saving the form when row is deleted from DOM through JS.
Step 1: User delete the row from the DOM on click of a delete button.
Step 2: On saving the form and rendering the page, that deleted row should not be present.
I know I have to use unset function in order to remove the values from the JSON but I am not sure how I can integrate it in the form.
unset($data->code);
unset($data->en_desc);
You have a typo here:
$data = json_decode(file_get_contents('../feeds/ptp-ess_landing_scommittees.json'));
it should be
$data = json_decode(file_get_contents('../feeds/ptp-ess_landing_committees.json'));
Look at the "s" :)
Edit: you also were saving the new file without actually checking if there is a post happening, here is the full code:
<?php
if (isset($_POST['submit'])) {
$output = array();
$output['en_desc'] = $_POST['en_desc'];
$output['code'] = $_POST['code'];
$fp = fopen('../feeds/ptp-ess_landing_committees.json', 'w');
fwrite($fp, json_encode($output));
fclose($fp);
}
if (file_exists('../feeds/ptp-ess_landing_committees.json')) {
$data = json_decode(file_get_contents('../feeds/ptp-ess_landing_committees.json'));
}
?>
<?php if ($data) { ?>
<form method="post" id="myform" style="text-align:left;">
<div style="text-align:center; margin-right:9px; margin-bottom:24.703px;">
<button type="submit" name="submit">Save</button>
</div>
<?php foreach ($data->code as $key => $value) { ?>
<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
<button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
<input type="text" name="code[]" style="margin-right:10px;" value="<?= $data->code[$key] ?>">
<input type="text" name="en_desc[]" value="<?= $data->en_desc[$key] ?>">
</div>
<?php } ?>
</form>
<?php } else {
echo 'Cannot read JSON settings file';
} ?>
<script>
function removeRow(el) {
el.parentNode.remove();
}
</script>

How to hide any child elements inside a parent div using jquery

I have two cases, One when there is comments and one when there is not. I have separated two cases with php like this:
<div class="box">
<textarea required id="reviews_comment" name="comment" value="<?php echo $this->input->post('comment'); ?>" ></textarea>
<button style="display: none;" id="comment_button" class="btn btn-success" >Add Comment</button>
<div id="comment_div">
<b>Comments...</b></br>
<?php if($comment_data){ foreach ($comment_data as $data) {?>
<b>By: <span><?php echo $data->first_name.' '.$data->last_name; ?></span></b>
<p><?php echo $data->comment; ?></p>
<?php } } else{?>
<div id="no_comment_case" ><h1>No comments yet...</h1></div>
<?php } ?>
</div>
Now when there is no comment No comment case will be displayed. After user posts a comment with ajax i have tried the following code to hide the no comment case and only append the recent comment, but the no comment case is not being hidden.
The jquery code is:
success: function(msg){
console.log(msg);
if(msg=="success")
{
$('#comment_button').hide();
$('#reviews_comment',$('#comment_div')).hide();
// $('div#comment_div> div:eq(2)').css("display", "none");
html='<b>By: <span>'+username+'</span></b><p>'+review+'</p>';
$('#comment_div').append(html);
}
}
How can I do it. Any kind of suggestion are highly appreciated. Thanks.
Enclose comment_div properly,
<div class="box">
<textarea required id="reviews_comment" name="comment" value="<?php echo $this->input->post('comment'); ?>" ></textarea>
<button style="display: none;" id="comment_button" class="btn btn-success" >Add Comment</button>
<div id="comment_div">
<b>Comments...</b></br>
<?php if($comment_data){ foreach ($comment_data as $data) {?>
<b>By: <span><?php echo $data->first_name.' '.$data->last_name; ?></span></b>
<p><?php echo $data->comment; ?></p>
<?php }
} else{?>
<div id="no_comment_case" ><h1>No comments yet...</h1></div>
<?php } ?>
</div>
</div>
Ajax call:
success: function(msg){
if(msg=="success")
{
$('#comment_button').hide();
$('#reviews_comment,#comment_div,#no_comment_case').hide();
html='<b>By: <span>'+username+'</span></b><p>'+review+'</p>';
$('#comment_div').append(html);
}
}

Move child div into a parent div

Im trying to output posts and comments reddit style. This is the expected result (mockup HMTL) but currently I look like this.
This is the code I'm using right now to output posts and comment:
<?php if(!empty(getMessage())): ?>
<div class="container">
<h1>The nested comment exampel!</h1>
<?php
$i=0; //initialize flag
foreach (getMessage() as $value){ ?>
<div class="comment" id="<?= $value->id; ?>">
//you don't need level class
<?php if($value->visible == 0) : ?>
<?= $value->date ?><br>
Deleted
<?php elseif($value->visible == 1): ?>
<?= $value->date ?> X <?= 'id: '. $value->id . ', sort order: ' .$value->sort_order . ', level: '.$value->level ;?><br>
<?= $value->comment_text ?>
<form action="index.php" method="post">
<input type="hidden" name="id" value="<?= $value->id ?>" />
<input type="hidden" name="parent" value="<?= $value->reply_to ?>" />
Add comment: <input type="text" name="svar">
<input type="submit">
</form>
<?php endif; ?>
<?php
$i++; //sum flag
}
for($x=0; $x<=$i; $x++) { //paint div closers
echo '</div>' ;
}
?>
<? endif; ?>
</div>
What if I change the foreach statement to
<?php if(!empty(getMessage())): ?>
<div class="container">
<h1>The nested comment exampel!</h1>
<?php foreach (getMessage() as $value){ ?>
<div class="level_<?= $value->level; ?> comment" id="<?= $value->id; ?>">
<?php if($value->visible == 0) : ?>
<?= $value->date ?><br>
Deleted
<?php elseif($value->visible == 1): ?>
<?= $value->date ?> X <?= 'id: '. $value->id . ', sort order: ' .$value->sort_order . ', level: '.$value->level ;?><br>
<?= $value->comment_text ?>
<form action="index.php" method="post">
<input type="hidden" name="id" value="<?= $value->id ?>" />
<input type="hidden" name="parent" value="<?= $value->reply_to ?>" />
Add comment: <input type="text" name="svar">
<input type="submit">
</form>
<?php endif; ?>
</div>
<?php } endif; ?>
</div>
And output everything "flat". And depending on class, move it to the "right" div with jQuery.
So if <div class="level_0 comment" id="1"> is the parent div (level_0), div with level 1 <div class="level_1 comment" id="3"> should be inside the parent div. And <div class="level_2 comment" id="14"> level 2 should be inside the child div, level 1. This fiddle hopefully gives a better understanding: And this tree of comments can contain numerous of the same level class, so how do we know it is moves inside right div? Due to SELECT * FROM tree ORDER BY reply_to ASC, sort_order ASC, every comment is fetch already sorted. So it won't be a problem, the child should be moved "one" div up.
Here is some sample data.
This is the function I am using to retrieve data:
function getMessage(){
$app = new Connection();
$sql = 'SELECT *
FROM tree ORDER BY reply_to ASC, sort_order ASC';
$query = $app->getConnection()->prepare($sql);
$query->execute();
return $query->fetchAll();
}
How can I output data reddit style with jQuery.
Surely this is a CSS fix?
Output all comments in a list and pad each one according to the level class.
.level_0 { margin-left: 0px; }
.level_1 { margin-left: 10px; }
.level_2 { margin-left: 20px; }
etc..

Categories