We Keep Coding

show and hide element in jquery with ajax

I create survey poll in wordpress plugin to display questions i use ajax to display it
this is my html code
<div id="my_poll">
<button class="start" id="start"><b><?php _e('Start poll questions'); ?></b></button>
<div id="poll" class="container mt-sm-5 my-1">
<form>
<?php
if ($ques->have_posts()) {
while ($ques->have_posts()) {
$ques->the_post();
global $post;
$ID = $post->ID;
$option = get_post_meta($ID, "op1", true);
$nonce = wp_create_nonce("my_user_vote_nonce");
$link = admin_url('admin-ajax.php?action=my_user_vote&post_id=' . $ID . '&nonce=' . $nonce);
$ques_id = 'Q-' . $ID;
?>
<div id="<?php echo $ques_id ?>" class="questions">
<div class="question ml-sm-5 pl-sm-5 pt-2">
<h3><b><?php _e('Poll Survey'); ?></b></h3>
<div class="py-2 h5"><b class="msg"><?php the_title() ?></b></div>
<div class="ml-md-3 ml-sm-3 pl-md-5 pt-sm-0 pt-3" id="options">
<label class="options"><?php _e($option['op1']['op1']); ?> <input type="radio" name="framework" value="<?php esc_attr_e($option['op1']['op1']) ?>"> <span class="checkmark"></span> </label>
<label class="options"><?php _e($option['op2']['op2']); ?> <input type="radio" name="framework" value="<?php esc_attr_e($option['op2']['op2']) ?>"> <span class="checkmark"></span> </label>
<label class="options"><?php _e($option['op3']['op3']); ?> <input type="radio" name="framework" value="<?php esc_attr_e($option['op3']['op3']) ?>"> <span class="checkmark"></span> </label>
</div>
<div class="d-flex align-items-center pt-3">
<div class="ml-auto mr-sm-5">
<button class="btn btn-success">
<?php
echo '<a class="user_vote" data-nonce="' . $nonce . '" data-post_id="' . $ID . '" href="' . $link . '">submit</a>';
?>
</button>
</div>
</div>
</div>
</div>
<?php
}
}
?>
</form>
</div>
</div>
and this is my ajax to show and hide elements
jQuery(document).ready(function() {
jQuery("#poll").hide();
var count = 0;
jQuery(".start").click(function(e) {
jQuery("#poll").show();
jQuery(".start").hide();
});
jQuery(".user_vote").click(function(e) {
e.preventDefault();
option = jQuery('input[name="framework"]:checked').val();
post_id = jQuery(this).attr("data-post_id");
nonce = jQuery(this).attr("data-nonce");
var idArr = [];
jQuery(".questions").each(function() {
idArr.push(jQuery(this).attr("id"));
});
jQuery.ajax({
type: "post",
dataType: "json",
url: myAjax.ajaxurl,
data: {
action: "my_user_vote",
post_id: post_id,
nonce: nonce,
option: option,
},
success: function(response) {
if (response.type == "success") {
count++;
if (count < idArr.length) {
jQuery(".questions").hide();
jQuery("#" + idArr[count]).show();
} else {
jQuery("#my_poll").hide();
alert('Thank you for your time.')
}
} else {
alert("Your vote could not be added");
}
},
});
});
});
in this jquery ajax whene i click start button i display all questoins divs.
but i want display the first question div.
Does anyone have any solutions?

Change the on click event function like below;
jQuery(".start").click(function(e) {
jQuery(".start").hide();
jQuery("#poll:first").show(); // id selector!
});
Better way, wirte "poll" word into the class attribute, dont use same id more than one time. If you change the id and class of the elements, your code must be like this;
jQuery(".start").click(function(e) {
jQuery(".start").hide();
jQuery(".poll:first").show(); // class selector
});
Also, you can use $ character instead of Jquery;
jQuery("div") EQUAL $("div")
Another way to find first element;
$(".start").click(function(e) {
$(".start").hide();
$(".poll").eq(0).show(); // class selector
});

