jquery – WordPress and Modal Popup – how to make the already loaded javascript assets available in modal?

Question

I am having a very difficult time getting a modal popup to behave as needed. I have a modal for a forum topic page and want to handle the form submit via ajax, using this great little plugin: https://github.com/alexc7018/bbpress-ajax-replies/blob/master/bbpress-ajax-replies.php

In my theme, I have links to forum topics. Here is how one of those links looks:

<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 Discussion<i class="far fa-calendar-alt"></i>&nbsp;&nbsp;&nbsp;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 discussion 1</h3></a>
         </div>           
      </div>  
   </div>   
   <div class="row discussion-overview"><!-- wp:paragraph -->
   <p>In this discussion…</p>
   <!-- /wp:paragraph -->
   </div>
</div>

And here is the div where the modal content is placed, which I have tried placing in various places (footer, body, etc)

$link = get_permalink($forumpost_id).'?ismodal=1';
?>
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Class Discussion</h4>
                </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

The modal pops up fine, but the javascript asset that is loaded by my template before the modal pops up is not available in the modal. I mean the asset is show in chrome dev tools, but its jQuery calls are not reacting to the modal submit button.

Here is what that button looks like (relevant parts):

<div id="new-reply-25836" class="bbp-reply-form">
  <form id="new-post" name="new-post" method="post">
    <div class="bbp-submit-wrapper">
        <a href="/siteforums/topic/required-discussion-1/?ismodal=1#post-0" id="bbp-cancel-reply-to-link" style="display:none;" rel="nofollow">Cancel</a>
        <button type="submit" id="bbp_reply_submit" name="bbp_reply_submit" class="button submit">Submit</button>   
    </div>
  </div>
</div>

In the head section of my template I load various forum related scripts via wp’s wp_enqueue_script function which results in these being added

<script src="https://asite.test/wp-content/plugins/bbpress/templates/default/js/engagements.min.js?ver=2.6.6" id='bbpress-engagements-js'></script>
<script src="https://asite.test.com/wp-content/plugins/bbpress/templates/default/js/reply.min.js?ver=2.6.6" id='bbpress-reply-js'></script>
<script src="https://asite.test/wp-includes/js/jquery/jquery.color.min.js?ver=2.1.2" id='jquery-color-js'></script>
<script src="https://asite.test/wp-content/plugins/bbpress-ajax-replies-master/reply-ajax.js?ver=5.8.1" id='bbpress-reply-ajax-js'></script>

But as far as I can tell, none of these scripts are available to the modal.

For instance, reply-ajax.js contains this

jQuery(function($) {
    function bbp_reply_ajax_call( action, nonce, form_data ) {
        var $data = {
            action : action,
            nonce  : nonce
        };

        $.each(form_data, function(i, field){
            if ( field.name == "action" ) {
                $data["bbp_reply_form_action"] = field.value;
            } else {
                $data[field.name] = field.value;
            }
        });

        $.post( bbpReplyAjaxJS.bbp_ajaxurl, $data, function ( response ) {
            if ( response.success ) {
                var reply_list_item = '<li>' + response.content + '</li>';

                if ( 'edit' == response.reply_type ) {
                    // in-place editing doesn't work yet, but could (and should) eventually
                    $('#post-' + response.reply_id).parent('li').replaceWith(reply_list_item);
                } else {
                    if ( response.reply_parent && response.reply_parent != response.reply_id ) {
                        // threaded comment
                        var $parent = $('#post-' + response.reply_parent).parent('li');
                        var list_type="ul";
                        if ( $('.bbp-replies').is('ol') ) {
                            list_type="ol";
                        }
                        if ( 0 == $parent.next(list_type).length ) {
                            $parent.after('<' + list_type + ' class="bbp-threaded-replies"></' + list_type + '>');
                        }
                        $parent.next(list_type).append(reply_list_item)
                    } else {
                        $('.bbp-footer').before(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 ) {
                    response.content = bbpReplyAjaxJS.generic_ajax_error;
                }
                alert( response.content );
            }
        } );
    }

    function reset_reply_form() {
        $('#bbp-cancel-reply-to-link').trigger('click');
        $('#bbp_reply_content').val('');
    }

    $( '.bbp-reply-form form' ).on( "submit", function( e ) {
        e.preventDefault();
        console.log('clicked');
        bbp_reply_ajax_call( 'reply', bbpReplyAjaxJS.reply_nonce, $(this).serializeArray() );
    } );
});

When I hit submit, the above submit event is not being seen, as evidenced by console not displaying ‘clicked’.

Things were working fine when the <div class="modal-body"> element contained a complete page, including head section with all the scripts that the template already loaded, but I felt that was overkill to basically load all assets 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 sort of understand that my edits are now interfering, but I am trying to figure out how to get things working more sensibly and not regenerating the theme in its entirety twice (on page load and modal popup).

Anyone have ideas? Is there some magic function or bootstrap modal property I am not aware of, something like makeAssetsAvailableInModalToo!!

thanks!!

0
Brian 1 month 2021-10-16T08:52:01-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse