AJAX .done() not working as expected

Question

I don't know where the problem is but found out that, if I change this line data: form_data to data: form_data; it doesn't return Ajax, but PHP function works.

Default ajax, with line : data : form_data --> breaks page and php function won't work

Adding ";" after that line data : form_data; --> Nothing displays, but PHP function works and Inserts "reply" in database

Should look call PHP function and display alert dialog like here:

Reply Form:

<!-- REPLY MODAL --> <div class="modal fade reply_comment_<?php echo $comment['id'];?>" id="reply_comment_<?php echo $comment['id'];?>" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <b><center><div class="modal-header">Reply Comment</div></center></b> <form id="replyForm_<?php echo $comment['id'];?>" class="horiziontal-form" action="../Pages/fun_post.php?action=replyCommentForm" method="post"> <center><textarea name="reply" style="width:80%; height:200px; margin-top:20px; margin-bottom:20px; resize:vertical;" placeholder="Write your comment!"></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="comment_id" class="form-control col-md-7 col-xs-12" value="<?php echo $comment['id']; ?>" /> <input type="hidden" name="post_id" class="form-control col-md-7 col-xs-12" value="<?php echo $comment['post_id']; ?>" /> <input type="submit" style="float:right; margin-right:90px;" class="btn btn-primary" name="submit" value="Reply" /> </form> </div> </div> </div> <!-- END OF REPLY MODAL -->

Script:

<script> $(function(){ $("#reply_comment_<?php echo $comment['id'];?>").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){ // $('#reply_comment_<?php echo $comment['id'];?>').modal('hide'); document.getElementById('result-box').innerHTML += response; }); }); }); </script>

WORKING EXAMPLE "REPORT POST FORM" USING SAME CODING

<!-- REPORT MODAL --> <div class="modal fade report_post_<?php echo $post['id'];?>" id="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 id="reportForm_<?php echo $post['id'];?>" class="horiziontal-form" 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" class="btn btn-danger" name="submit" value="Report" /></div> </div> </div> </form> </div> <!-- END OF REPORT MODAL --> <script> $(function(){ $("#reportForm_<?php echo $post['id'];?>").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){ // $('#report_post_<?php echo $post['id'];?>').modal('hide'); document.getElementById('result-box').innerHTML += response; }); }); }); </script>

Adding ";" after that line data : form_data; --> Nothing displays That's because adding the semi-colon there is a syntax error — Rory McCrossan
– Rory McCrossan, Commented Aug 23, 2017 at 9:26
If you put ; after data : form_data you just get an error so the form submitting without the ajax, so it not count. — Mosh Feu
– Mosh Feu, Commented Aug 23, 2017 at 9:26
@JaykumarGondaliya that's logically identical to what OP has now — Rory McCrossan
– Rory McCrossan, Commented Aug 23, 2017 at 9:27
Can you see the request in the network tab in DevTools? In other words, is the ajax request itself have been called or not? — Mosh Feu
– Mosh Feu, Commented Aug 23, 2017 at 9:29
Have you checked the console for errors as @MoshFeu suggested? — Rory McCrossan
– Rory McCrossan, Commented Aug 23, 2017 at 9:31

crazyloonybin · Accepted Answer · 2017-08-23 09:43:59Z

It appears you're using the wrong selector for the form submit event handler. You're using:

$("#reply_comment_<?php echo $comment['id'];?>").submit(function(event){ // ... });

however reply_comment_<?php echo $comment['id'];?> is the ID for the modal (i.e. a div element). According to the docs:

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to <form> elements.

The ID of your form is replyForm_<?php echo $comment['id'];?> so you should be using that instead:

$("#replyForm_<?php echo $comment['id'];?>").submit(function(event){ // ... });

Thanks. As I thought.. Mistake in my own coding. Simple bug, but couldn't find it.

Collectives™ on Stack Overflow

AJAX .done() not working as expected

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related