insert data in database dynamically

$query = "select * from comments t1 inner join users t2 on t1.user_id = t2.UserId where usercomplain_id='$id'";
$run =mysqli_query($mysqli,$query);
while($row=mysqli_fetch_array($run))
{
$commentid = $row['comment_id'];
$comment = $row['comment'];
$username = $row['UserName'];
$userid1 = $row['UserId'];
$date = $row['CDate'];
$ageDate = time_elapsed_string($date);
?>
<div class="jumbotron" style="border:3px solid #2FAB9B; background-color:#68C8C6;">
<div class="row">
<div class="col-md-10">
<?php echo $comment; ?>
</div>
<div class="col-md-2">
<?php echo $ageDate; ?>
</div>
</div>
<br>
<label>Comment by <?php echo $username; ?></span></label><br>
<a class="reply" data-role="<?php echo $commentid; ?>">Reply</a>
<br>
<br>
<div style="width:63%; display:none;" class="replyForm" data-role="<?php echo $commentid; ?>">
<form method="post">
<textarea cols="100" rows="4"></textarea><br>
<br>
<input type="submit" name="reply" class="btn btn-primary" style="float:right" value="reply">
</form>
</div>
</div>
<script>
$(document).ready(function(){
$(".reply").click(function(){
var current = $(this).attr("data-role");
$('.replyForm[data-role="'+$(this).attr("data-role")+'"]').fadeIn();
});
});
</script>
<?php
if(isset($_POST['reply']))
{
echo "<script>alert('$commentid')</script>";
}
?>
<?php } ?>
it is a simple comment system with each comment there is a reply link on click on reply link a textbox is shown . I want to enter comment reply to database table therefore I want to get the record of the specific comment. How to do that with PHP.

this code should do what you want, completely dinamically
<div class="jumbotron comment-container" data-pk="<?php echo $commentid; ?>">
<div class="row">
<div class="col-md-10">
<?php echo $comment; ?>
</div>
<div class="col-md-2">
<em class="text-muted"><?php echo $ageDate; ?></em>
</div>
<div class="col-md-12">
<label>Comment by <?php echo $username; ?></label><br/>
<button class="btn btn-primary reply">Reply</button>
</div>
</div>
</div>
And here is the JS part. In order to reduce the code printed in the while loop, the reply form is cloned each time and appended where needed.
var reply_form = $('<div class="row replyForm-container"><div class="col-md-12">'+
'<form method="post" class="reply-form">'+
'<textarea class="form-control" rows="4">Prefilled content</textarea><br>'+
'<br>'+
'<button type="submit" name="reply" class="btn btn-primary" style="float:right" >Reply</button>'+
'</form>'+
'</div></div>');
$(".reply").click(function(){
$(this).hide();
var $container = $(this).closest('.comment-container');
var pk = $container.data('pk');
var rf_clone = reply_form.clone();
rf_clone.find('form').attr('data-pk', pk).data('pk', pk);
$container.append( rf_clone.hide().fadeIn(1000) );
});
// working with dynamical elements, we need to use delegation here
$(document).on('submit', '.reply-form', function(e){
e.preventDefault();
var reply_container = $(this).closest('.replyForm-container');
var pk = $(this).data('pk');
var reply = $(this).find('textarea').val();
console.log('Insert reply "'+reply+'" for comment ID: '+pk);
$.ajax({
type: "POST",
url: 'my_php_handler.php',
async: false,
dataType: "json",
data: {action: 'add-reply', commend_id: pk, reply_text: reply},
success: function (response) {
if( response ) {
reply_container.fadeOut('slow', function(){
var btn = reply_container.closest('.comment-container').find('button.reply');
$(this).remove(); //will remove the element after fadeOut completes
btn.show();
})
}
}
});
});
Check working Fiddle (ajax disabled)

