Sonarr/NzbDrone.Web/Views/Settings/General.cshtml

@model NzbDrone.Web.Models.SettingsModel

<script type="text/javascript">
    $(document).ready(function () {
        var options = {
            target: '#result',
            beforeSubmit: showRequest,
            success: showResponse,
            type: 'post',
            resetForm: false
        };
        $('#form').ajaxForm(options);
        $('#save_button').attr('disabled', '');

        $(".root_dir_text").autocomplete({ url: '@Url.Action("AutoCompletePath", "Settings")', paramName: 'path', minChars: 3, delay: 300, maxCacheLength: 1 });

        $(".root_dir_text").autocomplete({
            source: '@Url.Action("JsonAutoCompletePath", "Settings")',
            minLength: 3
        });
    });

    function showRequest(formData, jqForm, options) {
        $("#result").empty().html('Saving...');
        $("#form :input").attr("disabled", true);
    }

    function showResponse(responseText, statusText, xhr, $form) {
        $("#result").empty().html(responseText);
        $("#form :input").attr("disabled", false);
    }                        
</script>

@using (Html.BeginForm("SaveGeneral", "Settings", FormMethod.Post, new {id = "form", name = "form"}))
{
@Html.ValidationSummary(true, "Unable to save your settings. Please correct the errors and try again.");
        <fieldset>
            <legend>General</legend>
                
            <div style="padding-top: 10px;">
                <div style="padding-left: 7px; margin-bottom: 5px;">
                    <a id="addItem" style="text-decoration:none;" href="@Url.Action("AddRootDir", "Settings")">
                    <img src="../../Content/Images/Plus.png" alt="Add New Profile" />
                    <h4 style="margin-left: 3px; display: inline; color: Black;">Add New Root Directory</h4></a>
                </div>

                <div id="root-dirs">
        @foreach (var item in Model.Directories)
        {
            Html.RenderAction("GetRootDirView", item);
        }
                </div>
            </div>

                <input type="submit" id="save_button" value="Save" disabled="disabled" />
        </fieldset>
}
<div id="result" class="hiddenResult"></div>

<script type="text/javascript">

    $("#addItem").click(function () {
        $.ajax({
            url: this.href,
            cache: false,
            success: function (html) { $("#root-dirs").append(html); }
        });
        return false;
    });

    var deleteRootDirUrl = '@Url.Action("DeleteRootDir", "Settings")';

    function deleteRootDir(id) {
        sendToServer(id);
        $("#div_" + id).remove();
    }

    function sendToServer(id) {
        $.ajax({
            type: "POST",
            url: deleteRootDirUrl,
            data: jQuery.param({ rootDirId: id }),
            error: function (req, status, error) {
                alert("Sorry! We could not delete your Root Directory at this time. " + error);
            }
        });
    }
</script>