1

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 ?

  • Did you solve this somehow? – Kilise Apr 6 '17 at 10:23
1

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.

0

In your requirejs-config.js

var config = {
paths: {
    'bootstrap':'js/bootstrap.bundle'
} ,
map: {
    '*': {}
},
shim: {
    'bootstrap': {
        'deps': ['jquery','jquery/ui']
    }
}
};

Then make sure you use the bootstrap.bundle.js rather than bootstrap.js or other min versions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.