trying to add ajax request html to page source

I'm working on a project using ajax and PHP, my problem is when I add HTML markup with ajax it's not showing in page source and that preventing my from making another request to delete this markup and the only way that makes my delete it redirect to the same page.
this is my markup code:
<div class="card">
<div class="card-content">
<form>
<div class="input-field">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Type something here</label>
</div>
</form>
</div>
<div class="card-action">
<button id="submit" class="btn waves-effect waves-light" type="submit" disabled>Submit</button>
</div>
</div>
<div id="cards--wrapper">
<?php
$query = "SELECT * FROM messages ORDER BY id DESC";
$retrieve_posts_query = mysqli_query($connection, $query);
while($row = mysqli_fetch_assoc($retrieve_posts_query)){
$content_id = $row['id'];
$post_content = $row['posts'];
$post_date = $row['date'];
$post_date = strtotime($post_date);
$post_date = date('j F, Y', $post_date);
?>
<div class="card" data-id = "<?php echo $content_id; ?>">
<a class="btn-large waves-effect waves-light red right delete">+</a>
<div class="card-content">
<?php echo $post_content; ?>
<span> <?php echo $post_date; ?> </span>
</div>
</div>
<?php } ?>
</div>
and this is my ajax code :
window.onload = function(){
$('#textarea1').keyup(function(){
var messageInput = $(this).val();
if( messageInput !== '' ){
$('#submit').attr('disabled', false);
}else {
$('#submit').attr('disabled', true);
}
});
$('#submit').on('click', function(){
retrieveData();
return false;
});
function retrieveData(){
var messageInput = $('#textarea1').val();
$.ajax({
url: 'server.php',
type: 'POST',
data: {
message : messageInput
},
success: function(data) {
$('#cards--wrapper').prepend(data);
$('#textarea1').val('');
$('#submit').attr('disabled', true);
window.location.href = 'index.php';
}
});
}
$('.delete').on('click', function(e){
e.preventDefault();
var that = $(this);
var cardID = that.parent().data('id');
var el = that.parent();
$.ajax({
url: 'delete.php?delete='+ cardID +'',
type: 'GET',
success: function(){
el.remove();
}
});
});
}

HTML not showing in a div when called from ajax

