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.
Related
I'm working on a personal project, where I've more forms than one (comment forms under each post). Each form I give a number according to post id.
<form id="postCommentsForm<?php echo $ansRow['id'];?>" class="form">
<div class="input-group mb-3">
<a href="user/<?php echo $username;?>">
<img class="p-1 m-0" src="images/<?php echo $userAvatar;?>" width="35" height="35" alt="<?php echo $userAvatar;?> profile picture">
</a>
<input name="post_comment<?php echo $ansRow['id'];?>" id="add_comments" type="text" autofocus autocomplete="off" class="add_comments form-control pl-3 pr-3" placeholder="<?php echo $userFname;?>, type something" aria-label="Recipient's username" aria-describedby="button-form">
<input type="text" hidden id="question_id" name="question_id" value="<?php echo $row['id'];?>">
<input type="text" hidden id="answer_id" name="answer_id" value="<?php echo $ansRow['id'];?>">
<input type="text" hidden id="session_id" name="session_id" value="<?php echo $_SESSION['id'];?>">
<div class="input-group-append">
<button class="btn btn-secondary submit-comments" type="submit" name="submit_comment<?php echo $ansRow['id'];?>" id="postComments">Comment</button>
</div>
</div>
</form>
javascript code
$(document).ready(function() {
$("[id^=postCommentsForm]").on("submit", function(e) {
e.preventDefault();
var add_comments = $("#add_comments").val();
var question_id = $("#question_id").val();
var answer_id = $("#answer_id").val();
// var session_id = $("#session_id").val();
if(add_comments == "" ){
$("#error-message").html("All fields are required!").slideDown();
$("#success-message").slideUp();
}else{
//Ajax
$.ajax({
url: "include/forms-data/comments.php",
type: "POST",
data: {
add_comments: add_comments,
question_id: question_id,
answer_id: answer_id
},
success: function(data) {
if (data != 0) {
$("[id^=postCommentsForm").trigger("reset");
$("#success-message").html("Question Added Successfully!").slideDown();
$("#error-message").slideUp();
} else {
//alert("Can't save record");
$("#error-message").html("Something went wrong!").slideDown();
$("#success-message").slideUp();
}
}
});
}
});
});
How I can fetch #comments(postID here), and submit form data successfully under the postID?
I hope I define well the question.
Jquery's "starts with selector" can help. check out here
$(document).ready(function() {
$("[id^=comments]").click(function(e) {
var element_id = this.getAttribute("id");
});
});
Live Demo:
$(document).ready(function() {
$("[id^=comments]").click(function(e) {
console.log($(this).attr('id'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='comments1'>b</button>
<button id='comments2'>a</button>
I'm not sure why this modal isn't populating the post ajax data. Its actually supposed to update a row in my SQL DB upon success but the error I'm getting is "Uncaught TypeError: Cannot read property 'value' of null." Does anyone have any idea why this failing?
Updated: I apologize for leaving out the php which generated the partners item.
HTML:
while($row = mysqli_fetch_array($partners)) {
// $optionsPartners .="<option>" . $row['Partners'] . "</option>";
$optionsPartners.="<input type='checkbox' name='Partners[]' value=".$row['Partners']."> ".$row['Partners']."<br>";
}
$partnersmenu=
/*"<select name='Partners' id='Partners'>
" . $optionsPartners . "
</select>"*/
$optionsPartners;
?>
<div id="id02" class="modal">
<span onclick="document.getElementById('id02').style.display='none'"
class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" action="modify_records.php" method="post">
<div class="container">
<h3>Edit an Existing Project</h3>
<label for="Project_Name" class="ui-hidden-accessible">Project Name:</label>
<input type="Project_Name" name="Project_Name" id="Project_Name" placeholder="Project Name">
<br><br>
<label for="Partners" class="ui-hidden-accessible">Partners:</label>
<?php
echo $partnersmenu;
?>
<br><br>
<input type="button" id="edit_button<?php echo $row['id'];?>" class="btn" value="Submit" data-dismiss="modal" onclick="edit_row('<?php echo $row['id'];?>');">
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button>
</div>
<div class="container" style="background-color:#f1f1f1">
</div>
</form>
</div>
PHP:
if(isset($_POST['edit_row']))
{
$row=$_POST['id'];
$Project_Name=$_POST['Project_Name'];
$Partners=$_POST['Partners'];
mysqli_query($conn,"update Project_Detail set Project_Name='$Project_Name',Partners='$Partners' where id=$row");
echo "success";
exit();
}
JS:
function edit_row(id)//save_row(id)
{
//var id=document.getElementById("id"+id).value;
var id=document.getElementById("id"+id);
var Project_Name=document.getElementById("Project_Name"+id).value;
var Partners=document.getElementById("Partners"+id).value;
$.ajax
({
type:'post',
url:'modify_records.php',
data:{
edit_row:'edit_row',
id:id,
Project_Name:Project_Name,
Partners:Partners,
},
success:function(response) {
if(response=="success")
{
//document.getElementById("id"+id).innerHTML=id;
document.getElementById("Project_Name"+id).innerHTML=Project_Name;
document.getElementById("Partners"+id).innerHTML=Partners;
//document.getElementById("edit_button"+id).style.display="block";
// document.getElementById("save_button"+id).style.display="none";
}
},
error: function(response) {
alert("some error");
}
});
}
I see a few problems and they all pertain to how you are calling you elements in your javascript and how your elements are labeled in your html.
Example:
<input type="Project_Name" name="Project_Name" id="Project_Name" placeholder="Project Name">
Should look like this:
<input type="text" name="Project_Name" id="Project_Name<?php echo $row['id']; ?>" placeholder="Project Name">
Look through all your elements and then look through your js so your are calling the correct ids.
Also in your html I copied in above, I changed the type to "text".
Also, I do not see an element with the id of "Partners" let alone "Partners" + id.
Hope that helps.
try
var id=document.getElementById("id");
instead of
var id=document.getElementById("id"+id);
I will try to explain my code simple. Basicly I got 2 different files:
fun.php
class.fun.php
I want to post my forms with ajax, so it won't refresh page.
In class.fun.php I have got reportForm for each post.
<!-- REPORT MODAL -->
<div class="modal fade report_post_<?php echo $post['id'];?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<b><center><div class="modal-header">Report Post</div></center></b>
<form class="horiziontal-form" id="reportForm" action="../Pages/fun.php?action=reportPostForm" method="post">
<center><textarea name="report" style="width:80%; height:200px; margin-top:20px; resize:vertical;" placeholder="Please describe your Report!"></textarea></center>
<input type="hidden" name="addedby" class="form-control col-md-7 col-xs-12" value="<?php echo $myRow['id']; ?>" />
<input type="hidden" name="image_id" class="form-control col-md-7 col-xs-12" value="<?php echo $post['id']; ?>" />
<div class="modal-footer"> <input type="submit" name="submit" value="Submit Form" /></div>
</div>
</div>
</form>
</div>
<!-- END OF REPORT MODAL -->
And after form I got ajax function:
<script>
$("#reportForm").submit(function(event){
event.preventDefault(); //prevent default action
var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method
var form_data = $(this).serialize(); //Encode form elements for submission
$.ajax({
url : post_url,
type: request_method,
data : form_data
}).done(function(response){ //
$("#server-results").html(response);
});
});
</script>
When I click button submit I want to send form data to fun.php
This is how I receive data in fun.php
if(isset($_POST['reportPostForm'])){
$image_id = strip_tags($_POST['image_id']);
$report = strip_tags($_POST['report']);
$addedby = strip_tags($_POST['addedby']);
$fun->reportPost($image_id,$report,$addedby);
}
And send them to other function in class.fun.php
But at this moment nothing happens. I have been looping trought many
tutorials and can't understand how to make this work. Im newbie in
javascript. I have got working upvote/downvotes scripts where I pass only post_id and it works.
I have got script for upvote that works:
$("#upvote_<?php echo $post['id'];?>").click(function(){
$.ajax(
{ url: "fun.php?upvote-btn=true?action=select&image_id=<?php echo $post['id'];?>",
type: "get",
success: function(result){
$('#upvote_<?php echo $post['id'];?>').load(document.URL + ' #upvote_<?php echo $post['id'];?>');
$('#downvote_<?php echo $post['id'];?>').load(document.URL + ' #downvote_<?php echo $post['id'];?>');
$('#comment_<?php echo $post['id'];?>').load(document.URL + ' #comment_<?php echo $post['id'];?>');
$('#share_<?php echo $post['id'];?>').load(document.URL + ' #share_<?php echo $post['id'];?>');
$('#report_<?php echo $post['id'];?>').load(document.URL + ' #report_<?php echo $post['id'];?>');
$('#report_btn_<?php echo $post['id'];?>').load(document.URL + ' #report_btn_<?php echo $post['id'];?>');
document.getElementById("result-box").innerHTML = result;
}
});
});
On fun.php you are checking for $_post['reportPostForm'] but this is not sent via post on this ajax call. your firm doesn't have this inputime and that's why nothing is happening. Try if(isset($_POST['report'])
Change this:
if(isset($_POST['report'])){
$image_id = strip_tags($_POST['image_id']);
$report = strip_tags($_POST['report']);
$addedby = strip_tags($_POST['addedby']);
$fun->reportPost($image_id,$report,$addedby);
echo "Done";
}
Also add the <div id='server-results'></div> to your form so that you can show the resutls.
<div class="modal-dialog modal-lg">
<div class="modal-content">
<b>
<center>
<div class="modal-header">Report Post</div>
</center>
</b>
<form class="horiziontal-form" id="reportForm" action="../Pages/fun.php?action=reportPostForm" method="post">
<center>
<textarea name="report" style="width:80%; height:200px; margin-top:20px; resize:vertical;" placeholder="Please describe your Report!"></textarea>
</center>
<input type="hidden" name="addedby" class="form-control col-md-7 col-xs-12" value="<?php echo $myRow['id']; ?>" />
<input type="hidden" name="image_id" class="form-control col-md-7 col-xs-12" value="<?php echo $post['id']; ?>" />
<div class="modal-footer">
<input type="submit" name="submit" value="Submit Form" />
</div>
</div>
</div>
<div id='server-results'></div>
</form>
</div>
It is not very clear what is not working.
The file is correct.
Only problem is in fun.php as you do:
if(isset($_POST['reportPostForm'])){
$image_id = strip_tags($_POST['image_id']);
$report = strip_tags($_POST['report']);
$addedby = strip_tags($_POST['addedby']);
$fun->reportPost($image_id,$report,$addedby);
}
But you are sending $_POST['addedby'], $_POST['image_id'] and $_POST['report'].
The one you are checking $_POST['reportPostForm'] do not exists.
Try to do the if against one of the three values you are passing.
I have an ajax script and I am trying to post from a function. I am using a onlick href but its not coming up as undefined. This is using wordpress. I have tried to move the code around inside and outside the scope but I still cant seem to get it to work.
<div id="live">
<div class="container">
<?php the_content(); ?>
<div id="comment-display">
<form method="post" action="index.php" id="comments_submit">
<input type="hidden" id="nameBox" value="<?php echo $_SESSION['name'] ?>" name="name"/>
<input type="hidden" id="emailBox" name="email" value="<?php echo $_SESSION['email']; ?>"/>
<textarea id="chatBox" placeholder="Ask a question or make a comment" name="comment" class="form-control"></textarea>
Submit Comment
</form>
<br />
<div id="displayComments"></div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(function($) {
setInterval(function(){
$.ajax({
method: "GET",
url: "<?php echo get_template_directory_uri()?>/get_chat.php"
}).done(function(html){
$('#displayComments').html(html);
});
}, 2000);
function submitComment(){
$.ajax({
method: "POST",
url: "template-live.php",
data: {submitComment:$('#chatBox').val(),submitName:$('#nameBox').val(),submitEmail:$('#emailBox').val()}
}).done(function(html){
alert('Your comment has been submitted, and will be displayed after approval.');
$('#chatBox').val('');
});
}
});
</script>
Thank you :)
When you do javascript:submitComment() that's calling a the global function submitComment. Since the submitComment is defined in the jQuery(function($) { ... }) function, it is not a global. Therefore, window.submitComment is undefined (hence undefined is not a function).
The globals are stored in the window object.
Therefore, you can expose that submitComment as a global:
window.submitComment = function () {...}
Note that you should avoid using globals as much as possible. In this case you can do that by adding:
$("#submit").click(submitComment);
// In this case, you shouldn't declare submitComment as a global anymore
And since you are in a form, you want to stop the default browser behavior when clicking the a element, by using return false at the end of the function.
Alternatively to #Ionică Bizău's solution.
You could use onclick="submitComment()" instead of href.
<a onclick="submitComment()" type="submit" id="submit" name="submit" class="btn cardh-bg text-white text-bold margin-top-5"> Submit Comment </a>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="live">
<div class="container">
<?php the_content(); ?>
<div id="comment-display">
<form method="post" action="index.php" id="comments_submit">
<input type="hidden" id="nameBox" value="<?php echo $_SESSION['name'] ?>" name="name" />
<input type="hidden" id="emailBox" name="email" value="<?php echo $_SESSION['email']; ?>" />
<textarea id="chatBox" placeholder="Ask a question or make a comment" name="comment" class="form-control"></textarea>
<a onclick="submitComment()" type="submit" id="submit" name="submit" class="btn cardh-bg text-white text-bold margin-top-5"> Submit Comment </a>
</form>
<br />
<div id="displayComments"></div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(function($) {
setInterval(function() {
$.ajax({
method: "GET",
url: "<?php echo get_template_directory_uri()?>/get_chat.php"
}).done(function(html) {
$('#displayComments').html(html);
});
}, 2000);
window.submitComment = function(){
console.log('submitComment called!');
$.ajax({
method: "POST",
url: "template-live.php",
data: {
submitComment: $('#chatBox').val(),
submitName: $('#nameBox').val(),
submitEmail: $('#emailBox').val()
}
}).done(function(html) {
alert('Your comment has been submitted, and will be displayed after approval.');
$('#chatBox').val('');
});
}
});
</script>
Been struggling with this for about few hours. I'm attempting to have a modal drop down (Twitter bootstrap modal) that contains a form to choose a category of user. This is built in CodeIgniter. But when i try to save form's value using AJAX, the SUCCESS function won't run without alert(). I'm sorry for my bad grammar, i hope you can understand what i mean.
i need for your help...
view (kasir_halaman.php):
<div id="editModal" class="modal fade" role="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title"><span class="glyphicon glyphicon-plus"></span> Ubah Kasir</h3>
</div>
<div class="modal-body">
<form action="#" id="editform" method="post" enctype="multipart/form-data">
<div class="form-group">
<label>Nama</label> <span class="error" id="report1"></span>
<input type="text" id="editnama" name="nama" class="form-control" maxlength="100" required>
</div>
<div class="form-group">
<label>E-mail</label>
<input type="email" id="editemail" name="email" class="form-control" maxlength="150" required>
</div>
<div class="form-group">
<label>Kategori</label>
<select class="form-control" name="kategoripetugas" id="editkategori" required>
<option value=""> -- Pilih Kategori -- </option>
<option value="1">Admin</option>
<option value="2">Kasir</option>
</select>
</div>
<button type="submit" class="btn btn-primary" style="width:100%;">Simpan</button>
</form>
</div>
</div>
</div>
</div>
controller (kasir.php):
public function updatePetugas($id)
{
$nama_petugas = $this->input->post('nama');
$email_petugas = $this->input->post('email');
$kategori_petugas = $this->input->post('kategoripetugas');
$data = array('nama'=>$nama_petugas, 'email'=>$email_petugas, 'kategori'=>$kategori_petugas);
$update = $this->Crud->update(array('idpetugas'=>$id), 'petugas', $data);
if($update){
echo 1;
}else{
echo 2;
}
}
javascript (petugas.js) :
$(document).ready(function(){
var check1=0; var id;
$("#nama").bind("keyup change", function(){
var nama = $(this).val();
$.ajax({
url:'kasir/cekData/kasir/nama/'+nama,
data:{send:true},
success:function(data){
if(data==1){
$("#report1").text("");
check1=1;
}else{
$("#report1").text("*nama petugas sudah terpakai");
check1=0;
}
}
});
});
$(".edit").click(function(){
id = $(this).attr('id');
$.ajax({
url:'kasir/getData/'+id,
data:{send:true},
success:function(data){
$("#editnama").val(data['nama']);
$("#editemail").val(data['email']);
$("#editkategori").val(data['kategori']);
}
});
});
$("#editform").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url:'kasir/updatePetugas/'+id,
data:formData,
type:'POST',
contentType: false,
processData: false,
success:function(data){
if(data==1){
$("#editModal").hide();
window.location.reload(true);
}else if(data==2){
alert('gagal');
}
}
});
alert("success!"); // if i remove this alert, the success function won't run or executed
});
});
you can solve this a few ways, what is actually happening is that you are submitting the data via ajax as well as submitting the form itself.
using e or the event
$("#editform").submit(function(e){
e.preventDefault();
or by returning false on submit
});
//alert("success!"); we can comment this out because it will work now without the alert holding the page
return false;
});
in either case you can remove your alert.