I'm trying to have some Ajax form in the page which is not working at all, it does not send any requests on submit, noting in firebug, the form is being loaded to page by ajax, but I have other forms which are loaded to form by ajax into a jquery UI dialog and they are working fine, here is my whole partial view code , (the Part with action "SeacrhTasksTable" not working) I'd attach the rendered the whole HTML but it's so big.
我试图在页面中有一些Ajax表单根本不起作用,它不会发送任何提交请求,注意在firebug中,表单被ajax加载到页面,但我有其他表单加载通过ajax形成一个jquery UI对话框,它们工作正常,这是我的整个局部视图代码,(部分动作“SeacrhTasksTable”无效)我附加渲染整个HTML,但它是如此之大。
@model APS.HelpDesk.UI.MyModel<APS.HelpDesk.Data.App_ProjectTask>
<h2>
پروژه
@ViewBag.ProjectTitle
</h2>
<div class="wrapperTask">
<div class="firstTask">
@* <input type="hidden" value="@(ViewBag.ProjectId)" />*@
@Ajax.ActionLink("تعریف کار جدید", "AddProjectTaskDialog", new
{
Id = ViewBag.ProjectId,
area = "ProjectAdmin"
}, new AjaxOptions()
{
HttpMethod = "GET",
LoadingElementId = "AddProjectTaskLoadingGif",
UpdateTargetId = "AddProjectTaskDialog",
InsertionMode = InsertionMode.Replace,
OnBegin = "clearDialogs();",
OnSuccess = " $('#AddProjectTaskDialog').dialog('open');"
}, new { id = "AddProjecTaskLink" })
<a href="javascript:void(0);" id="resetbutton">بارگذاری مجدد جدول </a>
</div>
<div class="secondTask">
<div id="AddProjectTaskLoadingGif" style="display: none;">
<img src="@Url.Content("~/Content/Images/ajax-loader/253L.gif")" alt="" />
</div>
</div>
</div>
<div id="test">
<table>
<tr>
<th>
#
</th>
<th>
کد کار
</th>
<th>
عنوان کار
</th>
<th style="min-width: 300px;">
مختصری از توضيحات
</th>
<th>
تاريخ ايجاد کار
</th>
<th>
مهلت انجام
</th>
<th>
وضعيت
</th>
<th>
وابستگی های کار
</th>
<th colspan="2">
ويرايش و حذف
</th>
</tr>
@using (Ajax.BeginForm("SeacrhTasksTable", new { area = "ProjectAdmin" }, new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "test"
}))
{
<tr>
<td>
</td>
<td>
<input type="text" id="IdTask" style = "width:40px" name = "Id" />
</td>
<td>
<input type="text" id="TitleTask" style = "width:80%;" placeholder = "جست و جو" name = "Title" />
</td>
<td style="min-width: 250px;">
<input type="text" id="DescriptionTask" style = "width:80%;" placeholder = "جست و جو" name = "Description" />
</td>
<td>
<input type="text" id="DeliverDateTask" style = "width:80%;" placeholder = "جست و جو" name = "DeliverDate" />
</td>
<td>
<input type="text" id="DeadlineDateTask" style = "width:80%;" placeholder = "جست و جو" name = "DeadlineDate" />
</td>
<td>
<select name="Status">
<option value="0"> همه</option>
<option value="1">شروع نشده</option>
<option value="2">در حال انجام</option>
<option value="3">تمام شده</option>
<option value="4">بی مسئول</option>
</select>
</td>
<td colspan="4">
<input type="submit" value="submit" style="" />
<input type="hidden" value="@(ViewBag.ProjectId)" name="ProjectId" id ="ProjectIdTask"/>
</td>
</tr>
}
<tbody id="TaskList">
@Html.Partial("_ProjectTaskList", Model.MyList)
</tbody>
<tfoot>
<tr>
<td colspan="3">
صفحه
@(Model.PageIndex + 1)
از
@Model.TotalPages
[ تعداد کل : @Model.TotalCount ]
</td>
<td id="pagesizeTaskTd" style="text-align: center;">
سايز صفحه
<select id="pagesizeTask">
<option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
</td>
<td colspan="6" align="left" class="tfoot-padding" id="morepagesTask">
@{
int start = Model.PageIndex;
if (start > 0)
{
int c = 0;
while (start > 0 && c < 4)
{
c++;
start--;
}
}
for (int j = start; j < Model.TotalPages && j < start + 10; j++)
{
if (Model.PageIndex != j)
{
<span>
@Ajax.ActionLink((j + 1).ToString(), "TaskListTablePage", "Project", new
{
Id = ViewBag.ProjectId,
PageIndex = j,
PageSize = Model.PageSize,
area = "ProjectAdmin"
}, new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "test",
InsertionMode = InsertionMode.Replace
}, new { mode = "mode" })
</span>
}
else
{
<span><b style="text-decoration: underline;">@(j + 1)</b></span>
<input type="hidden" id="PIndexAll" value="@(j)" />
}
}
if (Model.PageIndex + 10 < Model.TotalPages)
{
<span>. . . </span>
}
}
</td>
</tr>
</tfoot>
</table>
</div>
<div id="AddProjectTaskDialog" title="تعریف کار جدید" style="text-align: right;">
</div>
<div id="EditProjectTaskDialog" title="ويرايش کار" style="text-align: right;">
</div>
<div id="ReportProjectTaskDialog" title="گزارش کل کار" style="text-align: right;">
</div>
<div id="DescriptionProjectTaskDialog" title="توضيح کار" style="text-align: right;">
</div>
<div id="EditProjectDepenDialog" style="text-align: right;">
</div>
<div id="Taskresult">
</div>
<script type="text/javascript">
$("#AddProjectTaskDialog").dialog({
autoOpen: false,
width: 720,
modal: true,
draggable: true,
position: "top"
});
$("#EditProjectTaskDialog").dialog({
autoOpen: false,
width: 720,
modal: true,
draggable: true,
position: "top"
});
$("#EditProjectDepenDialog").dialog({
autoOpen: false,
width: 720,
modal: true,
draggable: true,
position: "top",
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
$("#AddProjecTaskLink").button();
$("#resetbutton").button();
$("#pagesizeTask").live( 'change' , function (){
var val = $(this).find(":selected").val();
$("#morepagesTask").find('*[mode]').each(function(index){
var n=$(this).attr("href").lastIndexOf("=");
var t= $(this).attr("href").substring(0,n+1);
$(this).attr("href" ,t+val );
});
var url = '@Url.Action("TaskListTablePage", new { area = "ProjectAdmin" })';
url += '?Id=' + @(ViewBag.ProjectId);
url += '&PageIndex=' + $("#PIndexAll").val();
url += '&PageSize=' +val;
$.ajax({
url: url, type: 'get',
success: function (data, status) {
$("#test").html('');
$("#test").html(data);
}
});
});
$(".firstTask").delegate( '#resetbutton','click',function(){
var url = '@Url.Action("TaskListTablePage", new { area = "ProjectAdmin" })';
url += '?Id=' + @(ViewBag.ProjectId);
url += '&PageIndex=0' ;
url += '&PageSize=10';
$.ajax({
url: url, type: 'get',
success: function (data, status) {
$("#test").html('');
$("#test" ).html(data);
}
});
});
</script>
HTML of Form
表格的HTML
<form action="/ProjectAdmin/Project/SeacrhTasksTable" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#test" id="form0" method="post"> <tr>
<td>
</td>
<td>
<input type="text" id="IdTask" style = "width:40px" name = "Id" />
</td>
<td>
<input type="text" id="TitleTask" style = "width:80%;" placeholder = "جست و جو" name = "Title" />
</td>
<td style="min-width: 250px;">
<input type="text" id="DescriptionTask" style = "width:80%;" placeholder = "جست و جو" name = "Description" />
</td>
<td>
<input type="text" id="DeliverDateTask" style = "width:80%;" placeholder = "جست و جو" name = "DeliverDate" />
</td>
<td>
<input type="text" id="DeadlineDateTask" style = "width:80%;" placeholder = "جست و جو" name = "DeadlineDate" />
</td>
<td>
<select name="Status">
<option value="0"> همه</option>
<option value="1">شروع نشده</option>
<option value="2">در حال انجام</option>
<option value="3">تمام شده</option>
<option value="4">بی مسئول</option>
</select>
</td>
<td colspan="4">
<input type="submit" value="submit" style="" />
<input type="hidden" value="38" name="ProjectId" id ="ProjectIdTask"/>
</td>
</tr>
</form>
1 个解决方案
#1
5
Your code doesn't work because you have invalid markup. By invalid markup I mean that you have a <form> nested directly inside a <tr> which is forbidden by the specification. You cannot have a <form> inside a <table>, <tbody> or <tr>.
您的代码无效,因为您的标记无效。无效标记我的意思是你有一个
To illustrate the problem in a simplified manner, here's what you have currently which is invalid:
为了以简化的方式说明问题,以下是您目前无效的内容:
<table>
<tr>
<form>
<td>Foo</td>
<td>Bar</td>
<td><input type="submit" /></td>
</form>
</tr>
</table>
Just inspect the DOM with FireBug and you will see how your <form> is floating alone (opening and closing immediately) without any elements inside.
只需使用FireBug检查DOM,您就会看到
This is invalid markup and it results in undefined behavior which in your case translates by the browser simply not submitting the form. The reason this happens is because the unobtrusive-ajax library that you are using subscribes to the submit event to all ajax forms using a .live:
这是无效的标记,它会导致未定义的行为,在您的情况下,浏览器只是不提交表单。发生这种情况的原因是因为您使用的不显眼的ajax库使用.live为所有ajax表单订阅了submit事件:
$("form[data-ajax=true]").live("submit", function (evt) {
...
});
The thing is that the submit event is never raised in this case. A similar question has been asked yesterday with the same problem.
问题是在这种情况下永远不会提出提交事件。昨天也提出了类似的问题同样的问题。
To fix this problem you could use nested tables:
要解决此问题,您可以使用嵌套表:
<table>
<tr>
<td>
<form>
<table>
<tr>
<td>Foo</td>
<td>Bar</td>
<td><input type="submit" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
So simply put your Ajax.BeginForm inside a <td> and then use a nested table to put the elements.
因此,只需将Ajax.BeginForm放在中,然后使用嵌套表来放置元素。
#1
5
Your code doesn't work because you have invalid markup. By invalid markup I mean that you have a <form> nested directly inside a <tr> which is forbidden by the specification. You cannot have a <form> inside a <table>, <tbody> or <tr>.
您的代码无效,因为您的标记无效。无效标记我的意思是你有一个
To illustrate the problem in a simplified manner, here's what you have currently which is invalid:
为了以简化的方式说明问题,以下是您目前无效的内容:
<table>
<tr>
<form>
<td>Foo</td>
<td>Bar</td>
<td><input type="submit" /></td>
</form>
</tr>
</table>
Just inspect the DOM with FireBug and you will see how your <form> is floating alone (opening and closing immediately) without any elements inside.
只需使用FireBug检查DOM,您就会看到
This is invalid markup and it results in undefined behavior which in your case translates by the browser simply not submitting the form. The reason this happens is because the unobtrusive-ajax library that you are using subscribes to the submit event to all ajax forms using a .live:
这是无效的标记,它会导致未定义的行为,在您的情况下,浏览器只是不提交表单。发生这种情况的原因是因为您使用的不显眼的ajax库使用.live为所有ajax表单订阅了submit事件:
$("form[data-ajax=true]").live("submit", function (evt) {
...
});
The thing is that the submit event is never raised in this case. A similar question has been asked yesterday with the same problem.
问题是在这种情况下永远不会提出提交事件。昨天也提出了类似的问题同样的问题。
To fix this problem you could use nested tables:
要解决此问题,您可以使用嵌套表:
<table>
<tr>
<td>
<form>
<table>
<tr>
<td>Foo</td>
<td>Bar</td>
<td><input type="submit" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
So simply put your Ajax.BeginForm inside a <td> and then use a nested table to put the elements.
因此,只需将Ajax.BeginForm放在中,然后使用嵌套表来放置元素。