Magento 2.1 – Bootstrap JS Conflict with jQuery UI

javascriptmagento-2.1requirejs

I've a block Which show a bootstrap modal by a template file.

So I've making a Bootstrap module with require js located in
app/code/Vendor/Bootstrap/view/web/requirejs-config.js with this code :

var config = {
    paths: {
        "jquery.bootstrap": "//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min"
    },
    shim: {
        'jquery.bootstrap': {
            'deps': ['jquery', 'jquery/ui']
        }
    }
};

I put in dependencies jQuery ui because I get this error when I try to open my modal

"cannot call methods on modal prior to initialization"

(I found this on the web).

So my template (from another module) looks like :

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#callMeBack">OPEN THE MODAL</button>

<!-- Modal -->
<div id="callMeBack" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                // some content
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
requirejs(['jquery','jquery/ui', 'jquery.bootstrap'], function ($, jQueryBootstrap) {
    $('#callMeBack').modal('hide');
});
</script>

Then my problem isn't fixed, I have always the error

"Error: cannot call methods on modal prior to initialization;
attempted to call method 'toggle'"

I don't know why I get this error and where I miss the fix. Can you help me ?

Best Answer

I resolve my issue by removing bootstrap JS. Currently magento gives many js features (modals, tabs, etc...) and are in conflict with bootstrap js for example.