Bootstrap 4 open remote modal from select

In a recent project I have upgraded from Bootstrap 3+ to Bootstrap 4.  I am currently using Bootstrap Alpha 6.

If you used remote modals where you essentially injected content from another place into your modal and you port your code over to the new Bootstrap 4 this is not longer possible in the way that you are currently doing it. As of Bootstrap 3.3.7 ‘remote’ was depreciated and in Bootstrap 4 it has been completely removed. 🙁

It is possible to get things to work again but it has taken me a bit of time and effort to get what was working well, to work again, with the new framework.  So I hope that this will help.

The select.

Notice that data attributes are included for each option. The last one data-url can be whatever you want to call it.  I called it url as I am passing a url.  You can pass whatever value or page you want.

 <select id="something" class="form-control">
       <option value="0">Select one</option>
       <option data-toggle="modal" data-target="#myModal" data-url="/go/to/somewhere">Option 1</option>  
</select>

When an option is selected it will hit our jQuery which is as follows.

First it will hit #something when it detects that a selection has been made. It will then open the Modal with an id of 'myModal'.  See comments for further explanation in code below.

<script>
    // Add an outcome to a document
    $(document).ready(function(){
        //Open modal from dropdown select.
        $("#something").change(function () {
                $("#myModal").on("show.bs.modal", function(e) {
                    var select = $(e.relatedTarget);// Select that triggered the modal
                    var link = select.data('url'); //Our custom data which we want to pass to the modal body.

                    $(this).find(".modal-body").load(link);//Pass the custom data to the modal body which is loading a link page.
                });
            //Reset the select back to select an option
            $("#something option:selected").prop("selected", false);
            $("#something option:first").prop("selected", "selected");
        });
    });
</script>

Oh, the bottom two lines reset the select after a selection has been made.  You may not need those.

The modal ‘myModal’.

<!-- Modal Curriculum-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="View Curriculum" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Outcomes</h4>
                </div>
                <div class="modal-body">

                </div>
            </div>
        </div>
    </div><!-- /.modal -->

Then the .load will load the ‘remote page’ from the url.  This could be just a html page or whatever you want but the ‘load‘ will pull it in and insert it into the .modal-body as we wanted.

That is it.