BootStrap alert behaving strange

Question

I have very strange problem with twitter bootstrap alert box. Here is the sample I was trying to execute

<script src="js/jquery.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-dialog.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap-dialog.css">
<title>Insert title here</title>
<script>
function callMe(){
    test();
    BootstrapDialog.alert('Bye');
}
    function test(){
          BootstrapDialog.alert('hello');
    }
</script>
</head>
<body>
<input type="button" name="button"  value="button" onclick="callMe()"/>
</body>
</html>

Result should be : hello ----> Bye

Result coming as : Bye ----> hello

If I comment one Bootstrap alert box then also same result(No point of dilog box overlapping).

function callMe(){
    test();
}
    function test(){
    alert('inside test');
          BootstrapDialog.alert('hello');
          alert('outside test');
    }
</script>

Result coming as : inside test--->outside test--->hello Result should be : inside test--->hello--->outside test

score 1 · Answer 1 · edited May 23 '17 at 12:06

I think this is happening because the calls are asynchronous. The time taken by the control to return back from test() is more than the BootstrapDialog.alert('Bye');

If you put a timeinterval of say 1 sec. like: setInterval(BootstrapDialog.alert('Bye'), 1000); Or use a callback method jQuery Callback Functions.

It is a great chance to start using "jQuery Deferred".

This stackoverflow link sequencing function calls in javascript - are callbacks the only way? might help.

score 0 · Answer 2 · answered Jan 20 '15 at 19:01

0

It's because the hello dialog is behind the other.
You first made a call to create the hello dialog and after you create the bye dialog on the top of the first, that is, the second dialog overwritten the first.

answered Jan 20 '15 at 19:01

Victor

5,043
3
41
55

its not correct, if I exectue as below function callMe(){ test(); //BootstrapDialog.alert('VBye'); } function test(){ alert('inside test'); BootstrapDialog.alert('hello'); alert('outside test'); } ...Result is -->inside test---outside test--->hello – harpal18 Jan 21 '15 at 03:30

BootStrap alert behaving strange

2 Answers2