We Keep Coding

I can't take the value attribute on button | jQuery AJAX

I made ajax script for delete button and have data attribute based on id on the table in database. This is the HTML :
<textarea name="komentar" id="komentar" cols="30" rows="10"></textarea><br>
<input type="submit" name="submit" id="submit" value="Submit"><br>
<br><br><hr><br>
<!-- Komentar akan ada di dalam sini -->
<div id="komentar_wrapper">
<?php
include_once 'db.php';
$query = "SELECT * FROM komentar ORDER BY id DESC";
$show_comments = mysqli_query($db, $query);
foreach ($show_comments as $comment) { ?>
<p id="komentar_<?php echo $comment['id']; ?>"><?php echo $comment['komentar']; ?>
<!-- data-id-> data attribute, buat spesifik id mana yang mau di hapus -->
<button id="button_hapus" class="hapus_komentar" data-id="<?php echo $comment['id']; ?>">Delete</button>
</p>
<?php } ?>
</div>
And when i try to console the data-id, it wont show the value on console. This is the script :
$(".hapus_komentar").on("click", function() {
console.log($(this).attr("data-id"));
});
When i click the button it say undefined, i think it should print the id based on button data-id

try this i have prepared a demo code for you and runs ok
<?php
$as = array(1,2,3,4,5,6,7);
foreach ($as as $comment) { ?>
<p id="komentar_<?php echo $comment ?>"><?php echo $comment; ?>
<button id="button_hapus" class="hapus_komentar" data-id="<?php echo $comment; ?>">Delete</button>
</p>
<?php
}
?>
<script type="text/javascript">
$(".hapus_komentar").on("click", function() {
alert($(this).attr("data-id"));
//console.log($(this).attr("data-id"));
});
</script>

use Jquery.data(). and use event delegation since your button is generated dynamically.
$(document).on("click",".hapus_komentar",function() {
console.log($(this).data("id"));
});
You can use $(this).data("id") to get the id.

Your code is correct. Just check in HTML weather data-id will have value or not. Maybe that's the reason you are not getting proper value. As well you have taken that button in the loop so make sure on individual button click you will get all buttons data-id.

$(".hapus_komentar").on("click", function() {
console.log($(this).data("id"));
});
now use this.

$(document).on("click",".hapus_komentar",function() {
console.log($(this).attr("data-id"));
});

how to get value from php loop to div

i want to change div value when clicking php while loop.,
My php code
<?php $query = mysql_query("select * from tbl_sub_product where product_id='$id'");
while($row=mysql_fetch_array($query))
{ ?>
<div><a href="#" class="showElement" id="showElement" >
<?php echo $row['name']; ?><?php echo $row['id']; ?></a></div>
<?php } ?>
my query was
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var $target = $('#target');
$(".showElement").click( function(e) {
e.preventDefault();
$target.append( $(this).text() );
});
});
</script>
i want the result in this div
<div id="target">user Id:<php echo $id ?>User Nmae:<?php echo $name ?>user designation :<?php echo $designation ?></div>
what changes i want to do my code for getting data in my second div

You're asking to take the mysql data from php and magically know what it is without querying again with AJAX or some other request.
There are many ways you can do this, but the simplest is to store the exact view of what you want in a child div below the a tag.
You need to change to prepared statements too.... If you don't want to fine just change the stmt stuff back to what you have and row will do what you want.
<style>
.hidden{
display: none;
}
</style>
<?php
$stmt = mysqli_prepare("select * from tbl_sub_product where product_id='$id'");
$stmt->execute();
$result = $stmt->get_result();
while($row = $result->fetch_assoc()){
?>
<div>
<a href="#" class="showElement" >
<?php echo $row['name']; ?> <?php echo $row['id']; ?>
</a>
<div class="hidden getTarget">
user id: <php echo $row['id']; ?>
User name: <?php echo $row['name']; ?>
user designation: <?php echo $row['designation']; ?>
</div>
</div>
<?php
}
?>
<script>
$(document).ready(function(){
var $target = $('#target');
$(".showElement").click( function(e) {
e.preventDefault();
$target.append( $(this).parent().find('.getTarget').text() );
});
});
</script>
Don't use ids in a loop. Unless you have a specific identifier to separate each one.
Don't copy and paste as well.. please read the code and understand it.

PHP Loop with jQuery hide/slide toggle (Repeater field WP)

