Ajax表单在第一次提交事件后没有提交，也没有重新渲染部分视图

问题描述：

我有一个包含4个下拉列表的搜索表单。每次用户更改这些值时，表单提交和新结果都将在局部视图中显示。这里是代码：Ajax表单在第一次提交事件后没有提交，也没有重新渲染部分视图

<script type="text/javascript"> 

    $(document).ready(function() { 
     $("#DDLUF").change(function (event) { 
      $("#loading").show(); 
      $("#DDLCidade").empty(); 
      $("#DDLBairro").empty(); 
      $("#DDLRua").empty(); 

      if ($("#DDLUF").val() !== '') { 
       $.ajax({ 
        type: 'POST', 
        url: '/CoberturaPainelRotas/ObterCidadesPorUf', 
        dataType: 'json', 
        data: { uf: $("#DDLUF").val() }, 

        success: function (Ddd) { 
         $("#DDLCidade").append("<option value''>SELECIONE</option>"); 
         $.each(Ddd, function (i, Cidade) { 
          $("#DDLCidade").append('<option value="' + Cidade.Id + '">' + Cidade.Nome + '</option>'); 
         }); 
         var form = $(event.target).parents('form'); 
         form.submit(); 
         $("#DDLCidade").prop('disabled', false); 
         $('#loading').hide(); 

        } 
       }); 


      } else { 
       $('#loading').hide(); 
       $("#DDLCidade").prop('disabled', true); 
       $("#DDLBairro").prop('disabled', true); 
       $("#DDLRua").prop('disabled', true); 
       $("#totalUf").text(""); 
       $("#totalCidade").text(""); 
      } 

     }); 

     $("#DDLCidade").change(function() { 
      $("#loading").show(); 
      $("#DDLBairro").empty(); 
      $("#DDLRua").empty(); 

      if ($("#DDLCidade").val() !== 'SELECIONE') { 
       $.ajax({ 
        type: 'POST', 
        url: '/CoberturaPainelRotas/ObterBairrosPorCidade', 
        dataType: 'json', 
        data: { cidade: $("#DDLCidade").val() }, 

        success: function (Ddd) { 
         $("#DDLBairro").append("<option value''>SELECIONE</option>"); 
         $.each(Ddd, function (i, Bairro) { 
          $("#DDLBairro").append('<option value="' + Bairro.Id + '">' + Bairro.Nome + '</option>'); 
         }); 
         var form = $(event.target).parents('form'); 
         form.submit(); 
         $("#DDLBairro").prop('disabled', false); 
         $('#loading').hide(); 
        } 
       }); 

      } else { 
       $('#loading').hide(); 
       $("#DDLBairro").prop('disabled', true); 
       $("#DDLRua").prop('disabled', true); 
       $("#totalCidade").text(""); 
      } 

     }); 

     $("#DDLBairro").change(function() { 
      $("#loading").show(); 
      $("#DDLRua").empty(); 

      if ($("#DDLRua").val() !== 'SELECIONE') { 
       $.ajax({ 
        type: 'POST', 
        url: '/CoberturaPainelRotas/ObterRuasPorBairro', 
        dataType: 'json', 
        data: { bairro: $("#DDLBairro").val() }, 

        success: function (Ddd) { 
         $("#DDLRua").append("<option value''>SELECIONE</option>"); 
         $.each(Ddd, function (i, Rua) { 
          $("#DDLRua").append('<option value="">' + Rua.NomeRua + '</option>'); 
         }); 
         var form = $(event.target).parents('form'); 
         form.submit(); 
         $("#DDLRua").prop('disabled', false); 
         $('#loading').hide(); 
        } 
       }); 
      } else { 
       $('#loading').hide(); 
       $("#DDLRua").prop('disabled', true); 
      } 

     }); 



    }); 
</script> 

