Why is javascript code not loaded when injectet into Bootstrap 4 Modal?

Question

I have a javascript function which opens a Bootstrap Modal Dialog:

function showModal(message, headerMessage, sticky, noFooter){
        var modal = $('<div />',{
                class: 'modal fade hide',
                role: "dialog",
                'aria-labelledby': "modalTitle",
                'aria-hidden': "true",
                tabindex: -1
        });

        var modalDialog = $('<div />',{
                class: 'modal-dialog',
                role: "document"
        });
        modal.append(modalDialog);

        var modalContent = $('<div />',{
                class: 'modal-content'
        });
        modalDialog.append(modalContent);



        var header = $('<div />',{
                class: 'modal-header'
        });
        if(headerMessage == undefined) headerMessage = "&nbsp;";
        header.html("<h3 id='modalTitle'>"+headerMessage+'</h3> <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">&times;</span></button>');
        modalContent.append(header);


        var body = $('<div />',{
                class: 'modal-body'
        });
        body.html(message);
        modalContent.append(body);

        if(noFooter != true){
                var footer = $('<div />', {
                        class: 'modal-footer'
                });
                footer.html('<button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">OK</button>');
                modalContent.append(footer);
        }
        var options = {};
        options.show = true;

        if(sticky == true){
                options.backdrop="static";
        }

        modal.modal(options);
        return modal;
};

In the next step I'm loading a HTML snippet from the server, which I want to pass into the showModal() Function as message. Here is an example snippet loaded from server via ajax and stored in the JS-Variable mySnip

<p>Foo text</p>
<script type="text/javascript" >
   alert("Alert1");
   $(document).ready(function(){
      alert("Alert2");
   });
</script>

After that I open the Modal-Dialog with the loaded with the snippet as parameter:

showModal(mySnip, "Header", true, false);

My problem is, that the Javascript part of the snippet is not loaded. Does anybody know how I can get the Javascript of the snippet executed? (So that the Alerts are shown)

Background:

I'm migrating from Bootstrap 2 to Bootstrap 4. This method worked perfectly fine in Bootstrap 2. I know that this can be achieved in an other way, but I'm migrating a big application with dozens of Modals which are working in this way.

Answer 1

i think I found a solution. This is more a problem of jQuery and not Bootstrap. jQuery is simply not executing the content of <script>-Tags anymore. I added this to the bottom of my showModal(...) function right before the return statement:

...
if(message){
    var reponseScript = $(message).filter("script");
    $.each(reponseScript, function(idx, val) { 
        eval(val.text);
    } );
}
$(body).trigger('load');
...

What does it do: It filters the javascript from the server-response. After that it's executed with eval.

The $(body).trigger('load'); executes the code within the injected ready()-function. I still have to test it a little more. I'm afraid, that other ready() methods are also called again.

Here my full showModal Function:

therapy.showModal = function(message, headerMessage, sticky, noFooter){
        var modal = $('<div />',{
                class: 'modal fade hide',
                role: "dialog",
                'aria-labelledby': "modalTitle",
                'aria-hidden': "true",
                tabindex: -1
        });

        var modalDialog = $('<div />',{
                class: 'modal-dialog',
                role: "document"
        });
        modal.append(modalDialog);

        var modalContent = $('<div />',{
                class: 'modal-content'
        });
        modalDialog.append(modalContent);



        var header = $('<div />',{
                class: 'modal-header'
        });
        if(headerMessage == undefined) headerMessage = "&nbsp;";
        header.html("<h3 id='modalTitle'>"+headerMessage+'</h3> <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">&times;</span></button>');
        modalContent.append(header);


        var body = $('<div />',{
                class: 'modal-body'
        });
        body.html(message);
        modalContent.append(body);

        if(noFooter != true){
                var footer = $('<div />', {
                        class: 'modal-footer'
                });
                footer.html('<button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">OK</button>');
                modalContent.append(footer);
        }
        var options = {};
        options.show = true;

        if(sticky == true){
                options.backdrop="static";
        }

        modal.modal(options);
        //$(modal).trigger('load');

        // Get javascript if any and execute...
        // see: https://stackoverflow.com/a/7330106/1219104
        if(message){
                var reponseScript = $(message).filter("script");
                $.each(reponseScript, function(idx, val) { 
                        eval(val.text);
                } );
        }
        $(body).trigger('load');
        return modal;
};