I'm running a repeater field through WP that repeats the below content. I also have a jQuery bit of code that is set to toggle, how do I make it so not all divs open? As it seems to only be working on the first div.
Is it because it's inside of the loop?
<?php if( have_rows('business_dropdown') ) : while ( have_rows('business_dropdown') ) : the_row(); ?>
<a href="/#/" onClick="submitComment(); return false;" class="AddCityA">
<?php echo the_sub_field('title'); ?>
</a>
<div class="AddCity">
<?php echo the_sub_field('content'); ?>
</div>
<?php endwhile; endif; ?>
jQuery:
jQuery(document).ready(function () {
$('.AddCity').hide();
$('.AddCityA').click(function () {
$('.AddCity').slideToggle("slow");
});
});

In order to limit to the next .AddCity only, use .next()
jQuery(document).ready(function () {
$('.AddCity').hide();
$('.AddCityA').click(function () {
$(this).next('.AddCity').slideToggle("slow");
});
});

Making a DIV display none or block depending on the URL (GET)

I would like to make a system where a user click a page number and the div with the page ID as its ID displays block whilst the rest displays none.
Here is what code I have already:
<script type="text/javascript">
//initialize page divs
$('#page-1').css('display', 'none');
$('#page-2').css('display', 'none');
</script>
<?php
if(isset($_GET['page'])){
$page = $_GET['page']; ?>
<script type="text/javascript">
$('#page-<?php echo $page; ?>').css('display', 'block');
</script><?php
} else {
$page = "1"; ?>
<script>
$('#page-<?php echo $page; ?>').css('display', 'block');
</script><?php
}
?>
And the div is echo'd out in a foreach loop with the array_chunk() function.
Here is the div in it's form before echo'ing out:
<?php
$page_num = '0';
foreach (array_chunk($articles, 9, true) as $pre_array) {
$page_num = $page_num +1;
$div_id = "<div id=\"article-page\" class=\"page-". $page_num ."\">";
echo $div_id;
foreach (array_chunk($pre_array, 3, true) as $array){
echo '<div class="section group">';
foreach ($array as $article) { ?>
<div class="col span_1_of_3"><?php echo $article['article_title']; ?><br /> <?php $article_content = $article['article_content']; if(strlen($article_content)<30) { echo $article_content; } else { echo("" . substr($article_content, 0, 30) . "..."); }?><br /><small>Posted <?php echo date('l dS F Y', $article['article_timestamp']); ?></small></div>
<?php }
echo '</div>';
}
echo '</div>';
} ?>
End result for example would be
<div id="article-page page-1">
I have tried using inline styles and getting JS to change it, I have also used php if statements then use html inside the statement to get the style tags to change it.
NO LUCK... Help please.

The id should not contain spaces.
As an HTML element can have only one id, but,
it can have multiple classes separated by spaces.
But, class can have.
Thus:
<div id=\"article-page page-". $page_num ."\">
Change it to
<div id=\"article-page" class=\"page-". $page_num ."\">
And make changes accordingly, it must work.
Refer the corrected code below:
<script type="text/javascript">
//initialize page divs
$('.page-1').css('display', 'none');
$('.page-2').css('display', 'none');
</script>
<?php
$page = (isset($_GET['page'])) ? $_GET['page'] : 1;
?>
<script type="text/javascript">
$('.page-<?php echo $page; ?>').css('display', 'block');
</script>
EDIT:
<script type="text/javascript">
$(function(){
$('.page-<?php echo $page; ?>').css('display', 'block');
});
</script>

your ID is containing a space, try using a class instead. or you can use that and call that in your jQuery as $('#article-page page-". $page_num ."').css(......)

AJAX comment system Validation problems

So i am haveing this page where it is displaying articles andunderneet each article it will have a textarea asking allowing the user to insert a comment.I did the AJAX and it works fine.Some of the validation works fine aswell(Meaning that if the textarea is left empty it will not submit the comment and display an error).The way i am doing this validation is with the ID.So i have multi forms with the same ID.For the commets to be submited it works fine but the validtion doesnt work when i go on a second form for exmaple it only works for the first form
AJAX code
$(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().length > 1)
{
$.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);
}
});
}
else
{
alert("Hello");
}
});
});
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>
<?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" >
<label>New Comment</label>
<textarea id="comment" 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") ?>
Again the problem being is the first form works fine but the second one and onwaord dont work properly

try this:
var comment = $('.comment',form);
instead of
var comment = $('#comment');
That way you're targeting the textarea belonging to the form you're validating
ps.
remove the id's from the elements or make them unique with php, all element id's should be unique