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">×</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.