Bootbox alert not working

Question

trying to use Bootbox confirmation but i start testing it with bootbox.alert(), but it's not working.

I confirm that i have bootstrab.css, bootstrab.js, jquery.js and -bootbox.min.js included in the web header:

 <link href="{% static "css/patients.css" %}" rel="stylesheet">
 <link href="{% static "css/bootstrap.css" %}" rel="stylesheet">

<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/jquery-ui.min.css" %}" rel="stylesheet">
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/bootstrap-datetimepicker.min.css" %}" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Here is my button that i want to generate the alert when clicked:

<form id='form'  name='delete'  action="{% url 'delete_person' person.id %}"
          method='POST'>

    {% csrf_token %}

    <button type='submit' class='btn btn-xs btn-link icon'><i  class='glyphicon glyphicon-remove'></i></button>
</form>

In same .html file i have :

<script type="text/javascript">
    $(document).ready(function(){
           $('.btn').on('click' , function(){
                 bootbox.alert("hello there!");
                         });
                 });</script>

when i click on the button nothing happened,

I confirmed that my browser are able to download the content from CDN, not sure where is the issue.

i don't see anything related to bootbox in the console i used firefox console --> js and used the filter to filter on Bootbox — Ali Aqrabawi, Nov 28 '16 at 19:39
You're listening to the form submit button and you've assigned an action to it. Take a look at this answer to a similar question: http://stackoverflow.com/a/27328602/185034 — Paul, Nov 28 '16 at 19:39
if the page is being rendered by JS (Angular, etc), you might try $('.btn').live('click',function(){ ... — circusdei, Nov 28 '16 at 19:41
tried with `.live` and `.addEventListener` , but not working — Ali Aqrabawi, Nov 28 '16 at 19:46
You also have the order incorrect - bootbox.js needs to be loaded after bootstrap.js — Tieson T., Nov 29 '16 at 03:41

score 0 · Answer 1 · edited May 23 '17 at 11:45

i found the answer here

this works for me :

   <script type="text/javascript">
$(document).ready(function(){
$(".btn#del").click(function(e) {
    e.preventDefault();
    var lHref = $('form#form1').attr('action');
    bootbox.confirm("Are you sure?", function(confirmed) {
        if(confirmed) {
            window.location.href = lHref;
        }
    });
});
})
</script>

<button type='submit'  onclick="bootbox.confirm();" id="del" class='btn btn-xs btn-link icon'><i  class='glyphicon glyphicon-remove'></i></button>
    </form></td>

Bootbox alert not working

1 Answers1