I’m having a really tough time getting a modal popup to behave as wanted. I’ve a modal for a discussion board subject web page and wish to deal with the shape submit by way of ajax, utilizing this nice little plugin: https://github.com/alexc7018/bbpress-ajax-replies/blob/grasp/bbpress-ajax-replies.php
In my theme, I’ve hyperlinks to discussion board matters. Right here is how a type of hyperlinks seems:
<div id="required-discussion-1" class="contenttype-wrapper sometopictype-discussion" content-id="25836" data-id="b9d3cc2b-a67e-44b7-a58f-bdd7dc310c44">
<div class="heading d-flex flex-row"><i class="contenticon fas fa-users fa-7x"></i>
<div class="col">
<div class="row required-discussion-text"><span class="content-name">Required Dialogue<i class="far fa-calendar-alt"></i> Due: 2021-10-05 12:00:00</span>
</div>
<div class="row"><a href="javascript:void(0);" data-target="#myModal" data-href="https://somesite.com/forums/topic/required-discussion-1/?ismodal=1" data-toggle="modal" class="openPopup"><h3 class="topictype-title">required dialogue 1</h3></a>
</div>
</div>
</div>
<div class="row discussion-overview"><!-- wp:paragraph -->
<p>On this dialogue…</p>
<!-- /wp:paragraph -->
</div>
</div>
And right here is the div the place the modal content material is positioned, which I’ve tried putting in varied locations (footer, physique, and so forth)
$hyperlink = get_permalink($forumpost_id).'?ismodal=1';
?>
<div class="modal fade" id="myModal" function="dialog">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button kind="button" class="close" data-dismiss="modal">&occasions;</button>
<h4 class="modal-title">Class Dialogue</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button kind="button" class="btn btn-default" data-dismiss="modal">Shut</button>
</div>
</div>
</div>
</div>
The modal pops up high quality, however the javascript asset that’s loaded by my template earlier than the modal pops up will not be obtainable within the modal. I imply the asset is present in chrome dev instruments, however its jQuery calls will not be reacting to the modal submit button.
Here’s what that button seems like (related components):
<div id="new-reply-25836" class="bbp-reply-form">
<kind id="new-post" title="new-post" technique="post">
<div class="bbp-submit-wrapper">
<a href="/siteforums/topic/required-discussion-1/?ismodal=1#post-0" id="bbp-cancel-reply-to-link" type="display:none;" rel="nofollow">Cancel</a>
<button kind="submit" id="bbp_reply_submit" title="bbp_reply_submit" class="button submit">Submit</button>
</div>
</div>
</div>
Within the head part of my template I load varied discussion board associated scripts by way of wp’s wp_enqueue_script perform which leads to these being added
<script src='https://asite.check/wp-content/plugins/bbpress/templates/default/js/engagements.min.js?ver=2.6.6' id='bbpress-engagements-js'></script>
<script src='https://asite.check.com/wp-content/plugins/bbpress/templates/default/js/reply.min.js?ver=2.6.6' id='bbpress-reply-js'></script>
<script src='https://asite.check/wp-includes/js/jquery/jquery.coloration.min.js?ver=2.1.2' id='jquery-color-js'></script>
<script src='https://asite.check/wp-content/plugins/bbpress-ajax-replies-master/reply-ajax.js?ver=5.8.1' id='bbpress-reply-ajax-js'></script>
However so far as I can inform, none of those scripts can be found to the modal.
As an example, reply-ajax.js accommodates this
jQuery(perform($) {
perform bbp_reply_ajax_call( motion, nonce, form_data ) {
var $information = {
motion : motion,
nonce : nonce
};
$.every(form_data, perform(i, discipline){
if ( discipline.title == "action" ) {
$information["bbp_reply_form_action"] = discipline.worth;
} else {
$information[field.name] = discipline.worth;
}
});
$.put up( bbpReplyAjaxJS.bbp_ajaxurl, $information, perform ( response ) {
if ( response.success ) {
var reply_list_item = '<li>' + response.content material + '</li>';
if ( 'edit' == response.reply_type ) {
// in-place enhancing would not work but, however might (and may) finally
$('#post-' + response.reply_id).dad or mum('li').replaceWith(reply_list_item);
} else {
if ( response.reply_parent && response.reply_parent != response.reply_id ) {
// threaded remark
var $dad or mum = $('#post-' + response.reply_parent).dad or mum('li');
var list_type = 'ul';
if ( $('.bbp-replies').is('ol') ) {
list_type = 'ol';
}
if ( 0 == $dad or mum.subsequent(list_type).size ) {
$dad or mum.after('<' + list_type + ' class="bbp-threaded-replies"></' + list_type + '>');
}
$dad or mum.subsequent(list_type).append(reply_list_item)
} else {
$('.bbp-footer').earlier than(reply_list_item);
}
}
reset_reply_form();
var $new_element = $('.post-' + response.reply_id);
$new_element.removeClass('odd').addClass('even');
var orig_color = $new_element.css('backgroundColor');
$new_element.css('backgroundColor', 'lightYellow').animate({backgroundColor: orig_color}, 2000);
} else {
console.log(response);
if ( !response.content material ) {
response.content material = bbpReplyAjaxJS.generic_ajax_error;
}
alert( response.content material );
}
} );
}
perform reset_reply_form() {
$('#bbp-cancel-reply-to-link').set off('click on');
$('#bbp_reply_content').val('');
}
$( '.bbp-reply-form kind' ).on( "submit", perform( e ) {
e.preventDefault();
console.log('clicked');
bbp_reply_ajax_call( 'reply', bbpReplyAjaxJS.reply_nonce, $(this).serializeArray() );
} );
});
Once I hit submit, the above submit occasion will not be being seen, as evidenced by console not displaying ‘clicked’.
Issues have been working high quality when the <div class="modal-body"> component contained an entire web page, together with head part with all of the scripts that the template already loaded, however I felt that was overkill to mainly load all property twice, so in my template, I added these calls
if (! isset($_GET['ismodal'])):
get_header();
endif;
and
if (! isset($_GET['ismodal'])):
get_footer();
endif
So I form of perceive that my edits at the moment are interfering, however I’m making an attempt to determine learn how to get issues working extra sensibly and never regenerating the theme in its entirety twice (on web page load and modal popup).
Anybody have concepts? Is there some magic perform or bootstrap modal property I’m not conscious of, one thing like makeAssetsAvailableInModalToo!!
thanks!!