Using jQuery to close a Bootstrap modal that contains a partial view (MVC4)

Question

I have a partial view that's displayed in a Bootstrap modal window. The view is an Ajax form used to create an instance of an object.

When I click the save button the object is added correctly to the database but the modal stays open. I want the modal to close when the save button is clicked.

The button in the modal:

<div class="modal-footer">
    <button class="btn btn-inverse" type="submit" id="btn-create-property-save">Save</button>
</div>

Then in my script file:

$('#btn-create-property-save').click(function(e) {
    e.preventDefault();
    $('#create-residential-property-modal').modal('hide');
    return false;
});

When I click the button, the modal remains open.

One thing I'm not too sure about, and which may be causing the problem, is what I'm returning in the CreateObject controller action. At the moment I just have return PartialView(); . What should I be returning here given the scenario described above?

EDIT: Added code to show how modal is loaded.

<div class="modal hide fade in" id="create-residential-property-modal" data-url="@Url.Action("LandlordProperties", "Landlords")">
    <div id="create-property-container"></div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#show-create-property-modal').click(function () {
            var url = $('#create-residential-property-modal').data('url');

            $.get(url, function (data) {
                $('#create-property-container').html(data);

                $('#create-residential-property-modal').modal('show');
            });
        });
    });
</script>

Answer 1

Here is how I've done this in the past.

Step 1, submit the form using Ajax:

@using (Ajax.BeginForm("Create", new AjaxOptions()
                      {
                          OnFailure = "Modal.onAjaxFailure",
                          OnSuccess = "Modal.onAjaxSuccess"
                      }))
    {     
        <div class="form-body">
            @Html.TextAreaFor(model => model.Text, new { rows = "3" })
        </div>
        <div class="form-footer">
            @Html.ValidationMessageFor(model => model.Text)
            @Html.ValidationSummary(true)
            @CustomHelpers.SubmitButton("Add Comemnt")
        </div>
    }

Step 2, return JSON result to display success/fail message:

    [HttpPost]
    public ActionResult Create(CommentCreateModel model)
    {
        if (ModelState.IsValid)
        {
           //Do your database insert etc here...

            return Json(new { error = false, message = "Comment added" });
        }
        else
        {
            return Json(new { error = true, message = "The values entered are not valid" });
        }
    }

Step 3, handle the response (my example is in TypeScript):

export function onAjaxFailure(xhr, status, error) {
    //Show notifications for AJAX errors
    $.notify({
        type: "error",
        text: error
    });
}

export function onAjaxSuccess(data, status, xhr) {
    if (data.error) {
        $.notify({
            type: "error",
            text: data.message
        });
    }
    else {
        $('.modal').modal('hide'); //Hides modal window
        //Show message/anything else here
    }
}