Develop Reference

Unique comment section per dynamic modal

I have a webpage with dynamically loaded cards that pop up into individual modals to display more data. These modals all have their unique id in order to pop up the correct one.
I am attempting to put a unique comment section for each modal. What I have implemented works only for the first modal & doesnt even show the comments on the second modal onwards.
I would appreciate some direction in how to make them display per modal & how to make them unique. I am assuming I echo $test[id] just like I used for the modals. Need a little assistance in script side of things.
<div id="myModal<?php echo $test['id']; ?>" class="modal">
<div class="modal-content">
<div class="container">
<form method="POST" id="comment_form">
<input type="hidden" id="id" name="id" value="<?php echo $test['id']; ?>">
<div class="form-group">
<input type="text" name="comment_name" id="comment_name" class="form-control" placeholder="Enter Name" />
</div>
<div class="form-group">
<textarea name="comment_content" id="comment_content" class="form-control" placeholder="Enter Comment" rows="5"></textarea>
</div>
<div class="form-group">
<input type="hidden" name="comment_id" id="comment_id" value="0" />
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
<span id="comment_message"></span>
<br />
<div id="display_comment<?php echo $test['id']; ?>"></div>
</div>
</div>
</div>
<script>
var data = 1;
$(document).ready(function(){
$('#comment_form').on('submit', function(event){
event.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url:"add_comment.php",
method:"POST",
data:form_data,
dataType:"JSON",
success:function(data)
{
if(data.error != '')
{
$('#comment_form')[0].reset();
$('#comment_message').html(data.error);
$('#comment_id').val('0');
load_comment();
}
}
})
});
load_comment();
function load_comment()
{
$.ajax({
url:"fetch_comment.php",
method:"POST",
success:function(data)
{
$('#display_comment').html(data);
}
})
}
$(document).on('click', '.reply', function(){
var comment_id = $(this).attr("id");
$('#comment_id').val(comment_id);
$('#comment_name').focus();
});
});
</script>
UPDATE:
Going with the response received, I made certain changes & noticed that even though the comment form is visible on all modals, the posted comments itself
only appear on the first modal. With a bit of hardcoding I am able to tell that the display_comment(id) in html & script needs to be same. The HTML id updates as per console, but I am unable to pass the correct id to $('#display_comment'+myData1).html(data); (it is always 1).
<div id="myModal<?php echo $test['id']; ?>" class="modal">
<div class="modal-content">
<div class="container">
<form method="POST" id="comment_form">
<input type="hidden" id="id" name="id" value="<?php echo $test['id']; ?>">
<div class="form-group">
<input type="text" name="comment_name" id="comment_name" class="form-control" placeholder="Enter Name" />
</div>
<div class="form-group">
<textarea name="comment_content" id="comment_content" class="form-control" placeholder="Enter Comment" rows="5"></textarea>
</div>
<div class="form-group">
<input type="hidden" name="comment_id" id="comment_id" value="0" />
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
<span id="comment_message"></span>
<br />
<div id="display_comment<?php echo $test['id']; ?>"></div>
</div>
<div id="dom-target" style="display: none;" data-id="<?php echo htmlspecialchars($test['id']);?>">
<?php
echo htmlspecialchars($test['id']);
?>
</div>
</div>
<script>
$(document).ready(function(){
$('#comment_form').on('submit', function(event){
event.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url:"add_comment.php",
method:"POST",
data:form_data,
dataType:"JSON",
success:function(data)
{
if(data.error != '')
{
$('#comment_form')[0].reset();
$('#comment_message').html(data.error);
$('#comment_id').val('0');
load_comment();
}
}
})
});
load_comment();
function load_comment()
{
var myData1 = $("#dom-target").data("id");
console.log('#display_comment'+myData1);
$.ajax({
url:"fetch_comment.php",
method:"POST",
success:function(data)
{
$('#display_comment'+myData1).html(data);
}
})
}
$(document).on('click', '.reply', function(){
var comment_id = $(this).attr("id");
$('#comment_id').val(comment_id);
$('#comment_name').focus();
});
});
</script>
I have also tried the following & simply receive undefined as the value in console for myData2:
$.ajax({
url:"fetch_comment.php",
method:"POST",
data: {
myData2: $("#dom-target").data("id")
},

you should loop all the content according to your $test['id'].
each loop will generate each $test['id'], modals, form.
therefore, you will have multiple form according to each modals.
regarding the name of the input box (name="comment_id","comment_name" etc), just use the same name, as this will affect your backend on how you will process those input ($_POST['']).
this shouldn't be an issue if you area using same input name as user can only submit 1 form on each request.
just the value will be changing based on the form.

Jquery Loading Image On Search form

I want to display the loading.gif image when doing a domain search with a click button. So when php processes a domain name search request, the loading image appears and disappears when the search results appear.
Below code from my php page:
<form class="form-full-width" method="post">
<div class="group align-center form-row">
<input autofocus class="group-stretch" type="text" name="domain" placeholder="" value="" pattern="^[a-zA-Z0-9\.-]*$" title="">
<input type="hidden" name="token" value="70ed0e77d1b8f7124c494a970929ccb2">
<button class="button-secondary"> Search </button>
</div>
</form>
This is result after click search button, will appear approximately 5-30 seconds after clicking the Search button
$response = '<section class="content-row">
<div class="container">
<center>
<header class="content-header">
<h3><i class="fa fa-check text-color-success icon-left"></i> Selamat! Domain <b class="text-color-primary">'.$domain.'</b> Tersedia</h3>
<h4>Hanya dengan <b>Rp. 200.000</b> / tahun</h4>
<p>
<a href="member.domain.com/cart.php?a=add&domain=register&sld='.$domain.'" class="button button-primary">
<i class="fa fa-shopping-cart icon-left"></i>DAFTARKAN
</a>
</p>
<p>
atau<br>Lihat saran domain lainnya <i class="fa fa-angle-double-right"></i>
</p>
</header>
</center>
</div>
</section>
Javascript
<script type="text/javascript">
$( document ).ready(function() {
$('.button-secondary').click(function(){
var domain = $('input[name=domain]').val()
$.get( "cari-domain-function.php?domain="+domain, function( data ) {
$( "section.content-row-gray" ).html(data);
});
event.preventDefault();
})
});
</script>

add <img id='loading' src='loading.gif' style='display:none' > to hide the image, then when a search prompts add this on your script $("#loading").css("display","block"); afterwards when php request is finish $("#loading").css("display","none");, hope that works
HTML
<form class="form-full-width" method="post">
<img id='loading' src='loading.gif' style='display:none' >
<div class="group align-center form-row">
<input autofocus class="group-stretch" type="text" name="domain"
placeholder="" value="" pattern="^[a-zA-Z0-9\.-]*$" title="">
<input type="hidden" name="token"
value="70ed0e77d1b8f7124c494a970929ccb2">
<button class="button-secondary"> Search </button>
</div>
</form>
JQuery
<script type="text/javascript">
$( document ).ready(function() {
$('.button-secondary').click(function(){
$("#loading").css("display","block");
var domain = $('input[name=domain]').val()
$.get( "cari-domain-function.php?domain="+domain, function( data ) {
$( "section.content-row-gray" ).html(data);
$("#loading").css("display","none");
});
event.preventDefault();
})
});
</script>
JQuery EDIT
<script type="text/javascript">
$( document ).ready(function() {
$(document).on('click','.button-secondary',function(){
$("#loading").css("display","block");
var domain = $('input[name=domain]').val()
$.get( "cari-domain-function.php?domain="+domain, function( data ) {
$( "section.content-row-gray" ).html(data);
$("#loading").css("display","none");
});
event.preventDefault();
})
});
</script>

Removing parent div containing many divs and spans and sections in it using javascript ajax

I have a comment div. so in this div, i have some other divs and spans to show edit and delete buttons, comment text, time, user name, profile pic and footer section for like or dislike.
Here is full code
while($fetch = mysql_fetch_array($rest)) {
<div class="container1" id="container1">
<div class="div-image">
<img src="images.jpg" />
</div>
<div class="div-right">
<div class="div-right-top">
<div class="div-user-name">
<span class="text-user-name">
UserName
</span>
</div>
<div class="div-time">
<span class="time-text">
comment-time
</span>
</div>
<?php if (isset($_SESSION['userid'])) { ?>
<form action="" method="post">
<input type="hidden" name="commentingid" value="FETCHVALUE" />
<div class="div-myoptions">
<span class="time-text div-option-div">
<?php if($userid !== $loggedid) { ?>
<button class="mycomoptions" type="submit" name="favorite">Fav</button>
<button class="mycomoptions" type="submit" name="flag">Report</button>
</form>
<?php } else { ?>
<button class="edit" type="button">Edit</button>
<button class="delete" data-emp-id="<?php echo $comentid ?>">X</button>
<?php } ?>
</span>
</div>
<?php } ?>
</div>
<div class="div-right-mid comment-text">
<?php echo $fetch['usercom'] ?>
</div>
<section class="right-bottom small">
<div class="div-like">
<span class="text-bottom">
Up
</span>
</div>
<div class="div-dislike">
<span class="text-bottom">
Down
</span>
</div>
<div class="div-reply">
<span class="text-bottom">
reply
</span>
</div>
<div id="editcoment" class="collapse">
<p>
<form action="" method="post" name="updatecom" onSubmit="return validateForm();">
<input type="text" />
<button type="submit" name="updatecom">Submit</button></p</form>
</p>
</div>
</section>
</div>
</div>
All I want to do is to delete the container1 div when i click on Delete button
Delete button is working, comment is deleted from database but its not been deleted from the page right after confirmation dialogue done with ajax. so when i refresh the page, comment is deleted. but why is it not working with ajax. is it just because i have spans and sections in the parent div?
here its javascript code
$(document).ready(function(){
$('.mycomoptions').click(function(e){
e.preventDefault();
var delete = $(this).attr('data-emp-id');
var container1 = $(this).parent("#container1 div");
bootbox.dialog({
message: "Delete Comment??",
title: "Sure Delete?",
buttons: {
success: {
label: "No",
className: "btn",
callback: function() {
$('.bootbox').modal('hide');
}
},
danger: {
label: "Yes",
className: "btn-danger",
callback: function() {
$.ajax({
type: 'POST',
url: '<?php echo $_SERVER['PHP_SELF'];?>',
data: 'delete='+delete
})
.done(function(){
container1.remove();
})
}
}
}
});
});
});
When i use simple divs then it works fine, but with this template of divs, its not removing container div on confirming Yes from confirmation dialogue. Need Help to understand how to make container variable to select parent div including all internal divs

You're using var container1 = $(this).parent("#container1 div"); but you have no element with an id of container1. Do you mean to be using $(this).parent(".container1 div")?

Create unique id in each click of button using Jquery/Javascript

i want to create unique id in each click of button using Jquery.Actually i am creating file field by clicking on a button here i need first file field's id will remain constant(i.e-fileid) as it is when user will click on a button and the next file field will created the id will change(i.d-fileid1) and so on.I am explaining my code below.
<div class="col-md-6 bannerimagefile bmargindiv1">
<label for="expcerti" accesskey="B"><span class="required">*</span> Publication/Papers Upload your publication/papers certificate.</label>
<ol id="expOl">
<li>
<div class="totalaligndiv">
<div class="col-md-10 padding-zero bannerimagefilenew bmargindiv1">
<input type="file" class="filestyle" data-size="lg" name="expcerti" id="expcerti" />
</div><div class="col-md-2 padding-zero bmargindiv1">
<button type="button" class="btn btn-success btn-sm " id="Expadd">+</button>
<button type="button" class="btn btn-danger btn-sm" id="Expminus" style="display:none;" >-</button>
</div>
<div class="clearfix"></div>
</div>
</li>
</ol>
</div>
<script>
$(document).ready(function () {
$(document).on('click','.btn-success', function () {
// var i=1;
$.getScript("js/bootstrap-filestyle.min.js");
$('#expOl').append("<li><div class='totalaligndiv'><div class='col-md-10 padding-zero bannerimagefilenew bmargindiv1'><input type='file' class='filestyle' data-size='lg' name='expcerti' ></div><div class='col-md-2 padding-zero bmargindiv1'><button type='button' class='btn btn-success btn-sm ' id='Expadd'>+</button><button type='button' class='btn btn-danger btn-sm' id='minus' style='display:none'>-</button></div><div class='clearfix'></div></div></li>");
// $('.filestyle').attr("id","expcerti"+i);
$(this).css('display', 'none');
$(this).siblings("button.btn-danger").css('display', 'block');
// i++;
});
$(document).on('click','.btn-danger', function () {
console.log('delete');
$(this).closest("li").remove();
});
});
</script>
Check my above code first file field's id is expcerti,when one new will be created it should be expcerti1 and like this it will increment .so that if i have 5 filed i can add 5 file in their respective field.But in my case if i have more file field all file is appending one file field. Please help me to resolve this issue.

To generate a new ID on every click maintain a counter flag.
Let's say var i = 1;
Increment this counter on every click i++.
Use this counter variable with id attribute.
Have modified your code snippet as below:
$(document).ready(function () {
var i=1;
$(document).on('click','.btn-success', function () {
$.getScript("js/bootstrap-filestyle.min.js");
$('#expOl').append("<li><div class='totalaligndiv'><div class='col-md-10 padding-zero bannerimagefilenew bmargindiv1'><input type='file' class='filestyle' data-size='lg' name='expcerti' id='expcerti"+i+"' ></div><div class='col-md-2 padding-zero bmargindiv1'><button type='button' class='btn btn-success btn-sm ' id='Expadd'>+</button><button type='button' class='btn btn-danger btn-sm' id='minus' style='display:none'>-</button></div><div class='clearfix'></div></div></li>");
// $('.filestyle').attr("id","expcerti"+i);
$(this).css('display', 'none');
$(this).siblings("button.btn-danger").css('display', 'block');
i++;
});
$(document).on('click','.btn-danger', function () {
console.log('delete');
$(this).closest("li").remove();
});
});

You have to add the click event listener to the newly created buttons.

Jquery - Getting a parent element's data-id

been looking through previously asked questions but can't find much help.
I have the following html code that sends through a data-id to the following modal, when the user submits the form i have created a ('#edit-form').submit function which needs to send through the previously mentioned data-id.
Here's my code
Button to Open Modal >>
<button type="button" class="edit-group" title="Edit Group" data-id="<?php echo $group->id ?>" data-name="<?php echo $group->groupName ?>">Edit Group</button>
Form inside modal:
<form class="form-horizontal" id="edit-template-form">
<div class="modal-body">
<div class="form-group">
<label for="edit-group-name" class="col-sm-2 control-label">Group name</label>
<div class="col-sm-10">
<input type="text" name="groupName" class="form-control" id="edit-template-name" placeholder="New Group Name">
</div>
</div>
<input type="hidden" id="edit-template-id">
</div>
<div class="modal-footer">
<button type="button" class="md-close" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-flat">Save Changes</button>
</div>
</form>
Jquery
$('#edit-template-form').submit(function (e) {
e.preventDefault();
var data = {
id: $(this).parent().val($(this).data('id')),
name: $('#edit-template-name').val()
};
console.log(data);
return false;
});

this keyword refers to data object itself not #edit-template-form. So store the variable this before using it like below:
$('#edit-template-form').submit(function (e) {
e.preventDefault();
var form = $(this);
var data = {
id: form.parent().val(form.data('id')),
name: $('#edit-template-name').val()
};
console.log(data);
return false;
});