Change content of Bootstrap Modal - BootBox JS

Question

I am using, bootbox JS to show Modal Dialogs: http://bootboxjs.com/documentation.html

I am trying to show a form in the Modal Dialgue. This Form is in a Partial View.

This works fine, I can load the Partial View and show in Modal using the code below.

HTML:

    <button type="button" class="btn btn-labeled btn-primary pull-right"
            data-modal-title="Create Workshop" data-action="OpenPartialViewDialog" 
            data-action-url="@Url.Action("CreateWorkshop", "Workshops")">
        <span class="btn-label"><i class="glyphicon glyphicon-plus"></i></span>Create
    </button>

jQUERY

$("body").on("click", '*[data-action="OpenPartialViewDialog"]', function (e) {

    e.stopPropagation();

    var btn = $(this);
    var title = btn.data("modal-title");
    $.ajax({
        url: btn.data("action-url"),
        type: "GET",
        success: function (response) {

            bootbox.dialog({
                message: response,
                title: title,
                buttons: {
                    success: {
                        label: "Save",
                        className: "btn-success",
                        callback: function () {
                            $.ajax({
                                url: btn.data("action-url"),
                                type: "POST",
                                data: $("form").serialize(),
                                success: function (response) {

                                },
                                error: function (response) {
                                    return false;
                                }

                            });

                            return false;
                        }
                    },
                    danger: {
                        label: "Cancel",
                        className: "btn-danger"
                    }
                }
            });
        }
    });
});

As you can see the code above I am sending an Ajax request when the user clicks the Save button.

//EXTRACTED CODE FROM ABOVE
callback: function () {
$.ajax({
    url: btn.data("action-url"),
    type: "POST",
    data: $("form").serialize(),
    success: function (response) {

    } 
});

So here is what I want to do,

Here is the code in my controller, where I POST the form:

    [HttpPost]
    public ActionResult CreateWorkshop(WorkshopDTO model)
    {
        if (ModelState.IsValid)
        {

        }
        return PartialView(model);
    }

When the user submits the Form the Controller checks for Server side validation.

If the validation fails the Controller returns HTML (The Partial view with validation messages)

I want to refresh my modal Content so that it shows the Validations.

I can't see anything related to this in the Documentation: http://bootboxjs.com/documentation.html#bb-custom-dialog

SUMMARY: This is what I need to do. This what the Modal looks like, when user clicks Save if Validation Fails, update the Modal Message Content

Answer 1

You can make another bootbox call with its own parameters from within the callback function of your initial modal. Disable animation on that second modal so that to the user it looks like the first modal just changed.

bootbox.dialog({
    message: response,
    title: title,
    buttons: {
        success: {
            label: "Save",
            className: "btn-success",
            callback: function () {
                bootbox.dialog({
                    animate: false,
                    message: newresponse,
                    title: newtitle,
                    etc...