locked
Can you make jquery-confirm work with bootstrap 4 RRS feed

  • Question

  • User283528319 posted

    <g class="gr_ gr_59 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="59" data-gr-id="59">Hi</g> <g class="gr_ gr_12 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="12" data-gr-id="12">al</g>,

    I <g class="gr_ gr_33 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="33" data-gr-id="33">coudn't</g> make jquery-confirm.js to work with my bootstrap 4 <g class="gr_ gr_121 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="121" data-gr-id="121">project</g>.

    Do you have any idea how can I solve this?

    https://craftpip.github.io/jquery-confirm/

    Monday, February 25, 2019 6:26 PM

Answers

  • User475983607 posted

    fatihbarut

    Hi al,

    I coudn't make jquery-confirm.js to work with my bootstrap 4 project.

    Do you have any idea how can I solve this?

    https://craftpip.github.io/jquery-confirm/

    The docs state version 3.3.4 is compatible with Bootstrap 3 and above.  I gave the plugin a try and it functioned as expected with Bootstrap 4.

    This code comes directly from the example.

    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    <button class="btn btn-primary btn-block example-p-2">Confirmation</button>
    
    @section Scripts {
        <script>
            $('.example-p-2').on('click', function () {
                $.confirm({
                    title: 'A secure action',
                    content: 'Its smooth to do multiple confirms at a time. <br> Click confirm or cancel for another modal',
                    icon: 'fa fa-question-circle',
                    animation: 'scale',
                    closeAnimation: 'scale',
                    opacity: 0.5,
                    buttons: {
                        'confirm': {
                            text: 'Proceed',
                            btnClass: 'btn-blue',
                            action: function () {
                                $.confirm({
                                    title: 'This maybe critical',
                                    content: 'Critical actions can have multiple confirmations like this one.',
                                    icon: 'fa fa-warning',
                                    animation: 'scale',
                                    closeAnimation: 'zoom',
                                    buttons: {
                                        confirm: {
                                            text: 'Yes, sure!',
                                            btnClass: 'btn-orange',
                                            action: function () {
                                                $.alert('A very critical action <strong>triggered!</strong>');
                                            }
                                        },
                                        cancel: function () {
                                            $.alert('you clicked on <strong>cancel</strong>');
                                        }
                                    }
                                });
                            }
                        },
                        cancel: function () {
                            $.alert('you clicked on <strong>cancel</strong>');
                        },
                        moreButtons: {
                            text: 'something else',
                            action: function () {
                                $.alert('you clicked on <strong>something else</strong>');
                            }
                        },
                    }
                });
            });
        </script>
    }

    Perhaps if you tell us what's not working and provide at least enough code to reproduce the issue.  

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 25, 2019 9:17 PM
  • User839733648 posted

    Hi fatihbarut,

    I've made a simple demo to test if bootstrap works well with jquery-confirm.

    And on my side, it works well.

    I coudn't make jquery-confirm.js to work with my bootstrap 4 project.

    Could you describe your issue in detail? How does your project not work?

    Or if possible, please provide related codes so that it will be easier for us to help with you.

    Besides, here is my testing demo.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
        <script>
            $(function () {
                $("#testbtn").click(function () {
                    $.alert({
                        title: 'Alert!',
                        content: 'Simple alert!',
                    });
                })  
            })
        
        </script>
    </head>
    <body>
        <button id="testbtn" class="btn btn-primary">example confirm</button>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 26, 2019 6:17 AM

All replies

  • User475983607 posted

    fatihbarut

    Hi al,

    I coudn't make jquery-confirm.js to work with my bootstrap 4 project.

    Do you have any idea how can I solve this?

    https://craftpip.github.io/jquery-confirm/

    The docs state version 3.3.4 is compatible with Bootstrap 3 and above.  I gave the plugin a try and it functioned as expected with Bootstrap 4.

    This code comes directly from the example.

    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    <button class="btn btn-primary btn-block example-p-2">Confirmation</button>
    
    @section Scripts {
        <script>
            $('.example-p-2').on('click', function () {
                $.confirm({
                    title: 'A secure action',
                    content: 'Its smooth to do multiple confirms at a time. <br> Click confirm or cancel for another modal',
                    icon: 'fa fa-question-circle',
                    animation: 'scale',
                    closeAnimation: 'scale',
                    opacity: 0.5,
                    buttons: {
                        'confirm': {
                            text: 'Proceed',
                            btnClass: 'btn-blue',
                            action: function () {
                                $.confirm({
                                    title: 'This maybe critical',
                                    content: 'Critical actions can have multiple confirmations like this one.',
                                    icon: 'fa fa-warning',
                                    animation: 'scale',
                                    closeAnimation: 'zoom',
                                    buttons: {
                                        confirm: {
                                            text: 'Yes, sure!',
                                            btnClass: 'btn-orange',
                                            action: function () {
                                                $.alert('A very critical action <strong>triggered!</strong>');
                                            }
                                        },
                                        cancel: function () {
                                            $.alert('you clicked on <strong>cancel</strong>');
                                        }
                                    }
                                });
                            }
                        },
                        cancel: function () {
                            $.alert('you clicked on <strong>cancel</strong>');
                        },
                        moreButtons: {
                            text: 'something else',
                            action: function () {
                                $.alert('you clicked on <strong>something else</strong>');
                            }
                        },
                    }
                });
            });
        </script>
    }

    Perhaps if you tell us what's not working and provide at least enough code to reproduce the issue.  

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 25, 2019 9:17 PM
  • User839733648 posted

    Hi fatihbarut,

    I've made a simple demo to test if bootstrap works well with jquery-confirm.

    And on my side, it works well.

    I coudn't make jquery-confirm.js to work with my bootstrap 4 project.

    Could you describe your issue in detail? How does your project not work?

    Or if possible, please provide related codes so that it will be easier for us to help with you.

    Besides, here is my testing demo.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
        <script>
            $(function () {
                $("#testbtn").click(function () {
                    $.alert({
                        title: 'Alert!',
                        content: 'Simple alert!',
                    });
                })  
            })
        
        </script>
    </head>
    <body>
        <button id="testbtn" class="btn btn-primary">example confirm</button>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 26, 2019 6:17 AM
  • User283528319 posted

    Jenifer Jiang

    answer

    thanks a <g class="gr_ gr_14 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="14" data-gr-id="14">lot</g> I am coming back as soon as I finish what I have to do right now (max in a day (I hope :))

    Tuesday, February 26, 2019 6:53 AM
  • User839733648 posted

    Hi fatihbarut,

    Is my suggestion helpful to you? Or do you have any other updated issues about this thread?

    Best Regards,

    Jenifer

    Tuesday, March 5, 2019 6:43 AM
  • User283528319 posted

    <g class="gr_ gr_26 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="26" data-gr-id="26">Hi</g> <g class="gr_ gr_27 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="27" data-gr-id="27">fatihbarut</g>,

    Is my suggestion helpful to you? Or do you have any other updated issues about this thread?

    Best Regards,

    Jenifer

    I am sorry,

    I am climbing a cliff barehand right now pls let me finish and turn back.

    Tuesday, March 5, 2019 7:00 AM