<div class="panel-body"> 
    <div class="row"> 
     <div class="col-lg 12"> 
      <h3 class="page-header">Consultar Cobertura</h3> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="form-group"> 
       @using (Ajax.BeginForm("ConsultarCapacidadeSecundaria", "CoberturaPainelRotas", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "PartialConsultarCobertura" }, new { @id = "formID" })) 
       { 
        <div class="row"> 
         <div class="col-sm-2"> 
          <label>Uf:</label> 
          @Html.DropDownListFor(x => x.UF , new SelectList((IEnumerable)ViewData["UF"]), "SELECIONE", new { @id = "DDLUF", @class = "form-control" }) 
         </div> 
         <div class="col-sm-4"> 
          <label id="totalUf"></label> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-4"> 
          <label>Cidade:</label> 
          @Html.DropDownListFor(x => x.Cidade, new SelectList(string.Empty), new { @id = "DDLCidade", @class = "form-control", @disabled = "true" }) 
         </div> 
         <div class="col-sm-4"> 
          <label id="totalCidade"></label> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-4"> 
          <label>Bairro:</label> 
          @Html.DropDownListFor(x => x.Bairro, new SelectList(string.Empty), new { @id = "DDLBairro", @class = "form-control", @disabled = "true" }) 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-4"> 
          <label>Rua:</label> 
          @Html.DropDownListFor(x => x.Rua, new SelectList(string.Empty), new { @id = "DDLRua", @class = "form-control", @disabled = "true" }) 
         </div> 
        </div> 
       } 


      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <div id="PartialConsultarCobertura"> 
       @{ 
        Html.RenderPartial("PartialConsultaCobertura"); 
       } 
      </div> 
     </div> 
    </div> 
</div>

当用户更改第一个下拉列表时，ajax表单提交并显示结果。但是，当用户更改以下下拉列表中的选定项目时，表单不会提交。难道是我需要每次重新附加jquery事件？我究竟做错了什么？

（ASP.MVC 5 BTW）

它看起来像你清除选择并添加选项还给他们，所以你不应该失去你的绑定。我在第二个逻辑块中发现了一个错误，那就是增加了一个带有“value”的选项，但到目前为止我还没有发现任何其他的东西。 – Taplar

我已经使用chrome调试了jquery代码，并且成功事件确实触发了。但是，当涉及到“form.submit”时，它不会。 –

你的标记看起来没有任何形式标记。这是否准确？ – Taplar

答

尝试更换此$("#DDLUF").change(function (event)

这个

与同为剩余dropdownlists

这是用Ajax刷新的一个常见问题因为它会动态创建新内容并且在刷新时丢失事件

如果这样仍然没有工作，你需要改变这种var form = $(event.target).parents('form');

，并尝试硬编码像var form = $(event.target).parent().parent().parent().childern(...;

问题是我忘记了在其他更改函数调用中传递事件参数。现在它正在工作。但是，当用户更改第二个下拉列表的值时，局部视图呈现为整个页面。什么可能导致这个？ –

尝试在变更函数的第一行放置'event.preventDefault（）' –

只是做了...没有工作。 –

答

我已经成功地使其工作：

1）增加了“事件”的变更事件：删除

$("#DDLCidade").change(function (event) {}

2）Ajax的开始形式：

<div class="panel-body"> 
    <div class="row"> 
     <div class="col-lg 12"> 
      <h3 class="page-header">Consultar Cobertura</h3> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="form-group"> 

        <div class="row"> 
         <div class="col-sm-2"> 
          <label>Uf:</label> 
          @Html.DropDownListFor(x => x.UF , new SelectList((IEnumerable)ViewData["UF"]), "SELECIONE", new { @id = "DDLUF", @class = "form-control" }) 
         </div> 
         <div class="col-sm-4"> 
          <label id="totalUf"></label> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-4"> 
          <label>Cidade:</label> 
          @Html.DropDownListFor(x => x.Cidade, new SelectList(string.Empty), new { @id = "DDLCidade", @class = "form-control", @disabled = "true" }) 
         </div> 
         <div class="col-sm-4"> 
          <label id="totalCidade"></label> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-4"> 
          <label>Bairro:</label> 
          @Html.DropDownListFor(x => x.Bairro, new SelectList(string.Empty), new { @id = "DDLBairro", @class = "form-control", @disabled = "true" }) 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-4"> 
          <label>Rua:</label> 
          @Html.DropDownListFor(x => x.Rua, new SelectList(string.Empty), new { @id = "DDLRua", @class = "form-control", @disabled = "true" }) 
         </div> 
        </div> 



      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <div id="PartialConsultarCobertura"> 
       @{ 
        Html.RenderPartial("PartialConsultaCobertura"); 
       } 
      </div> 
     </div> 
    </div> 
</div>

3）使用的另一种AJAX调用来填充我的部分观点：

$.ajax({ 
    type: 'GET', 
    url: '/CoberturaPainelRotas/ConsultarCapacidadeSecundaria', 
    data: { uf: $("#DDLUF").val(), cidade: $("#DDLCidade").val(), bairro: $("#DDLBairro").val(), rua: $("#DDLRua").val() }, 
    success: function (viewHTML) { 
      $("#PartialConsultarCobertura").html(viewHTML); 
    } 
});

Ajax表单在第一次提交事件后没有提交，也没有重新渲染部分视图

相关推荐