This is the script of ajax I am using
mypage.php
$(".sales_anchor").click(function(e)
{
e.preventDefault();
var store_username = $("#storeUsername").val();
var store_id = $("#storeID").val();
var sale_id = $(this).attr('id');
$.ajax(
{
url: 'scripts/sales_sales_products.php',
data: {"store_id": store_id, "sale_id": sale_id,"store_username": store_username},
method: 'POST',
success: function(data)
{
data = $(data).find("div#mainContentOfSale");
$("#contents").html(data);
console.log(data);
}
});
})
<div id="contents"></div>
And
sales_sales_products.php
include_once '../includes/custom_functions.php';
$stmtgetallsales = $mysqli->prepare("SELECT * FROM store_sales ss
INNER JOIN store s ON s.store_id=ss.store_id
WHERE s.store_id=?");
$stmtgetallsales->bind_param("i",$_POST['store_id']);
$stmtgetallsales->execute();
$getallsales = $stmtgetallsales->get_result();
$sales_rows = $getallsales->num_rows;
$stmtgetallsales->close();
?>
<script src="js/3.1.1/jquery.min.js"></script>
<script src="../js/jquery.countdown.min.js"></script>
<div class="container" id="mainContentOfSale">
<?php while($allsales = $getallsales->fetch_assoc())
{
$stmtgetsaleproducts = $mysqli->prepare("SELECT * FROM store_products sp
INNER JOIN store_sale_products ssp ON sp.product_id = ssp.product_id
WHERE ssp.sale_id=? AND sp.store_id=?");
$stmtgetsaleproducts->bind_param("ii",$allsales['sale_id'],$_POST['store_id']);
$stmtgetsaleproducts->execute();
$getsaleproducts = $stmtgetsaleproducts->get_result();
$sale_product_rows = $getsaleproducts->num_rows;
$stmtgetsaleproducts->close();
?>
<script>
$(document).ready(function() {
$('.products_title').hide();
$(".timer").each(function() {
var time = this.id;
var timeLeft = time.split('-').reverse().join('-');
$(this).countdown(timeLeft, function(event) {
$(this).text(event.strftime("%D days %H hours %M minutes %S seconds remaining"));
});
})
});
</script>
<div class="sale_title">
<h2 class="title" id="sale_products"><?php echo $allsales['sale_name']; ?></h2> <span class="badge"><?php echo $sale_product_rows; ?></span> <span class="timer" id="<?php echo $allsales['sale_till']; ?>"></span></div>
<div class="sale_title"><span class="discount">Discount: <span class="color-text"><?php echo $allsales['sale_discount']; ?></span>%</span></div>
<div class="product_area wrapper ">
<?php while($saleproducts = $getsaleproducts->fetch_assoc()){?>
<div class="product">
<a href="<?php echo " index.php?store=".$_POST['store_username']." &view=single&product=".$saleproducts['product_id']; ?>">
<div class="product-image">
<img src="<?php echo image_check($saleproducts['product_image1']); ?>" />
</div>
</a>
<div class="product-details">
<div class="product-name">
<a class="name" href="<?php echo " index.php?store=".$_POST['store_username']." &view=single&product=".$saleproducts['product_id']; ?>"><span><?php echo substr($saleproducts['product_name'], 0, 20); ?></span></a>
</div>
<div class="product-price">
<span class="price"># Rs. <?php echo sale_price($allsales['sale_discount'],$saleproducts['product_price']); ?>/</span>
</div>
</div>
</div>
<?php }?>
<?php } ?>
When I call the anchor tag with class sales_anchor it calls this script and in the inspect element and in network tab when I check the script it does populated the data and html and everything is fine. But it isn't getting called in the current page and in contents div. What am I doing wrong?

You are encountering an JSON.parse error in your screenshot. (Notice the red bar above your result window saying SyntaxError: JSON.parse: unexpected character at line 1 column 9 of the JSON data)
This is because $.ajax is trying to parse the response as a JSON string to an object (the default behaviour).
Please change your ajax function to this:
$(".sales_anchor").click(function(e)
{
e.preventDefault();
var store_username = $("#storeUsername").val();
var store_id = $("#storeID").val();
var sale_id = $(this).attr('id');
$.ajax(
{
url: 'scripts/sales_sales_products.php',
dataType: "text",
data: {"store_id": store_id, "sale_id": sale_id,"store_username": store_username},
method: 'POST',
success: function(data)
{
data = $(data).find("div#mainContentOfSale");
$("#contents").html(data);
console.log(data);
}
});
})
<div id="contents"></div>

HTML/JS Contact Form Not Sending or Showing Error Message

I have a contact form that I can't seem to send to my Gmail account. It's different from all the contact forms I've seen because the error message is within the HTML. Nothing happens when the submit button is pressed (no email, no error or success message). Please be gentle for I am somewhat new to PHP. I just need some help please.
The HTML
<div class="contactForm">
<div class="successMessage alert alert-success alert-dismissable" style="display: none">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Thank You! E-mail was sent.
</div>
<div class="errorMessage alert alert-danger alert-dismissable" style="display: none">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Oops! An error occured. Please try again later.
</div>
<form class="liveForm" role="form" action="form/send.php" method="post" data-email-subject="Contact Form" data-show-errors="true" data-hide-form="false">
<fieldset>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Name <span>(Required)</span></label>
<input type="text" required name="field[]" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Email <span>(Required)</span></label>
<input type="email" required name="field[]" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Subject</label>
<input type="text" name="field[]" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Message <span>(Required)</span></label>
<textarea name="field[]" required class="form-control" rows="5"></textarea>
</div>
</div>
</div>
<input type="submit" class="btn btn-primary" value="Send Message">
</fieldset>
</form>
</div>
</div>
The JS
/**
* Contact Form
*/
jQuery(document).ready(function ($) {
"use strict";
$ = jQuery.noConflict();
var debug = false; //show system errors
$('.liveForm').submit(function () {
var $f = $(this);
var showErrors = $f.attr('data-show-errors') == 'true';
var hideForm = $f.attr('data-hide-form') == 'true';
var emailSubject = $f.attr('data-email-subject');
var $submit = $f.find('[type="submit"]');
//prevent double click
if ($submit.hasClass('disabled')) {
return false;
}
$('[name="field[]"]', $f).each(function (key, e) {
var $e = $(e);
var p = $e.parent().find("label").text();
if (p) {
var t = $e.attr('required') ? '[required]' : '[optional]';
var type = $e.attr('type') ? $e.attr('type') : 'unknown';
t = t + '[' + type + ']';
var n = $e.attr('name').replace('[]', '[' + p + ']');
n = n + t;
$e.attr('data-previous-name', $e.attr('name'));
$e.attr('name', n);
}
});
$submit.addClass('disabled');
$f.append('<input class="temp" type="hidden" name="email_subject" value="' + emailSubject + '">');
$.ajax({
url: $f.attr('action'),
method: 'post',
data: $f.serialize(),
dataType: 'json',
success: function (data) {
$('span.error', $f).remove();
$('.error', $f).removeClass('error');
$('.form-group', $f).removeClass('has-error');
if (data.errors) {
$.each(data.errors, function (i, k) {
var input = $('[name^="' + i + '"]', $f).addClass('error');
if (showErrors) {
input.after('<span class="error help-block">' + k + '</span>');
}
if (input.parent('.form-group')) {
input.parent('.form-group').addClass('has-error');
}
});
} else {
var item = data.success ? '.successMessage' : '.errorMessage';
if (hideForm) {
$f.fadeOut(function () {
$f.parent().find(item).show();
});
} else {
$f.parent().find(item).fadeIn();
$f[0].reset();
}
}
$submit.removeClass('disabled');
cleanupForm($f);
},
error: function (data) {
if (debug) {
alert(data.responseText);
}
$submit.removeClass('disabled');
cleanupForm($f);
}
});
return false;
});
function cleanupForm($f) {
$f.find('.temp').remove();
$f.find('[data-previous-name]').each(function () {
var $e = jQuery(this);
$e.attr('name', $e.attr('data-previous-name'));
$e.removeAttr('data-previous-name');
});
}
});
The PHP
<?php
// Contact subject
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
// Enter your email address
$to ='divagraphicsinc#gmail.com';
$send_contact=mail($to,$subject,$message,$header);
?>

<?php
$ajax = (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
$ajax = true;
//we do not allow direct script access
if (!$ajax) {
//redirect to contact form
echo "Please enable Javascript";
exit;
}
require_once "config.php";
//we set up subject
$mail->Subject = isset($_REQUEST['email_subject']) ? $_REQUEST['email_subject'] : "Message from site";
//let's validate and return errors if required
$data = $mail->validateDynamic(array('required_error' => $requiredMessage, 'email_error' => $invalidEmail), $_REQUEST);
if ($data['errors']) {
echo json_encode(array('errors' => $data['errors']));
exit;
}
$html = '<div style="width: 640px; font-size: 11px;">
<h2>' . $mail->Subject . '</h2><ul>
';
foreach ($data['fields'] as $label => $val) {
$html .= '<li>' . $label . ': ' . $val . '</li>';
}
$html .= '</ul></div>';
$mail->setup($html, $_REQUEST, array());
$result = array('success' => 1);
if (!$mail->Send()) {
$result['success'] = 0;
}
echo json_encode($result);
exit;