Converting Bootstrap 3 remote modal to Bootstrap 4 modal with parameters

Question

So in the near future my shop is going to upgrade to Bootstrap 4 but we cannot do this until we solve the issue with using remote modals. Here is an example of how we load our modals. The reason we use remote modals is because the modal-body is dynamic and may use different file based on the url. I have heard that using jQuery("#newsModal").on("load",..) is an alternative but how could I do this? I found this but I am not sure how my anchor would look and how to build the url to load the remote data.

Global PHP include file:

   <div id="NewsModal" class="modal fade" tabindex="-1" role="dialog" data-
ajaxload="true" aria-labelledby="newsLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 class="newsLabel"></h3>
                </div>
                <div class="noscroll-modal-body">
                        <div class="loading">
                            <span class="caption">Loading...</span>
                           <img src="/images/loading.gif" alt="loading">
                    </div>
                </div>
                <div class="modal-footer caption">
                    <button class="btn btn-right default modal-close" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

modal_news.php file:

     <form id="newsForm">
        <div id="hth_err_msg" class="alert alert-danger display-hide col-lg-12 col-md-12 col-sm-12 col-xs-12">
                You have some errors. Please check below.
        </div>
        <div id="hth_ok_msg" class="alert alert-success display-hide col-lg-12 col-md-12 col-sm-12 col-xs-12">
           &#10004;&nbsp;Ready 
        </div>                     
            <!-- details //-->
        </form>

Here is how we trigger the modals :

   <a href="#newsModal" id="modal_sbmt" data-toggle="modal" data-target="#newsModal" 
    onclick="remote='modal_news.php?USER=yardpenalty&PKEY=54&FUNCTION=*GENERAL'; remote_target='#NewsModal .noscroll-modal-body'">
    <span class="label label-icon label-info">
       <i class="fa fa-bullhorn"></i>
    </span>
    Promotional Ordering
   </a>

I think I need to do something like this when building anchor dynamically:

a) Replace paramters with data-attrs

b) Use the event invoker to get the data-attrs using event.target.id

Answer 1

Thanks to Tieson T. and this post I was able to effectively pass parameters to the remote modal using this technique except if you have multiple modals

I have also included some helpful techniques inside this example as to how you may pass parameters to the remote modal.

bootstrap_modal4.php:

    <div class="portlet-body">
    <a href="#attendee" id="add-attendee" data-atnid="add" data-fscode="S" role="button" class="btn btn-success atn show-modal" data-toggle="modal" data-target="#attendee" data-remote="/modal_attendeesave.php?USERNAME=BRIAN">Add Attendee&nbsp;<i class="fa fa-plus"></i></a>   
   </div>

<!-- BEGIN Food Show Attendee Add/Edit/Delete Modal -->
<div  id="attendee" class="modal fade" tabindex="-1" role="dialog" data-ajaxload="true" aria-labelledby="atnLabel" aria-hidden="true">
    <form id="signupForm" method="post">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <label id="atnLabel" class="h3"></label><br>
                <label id="evtLabel" class="h6"></label>
            </div>
            <div class="modal-body">
            <div class="loading"><span class="caption">Loading...</span><img src="/images/loading.gif" alt="loading"></div>
             </div>
            <div class="modal-footer">
            <span class="caption">
                <button type="button" id="add_btn" class="btn btn-success add-attendee hidden">Add Attendee&nbsp;<i class="fa fa-plus"></i></button>
                <button type="button" id="edit_btn" class="btn btn-info edit-attendee hidden">Update Attendee&nbsp;<i class="fa fa-save"></i></button>
                <button type="button" id="del_btn" class="btn btn-danger edit-attendee hidden">Delete Attendee&nbsp;<i class="fa fa-minus"></i></button>
                <button class="btn default modal-close" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </span>
            </div>
        </div>
        </div>
    </form>
 </div>

    <script>
    jQuery(document).ready(function() { 
        EventHandlers();
     });
       function EventHandlers(){
            $('#attendee').on('show.bs.modal', function (e) {
                e.stopImmediatePropagation();

                if($(this).attr('id') === "attendee"){

                // Determines modal's data display based on its data-attr
                var $invoker = $(e.relatedTarget);   
                 var fscode = $invoker.attr('data-fscode');
                 console.log(fscode);
                  // Add Attendee
                  if($invoker.attr('data-atnid') === "add"){ 
                       $("#atnLabel").text("Add New Attendee");
                       $(".add-attendee").removeClass("hidden"); 
                   }
                   else{ //edit/delete  attendee
                     $("#atnLabel").text("Attendee Maintenance");
                     $(".edit-attendee").removeClass("hidden"); 
                   }

                   //insert hidden inputs
                    //add input values for post
                     var hiddenInput = '<INPUT TYPE=HIDDEN NAME=FSCODE VALUE="' + fscode + '"/>';
                     $("#signupForm").append(hiddenInput);
                }
            });

               $('#attendee').on('hidden.bs.modal', function (e) {
                  $(".edit-attendee").addClass("hidden"); 
                  $(".add-attendee").addClass("hidden"); 
                  $("#signupForm input[type='hidden']").remove();
               });

                // BOOTSTRAP 4 REMOTE MODAL ALTERNATIVE FOR BOOTSTRAP 3v-
                $('#add-attendee').on('click', function(e){
                    $($(this).data("target")+' .modal-body').load($(this).data("remote"));
                    $("#attendee").modal('show');      
                });

       }

    </script>

bootstrap_remote_modal4.php:

<form id="signupForm">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
Hello World! 
</div>
</form> 
<script>
  $(document).ready(function(){
     console.log('<?php echo $_GET["USERNAME"]?>'); //passed through url
   });
</script>

NOTE: I am having problems with event propagation during the show.bs.modal event which I have a global show.bs.modal that is propagating up to this event handler due to multiple modals so if you have multiple modals make sure to handle them correctly.

Here is a screen shot of the results which clearly show propagation is taking place but the parameter passing techniques are working.

Answer 2

You might find it easier to use something like Bootbox.js, which can be used to dynamically create Bootstrap modals.

Given what you've shown, it would work something like:

<a href="/path/to/your/service" class="show-modal">trigger modal</a>

with

$(function(){

    $('.show-modal').on('click', function(e){

        e.preventDefault();

        var url = $(this).attr('href');

        $.get(url)
            .done(function(response, status, jqxhr) {

                bootbox.dialog({
                    title: 'Your Title Here',
                    message: response
                });
            });

    });

});

This assumes response is an HTML fragment.

Bootbox hasn't officially been confirmed to work with Bootstrap 4, but I haven't run into any problems with it yet (modals seem to be one of the few components that don't have updated markup in BS4).

Disclaimer: I am currently a contributor to Bootbox (mainly updating the documentation and triaging issues).

If you must use only the Bootstrap modal, you're actually after load(). You would probably do something like:

$(function(){

    $('.show-modal').on('click', function(e){

        e.preventDefault();

        var url = $(this).attr('href');
        var dialog = $('#NewsModal').clone();

        dialog.load(url, function(){
            dialog.modal('show');
        });

    });

});