Request Sends More Than One Using Ajax.BeginForm and Jquery.Unobtrusive

Question

HTML Form sends POST request more than one. I am using jquery.unobtrusive-ajax.js for async connection.

When I submit the form request has been sent to server two times. These two connections' details are listed in the Browser's Network -> XHR tab.

Thank you for your suggestions and helps.

My HTML form and my JS files as follows:

JS

<script src="/assets/content/js/jquery.unobtrusive-ajax.js"></script>
<script src="/assets/global/scripts/datatable.js" type="text/javascript"></script>
<script src="/assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>
<script src="/assets/content/js/jquery.unobtrusive-ajax.js"></script>

HTML Form

@using (Ajax.BeginForm("UpdateDocument", "Document",
new AjaxOptions()
{
    HttpMethod = "POST",
    OnBegin = "Document.documentUpdateBegin",
    OnSuccess = "Document.documentUpdateSuccess",
    OnFailure = "Document.documentUpdateFailure"
}))
{
<div class="form-body">

    <input type="hidden" name="ID" value="@Model.DocumentItem.ID" />

    <div class="form-group form-md-line-input form-md-floating-label">
        <input type="text"
            class="form-control"
            name="Title" id="title"
            autocomplete="off"
            maxlength="250"
            value="@Model.DocumentItem.Title"
            required="required" />
        <label for="title_value">Title</label>
        <span class="help-block">Max 250 characters</span>
    </div>

    <div class="form-group form-md-line-input form-md-floating-label">
        <label class="control-label col-md-2"
            style="padding-left: 0px; margin: 5px 0px; color: #888;">
            Durum</label>
        <div class="col-md-2">
            @Html.CheckBox("IsActive", Model.DocumentItem.IsActive,
            new
            {
                @class = "make-switch",
                id = "is_active",
                data_on_text = "&nbsp;Aktif&nbsp;",
                data_off_text = "&nbsp;Pasif&nbsp;"
            })
        </div>
    </div>
</div>
<div class="form-actions noborder margin-top-20">
    <div class="col-md-2">
        <button type="submit" class="btn btn-block blue">UPDATE</button>
    </div>
</div>
}

Answer 1

I found the solution.

There are two javascript jquery.unobtrusive-ajax.js file declaration in JS section.

After I removed the second <script src="/assets/content/js/jquery.unobtrusive-ajax.js"></script> problem is solved.