https://khoorna.com/applications/themes/WPnio_Framework/inc/js/ajax-comments.js

1jQuery('#commentform').find('.form-submit').prepend('<span id="comment-status"></span>'); // add info panel before the form to provide feedback or errors
2
3var myform = $('#respond').clone(true);
4function clearconsole() {
5	console.log(window.console);
6	if( window.console || window.console.firebug ) {
7		console.clear();
8	}
9}
10jQuery('document').ready(function($) {
11	if( $('#respond').length ) {
12		//var commentform = $('#commentform'); // find the comment form
13		var list, commentelm;
14		$('a.comment-reply-link').click(function() {
15			list = $(this).parent().parent().parent().attr('id');
16		});
17		//Get comment html id
18		$(document).on('click', '.comment-reply-link', function() {
19			commentelm = $(this).parents().eq(4).attr('id');
20		});
21		$(document).on( 'submit', '#commentform', function(e) {
22			e.preventDefault();
23			//serialize and store form data in a variable
24			var formdata = $('#commentform').serialize();
25			//Add a status message
26			$('#comment-status').hide().html('<span><i class="fal fa-clock fa-spin"></i>'+ ajax_post.wait +'</span>').fadeIn(200);
27			//Extract action URL from commentform
28			var formurl = $('#commentform').attr('action');
29			//Disabling comment form during submission
30			$('#comments #comment, #comments #submit').attr('disabled','disabled');
31			//Post Form with data
32			$.ajax({
33				type : 'POST',
34				url  : formurl,
35				data : formdata,
36				error: function(XMLHttpRequest, textStatus, errorThrown) {
37					if ( errorThrown == "Conflict" ) {
38						//Add a status message
39						$('#comment-status').hide().html('<span class="ajax-error"><i class="fal fa-times-circle"></i>'+ ajax_post.cmCnflct +'</span>').fadeIn(200);
40					}
41					else {
42						//Add a status message
43						$('#comment-status').hide().html('<span class="ajax-error"><i class="fal fa-times-circle"></i>'+ ajax_post.cmError +'</span>').fadeIn(200);
44					}
45					//Re-enabling comment form
46					$('#comments #comment, #comments #submit').removeAttr('disabled');
47				},
48				success: function(data, textStatus) {
49					if (data == "success" || textStatus == "success") {
50						$('#comments textarea#comment').val('');
51						//Re-enabling comment form
52						$('#comments #comment, #comments #submit').removeAttr('disabled');
53						var commentData = $(data).find('ul.comment-list');
54						if ( $("#comments ul.comment-list").length > 0 ) {
55							if (list != null) {
56								$('.comment-list').html('');
57								$('div.rounded').prepend(commentData);
58							} else {
59								$('.comment-list').html('');
60								$('ul.comment-list').append(commentData);
61							}
62						} else {
63							$("#comments").find('.comment-respond').after('<ul class="comment-list"> </ul>');
64							$('ul.comment-list').append(commentData);
65						}
66						if( $('#respond').length > 0 ) {
67							$('#respond').fadeOut(200).remove();
68						}
69						myform.find('#cancel-comment-reply-link')[0].click();
70						myform.prependTo('#comments');
71						setTimeout(function(){
72							history.replaceState(null, null, ' ');
73							var element = document.getElementById(commentelm);
74							if( typeof element != 'undefined' && element != null && element.length > 0 ) {
75								element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
76							}
77						}, 200);
78						//commentelm.addClass('new-comment');
79						//commentelm.mouseOver( function(){ $(this).removeClass('new-comment'); } );
80						//clearconsole();
81						//$('#wp-temp-form-div').remove();
82						//Add a status message
83						$(document).find('#commentform .form-submit #comment-status').remove();
84						$(document).find('#commentform .form-submit').prepend('<span id="comment-status"><span class="ajax-success"><i class="fal fa-check-circle"></i>'+ ajax_post.cmDone +'</span></span>'); // add info panel before the form to provide feedback or errors
85						//alert(textStatus);
86						
87					} else {
88						$('#comment-status').hide().html('<span class="ajax-error"><i class="fal fa-clock"></i>'+ ajax_post.cmSlow +'</span>').fadeIn(200);
89					}
90					//var commentform = $('#commentform'); // find the comment form
91					myform		= $('#respond').clone(true,true);
92					$(document).on('click', '.comment-reply-link', function() {
93						var commentelm = $(this).parents().eq(4).attr('id');
94					});

95				}
96			});
97			return false;
98		});
99		var promptbox = "<div class='upper-layout' style='display:none'></div><div class='comment-prompt' style='display:none'>"+ajax_post.cmConf+"<br><a class='button cp-yes'>"+ajax_post.yes+"</a><a class='button cp-no'>"+ajax_post.no+"</a></span>";
100		$(document).on( 'click', '#comments .comment .comment-delete-link', function(e){
101			e.preventDefault();
102			var $this = $(this);
103			//Get clicked link data href
104			var thisHref = $this.data("href");
105			//Get clicked link parent id
106			var $thisID  = $(this).parents().eq(2).attr('id');
107			// find comments block
108			var commentform = $('#comments'); 
109			// add dialog box to comments block
110			commentform.find('.comment-list').append('');
111			// define the info panel
112			var statusdiv = $('.comment-prompt');
113			//Create comment prompt box
114			$this.parents().eq(2).append(promptbox);
115			//Fade comment prompt box in after comment delete button clicked
116			$('.comment-prompt,.upper-layout').fadeIn(200);
117			
118			$(document).on('click', '#'+$thisID+' .comment-prompt .cp-no', function() {
119				$('.comment-prompt,.upper-layout').fadeOut(200).remove();
120			});
121			
122			$(document).on('click', '#'+$thisID+' .comment-prompt .cp-yes', function() {
123				$(this).parents().eq(3).addClass('prompt-wait');
124				var loadingMsg = '<img id="postLoader_img" src="'+ajax_post.loader_gif+'">'+ajax_post.wait;
125				$('.comment-prompt').hide().html(loadingMsg).fadeIn(200);
126				$.ajax({

127					type: 'POST',
128					url: thisHref,
129					error: function(XMLHttpRequest, textStatus, errorThrown){
130						$('#comment-status').hide().html('<span class="ajax-error"><i class="fal fa-times-circle"></i>'+ ajax_post.error +'</span>').fadeIn(200);
131					},
132					success: function(data, textStatus){
133						if (data == "success" || textStatus == "success") {
134							var commentData = $(data).find('ul.comment-list');
135							if ($("#comments ul.comment-list").length > 0) {
136								$('.comment-list').html('');
137								$('ul.comment-list').append(commentData);
138							} else {
139								$("#comments").find('div.post-info').prepend('<ul class="comment-list"> </ul>');
140								$('ul.comment-list').html(commentData);
141							}
142							$('#comment-status').hide().html('<span class="ajax-success ajax-comment-deleted"><i class="fal fa-check-circle"></i>'+ ajax_post.cmDel +'</span>').fadeIn(200);
143						}
144					}
145				});
146			});
147		});
148	}
149});