2 re tagged and reformatted
source | link

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

"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'".

"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 ?

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 ?

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 ?

1
source | link

Bootstrap JS conflict with Jquery Ui

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 ?