Bootbox dialog doesn't open within a loop

Question

This is my objective:

Custom Bootbox dialog opens to specify a value. User specifies a value, clicks Save and the value is passed to web application via Ajax call.
Web application validates the value and either sends back a "success" message if validation was passed and database was updated or sends back a "failure" message with a reason for a validation failure.
If "success" message was received dialog closes, otherwise it opens again and displays validation message below user input. User can change the input and click Save again or press Cancel to dismiss the dialog.

MCVE (note that while(bContinue == true) is commented out to show that it works without a loop and there is no validation message anywhere but it will be a part of a Message variable (this variable will be updated in Save callback function after an Ajax call)):

$(document).on("click", ".alert", function(e) {
var Message = "<label class='control-label col-sm-1' style='width:30px;' for='assignmentname'>"+"Assignment "+"</label>" 
                + "<input type='text' id='assignmentname' class='form-control' style='float: left; max-width:800px;' value='Initial value'>"

            var bContinue = true;

            //while(bContinue == true)
            {
                bootbox.dialog({
                    size: "large",
                    message: Message,
                    title: "Edit Assignment",
                    buttons: {
                        save: 
                        {
                            label: "Save",
                            className: "btn btn-success",
                            callback: function() {
                                // perform Ajax call to the web application
                                // and set bContinue to true or false depending on 
                                // return value
                                bContinue = true;
                            }
                        },
                        cancel: 
                        {
                            label: "Cancel",
                            className: "btn btn-default",
                            callback: function() {
                                // exit out of the loop
                                bContinue = false;
                            }
                        }
                    }
                });        

            }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>
    <p><a class="alert" href=#>Click here</a></p>

The problem is - as soon as while(bContinue == true) is un-commented the dialog never opens.

Expected MCVE behavior: dialog opens and if Save is clicked it closes and re-opens. If Cancel is clicked - dialog closes.

Amr Elgarhy Amr Elgarhy · Accepted Answer · 2017-07-27T13:37:00

The problem is not in the Bootbox , the problem is in the while loop which keep looping very fast without waiting the Bootbox to load, and it make the whole browser hang :)

So you will need to change your logic, may be put the Bootbox dialog in a function and make it call the function again on save.
Or may be using promises: How to use confirm alert and return an AJAX promise?

Bootbox dialog doesn't open within a loop

1 Answers