jQueryの（提出）は

Question

と呼ばれていない私は、提出行動に<form>を上書きしようとするので、私は次のコードを使用します。

<script type="text/javascript"> 
    $(function() { 
     var form = $("#FilterForm"); 

     form.submit(function() { 
      alert("Submit"); 

      $.ajax({ 
       url: form.attr("action"), 
       type: 'POST', 
       data: new FormData(this), 
       processData: false, 
       contentType: false, 
       success: function (response) { 
        alert(response); 
        $('#Container').html(response); 
       }, 
       error: function() { 
        $('#Container').html(loadingFailedStr); 
       }, 
       timeout: 15000 
      }); 

      return false; 
     }) 
    }); 
</script> 

このスクリプトブロックは私のフォームの後に検索します。

<div class="panel card-0"> 
    <div class="panel-body"> 
     @using (Html.BeginForm("TasksGridViewPartial", "Tasks", new { StaffId = staffId, StageId = stageId }, FormMethod.Post, new { id = "FilterForm", enctype = "multipart/form-data" })) 
     { 
      <fieldset> 
       <div class="form-group row"> 
        <div class="col-md-2 col-sm-6"> 
         @Html.Label(Headers.DateCreate) 
         <div class="datepicker"> 
          @Html.TextBoxFor(m => m.CreatedOn1, new { @class = "form-control" }) 
         </div> 
         <div class="datepicker"> 
          @Html.TextBoxFor(m => m.CreatedOn2, new { @class = "form-control" }) 
         </div> 
        </div> 
        <div class="col-md-2 col-sm-6"> 
         @Html.Label(Headers.DateClose) 
         <div class="datepicker"> 
          @Html.TextBoxFor(m => m.ClosedOn1, new { @class = "form-control" }) 
         </div> 
         <div class="datepicker"> 
          @Html.TextBoxFor(m => m.ClosedOn2, new { @class = "form-control" }) 
         </div> 
        </div> 
        <div class="col-md-2 col-sm-6"> 
         @Html.Label(Headers.DateStart) 
         <div class="datepicker"> 
          @Html.TextBoxFor(m => m.StartDate1, new { @class = "form-control" }) 
         </div> 
         <div class="datepicker"> 
          @Html.TextBoxFor(m => m.StartDate2, new { @class = "form-control" }) 
         </div> 
        </div> 
        <div class="col-md-2 col-sm-6"> 
         @Html.Label(Headers.DateEnd) 
         <div class="datepicker"> 
          @Html.TextBoxFor(m => m.EndDate1, new { @class = "form-control" }) 
         </div> 
         <div class="datepicker"> 
          @Html.TextBoxFor(m => m.EndDate2, new { @class = "form-control" }) 
         </div> 
        </div> 
        <div class="col-md-2 col-sm-6"> 
         @Html.Label(Headers.DateCheck) 
         <div class="datepicker"> 
          @Html.TextBoxFor(m => m.VerifiedOn1, new { @class = "form-control" }) 
         </div> 
         <div class="datepicker"> 
          @Html.TextBoxFor(m => m.VerifiedOn2, new { @class = "form-control" }) 
         </div> 
        </div> 
        <div class="col-md-2 col-sm-6"> 
         @Html.Label(Headers.TaskNumber) 
         <div style="padding: 4px;"> 
          @Html.TextBoxFor(m => m.VerifiedOn1, new { @class = "form-control", type = "number" }) 
         </div> 
         <div style="padding: 4px;"> 
          @Html.TextBoxFor(m => m.VerifiedOn2, new { @class = "form-control", type = "number" }) 
         </div> 
        </div> 
       </div> 
       <div class="form-group row"> 
        <div class="col-md-3 col-sm-6"> 
         @Html.LabelFor(m => m.Executors) 
         @Html.ListBoxFor(m => m.Executors, executors, new { @class = "selectpicker form-control", @title = Messages.ChooseExecutors, multiple = "" }) 
        </div> 
        <div class="col-md-3 col-sm-6"> 
         @Html.LabelFor(m => m.Projects) 
         @Html.ListBoxFor(m => m.Projects, projects, new { @class = "selectpicker form-control", @title = Messages.ChooseProjects, multiple = "" }) 
        </div> 
        <div class="col-md-3 col-sm-6"> 
         @Html.LabelFor(m => m.Statuses) 
         @Html.ListBoxFor(m => m.Statuses, statuses, new { @class = "selectpicker form-control", @title = Messages.ChooseStatuses, multiple = "" }) 
        </div> 
       </div> 
       <div class="form-group row" style="padding-top: 24px;"> 
        <div class="col-md-12"> 
         <button type="submit" class="btn btn-primary">@Actions.Apply</button> 
         <button type="button" class="btn btn-default">@Actions.ClearFilters</button> 
         <button type="button" class="btn btn-default">@Actions.ShowAccepted</button> 
         <button type="button" class="btn btn-default">@Actions.HideAccepted</button> 
        </div> 
       </div> 
      </fieldset> 
     } 
    </div> 
</div> 

この部分的なビューは、@Html.Action("FilterPartial")を呼び出してレンダリングします。
最も興味深いのは、文書準備完了イベントの変数formをチェックし、必要に応じて宣言したことです。しかし、まだsubmitは呼び出されていません。
どこに問題がありますか？

Answer 1

return falseが十分ではありません、あなたはまた、デフォルトをブロックする必要があります。

$(function() { 
     var form = $("#FilterForm"); 

     form.submit(function (e) { // Pass the event to the function 
      e.preventDefault(); // Stop the form submitting. 

      $.ajax({ 
       url: form.attr("action"), 
       type: 'POST', 
       data: new FormData(this), 
       processData: false, 
       contentType: false, 
       success: function (response) { 
        alert(response); 
        $('#Container').html(response); 
       }, 
       error: function() { 
        $('#Container').html(loadingFailedStr); 
       }, 
       timeout: 15000 
      }); 

      return false; 
     }) 
    });