ajax表单更新特定的div不工作$（“＃formName”）。submit（）;

我有一个ajax表单，提交按钮。当我按下提交按钮时，它会加载我的内容并将其放入指定的div中。当我按下提交按钮

<form action="/ControllerName/ActionName" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#contentDiv" id="myForm" method="post"> 
<input type="submit" /> 
<div id="contentDiv"> 
    <p>No content has been loaded yet</p> 
</div> 

<nav> 
    <li id="pager-next" class="next "><a href="#"><span aria-hidden="true">Next</span></a></li> 
</nav> 

</form>

上面的代码工作正常，它加载的内容并把它它在contentDiv。但是当我按下pager-next时，它会加载内容，但会将其放入一个全新的页面，而不是位于contentDiv内。

<script> 
$("#pager-next").click(function (event) { 
    event.preventDefault(); 
    $("#myForm").submit(); 
}) 
</script>

任何建议，我怎么能得到它的工作，所以当我按下呼叫器，未来它会加载它contentDiv内，而不是新的一页？

来源

2017-05-05 user1408786

您需要为 – madalinivascu

'$ AJAX（ “＃filterForm”）提交（）;'将提交表单，然后将表单发送到它的行动（'行动=”/ControllerName/ActionName“'）。为了防止这种情况发生，请在表单上提交活动，阻止其提交并通过xhr发送表单数据。 – KarelG

你应该做的是禁用表单提交..

<form action="javascript:void(0)" id="myForm" ....> 
    <input type="submit value="submit" /> 
    <div id="dynamic"></div> 
</form>

然后，在JavaScript

$(document).on('submit','#myForm',function{ 
     $.ajax({ 
      url: "/ControllerName/ActionName", 
      success: function(response) { 
       $("#dynamic").html(response); 
      } 
     }); 
})

编辑

，因为你不能编辑表格你可以只需在提交事件中添加返回false，如

$(document).on('submit','#myForm',function(e) { 
    e.preventDefault(); 
    // do ajax here 
    return false; 
});

为编辑我加e.preventDefault();

来源

2017-05-05 07:25:46 Demonyowh

也可以不编辑表单吗？当我使用asp.net生成表单时： @using（Ajax.BeginForm（“ActionName”，“ControllerName”，null，new AjaxOptions {HttpMethod =“POST”，UpdateTargetId =“ContentDiv”}，new {id =“ myForm“}）） { – user1408786

一个干净的方法是不要删除动作url。只听听提交事件。然后在ajax处理程序中，使用action值作为url。借此，即使在JavaScript禁用的客户端也能正常工作。 – KarelG

是的，这是可能的..因为你不能编辑表格，你可以只返回false – Demonyowh

ajax表单更新特定的div不工作$（“＃formName”）。submit（）;

回答

相关问题