CODEWITHSUNDEEP
jqueryajaxbootbox
Eric
Eric

Reputation: 1261

Preventing bootbox from closing after ajax

I'm using a bootbox to log in my users and would like to keep it open if there are errors. From this link it looks like all I have to do is use return false. However, my bootbox is still closing; my guess is that it's because I'm sending an ajax request to do the form validation.

Is there anyway to keep the bootbox open as I check whether username/password are valid serverside? And, one solution that seems to work is to just create a function to open the bootobx, and just re-open it on failure, but a "cleaner" solution would be appreciated.

bootbox.dialog({
  message: message,
  title: "Log In",
  buttons: {
    success: {
      label: "Submit",
      className: "btn-success",
      callback: function() {

        var username = $('.bootbox-body input[name="username"]').val();
        var password = $('.bootbox-body input[name="password"]').val();

        $.post('ajax/sign_in.php', {
          username: username,
          password: password
        }, function() {}, 'json').done(function(o) {

          if (o.success) {
            //send them to a new page
          }
          if (o.error) {
            $('#login_error').html(o.error);
            //oops!  the bootbox has closed
          }
        });
      }
    }
  }
});

Upvotes: 1

Views: 2282

Answers (1)

michael
michael

Reputation: 95

One option would be to make your bootbox callback return false after making your ajax call (to prevent it from automatically closing), and then to manually hide it when the login is successful using the hide method for a bootstrap modal (link). So something like:

var box = bootbox.dialog({
    title: title,
    message: message,
    buttons: {
        success: {
            label: "Submit",
            className: "btn-success",
            callback: function() {
                var username = $('.bootbox-body input[name="username"]').val();
                var password = $('.bootbox-body input[name="password"]').val();

                $.post('ajax/sign_in.php', {
                    username: username,
                    password: password
                }, function () { }, 'json').done(function (o) {
                    if (o.success) {
                        box.modal('hide');
                    }
                    if (o.error) {
                        $('#login_error').html(o.error);
                    }
                });
                return false;
            }
        }
    }
});

Upvotes: 4

Related Questions