Responseenter image description hereI have a kendo grid displaying ID,NID,SID(Student table) and some other fields.Now when i want to add new Student the NID field must me a dropdownlist populating the values from the database. How can we do this. What should be in the data-source . I wrote a query to get the NID. but how would i use it. Or is this wrong
Thanks
<div>
<table>
<tr>
<td>
<div>
<label for="ID">ID</label>
</div>
<div data-container-for="data.ID">
<input id="id" data-bind="value: data.ID" style="width: 250px;" name="ID" type="text" />
</div>
</td>
</tr>
<tr>
<td>
<div>
<label for="NID" id="lcid">NID</label>
</div>
<div>
<input id="cid" />
</div>
</td>
<td>
</td>
</tr>
</table>
</div>
Service:
$(document).ready(function () {
$("#cid").kendoDropDownList({
dataTextField: "NID",
dataValueField: "NID",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "/Services/getNID",
}
}
}
});
});
Related
I hope some of you have an idea about this. I'm still new to Spring but till this point I could figured out every problem myself. I'm using also Thymeleaf for the templates.
In the Controller the function for #GetMapping works as intended, but the #PostMapping function doesnt return the template which I specified in the return parameter and so the browser shows the wrong page.
The #PostMapping function gets triggered by the ajax statement in the html script.
I get no errors or warnings on server side as well as on client side. So I have no idea were the spot the mistake.
Hope some of you can spot the mistake. Thanks in advance anyway.
Controller:
#Controller
public class SpringController {
#RequestMapping(value="/tank", method = RequestMethod.GET)
public String loadData(Model model){
Tankstelle[] data = TankerAPI.getTankData(lat, lng, 5, sort, type);
model.addAllAttributes(convertdata("name", data));
model.addAllAttributes(convertdata("dist", data));
model.addAllAttributes(convertdata("price", data));
return "home";
}
#RequestMapping(value = "/tank", method = RequestMethod.POST)
public String getChangedData(#RequestBody JSONObject incomingjson) {
lat = Float.parseFloat(incomingjson.get("lat").toString());
lng = Float.parseFloat(incomingjson.get("lng").toString());
BigDecimal biglat = new BigDecimal(lat).setScale(3, RoundingMode.HALF_UP);
BigDecimal biglng = new BigDecimal(lng).setScale(3, RoundingMode.HALF_UP);
lat = biglat.floatValue();
lng = biglng.floatValue();
sort = "price"; //for seeing a difference
System.out.println(incomingjson.get("lat")+" "+incomingjson.get("lng"));
return "test"; //here it should return the template "test" but it return "home"
}
home.html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
<meta charset="UTF-8"/>
<title>guenstigertanken.de</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>...
</style>
</head>
<body onload="getLocation()">
<div class="ueberschriftbox"></div>
<h2 class="header">guenstigertanken.de</h2>
<h2 class="subheader">Wir finden die günstigsten Spritpreise für Sie</h2>
<div class="backrounding">
<div class="steuerelementebox"></div>
<div class="steuerelementespritsorteueberschrift">
<h2>Spritsorte</h2>
<label class="container1">Super E5
<input type="radio" id="E5" name="radio1" onclick="autoSubmit()">
<span class="checkmark1"></span>
</label>
<label class="container1">Super E10
<input type="radio" id="E10" name="radio1" onclick="autoSubmit()">
<span class="checkmark1"></span>
</label>
<label class="container1">Diesel
<input type="radio" id="Diesel" name="radio1" onclick="autoSubmit()">
<span class="checkmark1"></span>
</label>
</div>
<div class="steuerelementesortierennachueberschrift">
<h2>Sortieren nach</h2>
<label class="container2">Preis aufsteigend
<input type="radio" checked="checked" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
<label class="container2">Preis absteigend
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
<label class="container2">Distanz aufsteigend
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label> <label class="container2">Distanz absteigend
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
<label class="container2" id="alph">Name alphabetisch
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
</div>
<div class="buttonsbox"></div>
<div class="tabellenbox"></div>
<div class="ueberuns">
<p>Über uns</p>
</div>
<div class="agb">
<p>AGB</p>
</div>
<div class="datenschutz">
<p>Datenschutz</p>
</div>
<div class="impressum">
<p>Impressum</p>
</div>
<div class="left show">
<table id="datatable">
<thead>
<tr> <th>Name</th> <th>Entfernung</th> <th>Preis</th> <th>Favorit</th> </tr>
</thead>
<tbody>
<tr> <td th:text="${name1}">AGIP</td> <td th:text="${dist1}">7km</td> <td th:text="${price1}">1,20€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name2}">Aral</td> <td th:text="${dist2}">12km</td> <td th:text="${price2}">1,23€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name3}">Esso</td> <td th:text="${dist3}">2km</td> <td th:text="${price3}">1,25€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name4}">Esso</td> <td th:text="${dist4}">10km</td> <td th:text="${price4}">1,25€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name5}">Esso</td> <td th:text="${dist5}">5km</td> <td th:text="${price5}">1,25€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name6}">BP</td> <td th:text="${dist6}">13km</td> <td th:text="${price6}">1,35€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name7}">BP</td> <td th:text="${dist7}">13km</td> <td th:text="${price7}">1,35€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name8}">BP</td> <td th:text="${dist8}">13km</td> <td th:text="${price8}">1,35€</td> <td><input type="checkbox"></td> </tr>
</tbody>
</table>
</div>
</div>
<a class="cssbuttonfavoriten" href="test.html">Favoriten></a>
<a class="cssbuttonleaderboard" href="test.html">Leaderboard></a>
<a class="cssbuttonstatistiken" href="test.html">Statistiken></a>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
}
}
function showPosition(position) {
var posdata = '{"lat":"'+position.coords.latitude+'","lng":"'+position.coords.longitude+'","typeselect":"'+type+'"}';
$.ajax({
type: 'post',
url: '/tank',
data: JSON.stringify(posdata),
contentType: "application/json; charset=utf-8",
traditional: true,
success: function(posdata) {
//alert("ajax success: refresh page to sort after price[prob current setting]")
},
error: function(){
alert("ajax error")
}
});
}
</script>
</body>
</html>
When you make any request through ajax you just receive corresponding response in your callback function:
success: function(posdata) {
//alert("ajax success: refresh page to sort after price[prob current setting]")
},
So browser will not show you a new template page. Your page is in "postdata" response
I am using angular 8 with angular material 7. I am using reactive form for creating and submiting forms. After form submit, I am programatically reseting the form and aslo marking as untouchewd. But after every submit, I am seeing all validation trigerring and reds al over
export class RegisterUserComponent implements OnInit{
createUserForm: FormGroup;
allRolesList: Array<UserRole>;
assignedRoles: Array<UserRole>[];
assignedRolesChanged = new Subject<Array<UserRole>>();
newUser: GetUserResponse;
constructor(private roleService: RoleService, private userService: UsersService) {
this.roleService.allRolesListChanged.subscribe((res: Array<UserRole>)=>{
this.allRolesList = res;
});
this.userService.newUserCreated.subscribe((res: GetUserResponse)=>{
this.newUser = res;
this.createUserForm.reset(true);
this.createUserForm.markAsUntouched({onlySelf: true});
});
}
async ngOnInit() {
this.roleService.getAllRoles();
this.initForm();
}
initForm(){
this.createUserForm = new FormGroup({
loginId: new FormControl(null, [Validators.required, Validators.email]),
firstName: new FormControl(null, Validators.required),
lastName: new FormControl(null, Validators.required),
userRoles: new FormControl(null)
});
}
onSubmit(){
let data = this.createUserForm.value;
console.log(data);
let req: UserRequest = {
loginId: data.loginId ? data.loginId.trim() : undefined,
firstName:data.firstName ? data.firstName.trim() : undefined,
lastName:data.lastName ? data.lastName.trim() : undefined,
assignedRoles: {userRoles:data.userRoles}
};
console.log(req);
this.userService.registerNewUser(req);
}
}
HTML template for for is very simple like this:
<div class="large-box mat-elevation-z4">
<form id="simple-form-input" class="search-container" [formGroup]="createUserForm" (ngSubmit)="onSubmit()">
<table>
<tbody>
<tr>
<td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td>
<mat-form-field>
<mat-label>Login ID</mat-label>
<input matInput formControlName="loginId" type="text" name="loginId" placeholder="Login ID">
</mat-form-field>
</td>
</tr>
<tr>
<td>
<mat-form-field>
<mat-label>First Name</mat-label>
<input matInput formControlName="firstName" type="text" name="firstName"
placeholder="First Name">
</mat-form-field>
</td>
</tr>
<tr>
<td>
<mat-form-field>
<mat-label>Last Name</mat-label>
<input matInput formControlName="lastName" type="text" name="lastName"
placeholder="Last Name">
</mat-form-field>
</td>
</tr>
<tr>
<td>
<mat-form-field>
<mat-label>Access Privileges</mat-label>
<mat-select formControlName="userRoles" name="userRoles" multiple>
<mat-option *ngFor="let userRole of allRolesList" [value]="userRole">
{{userRole.name}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</tr>
<tr>
<td>
<button [disabled]="!createUserForm.valid" type="submit" color="primary" mat-raised-button>Submit</button>
</td>
</tr>
</tbody>
</table>
</form>
</div>
It's not enough to set the controls to untouched, you need to clear out the errors in the controls which occur when you reset due to Validators.required:
this.createUserForm.reset();
Object.keys(this.createUserForm.controls).forEach(
key => this.createUserForm.controls[key].setErrors(null)
);
this.createUserForm.markAsUntouched({onlySelf: true});
I have an AJAX call that adds data to my ColdFusion database.
<!---Script to add dashboard link --->
<cfoutput>
<script>
$(function(){
//Add a new note to a link
$("##add_dashboard_links").submit(function(){
// prevent native form submission here
$.ajax({
type: "POST",
data: $('##add_dashboard_links').serialize(),
url: "actionpages/add_dashboard_link.cfm",
beforeSend: function(){
$('.loader').show();
},
complete: function(){
$('.loader').hide(3000);
},
success: function() {
$("##noteDiv").load( 'templates/dashboard_notes.cfm?techID=#techID#' );
$("##addNoteResponse").html('');
$("##link_description").val('');
$("##link_url").val('');
$("##notes").val('');
$("##addNoteResponse").append( "Link successfully added." );
}
});
return false;
});
});
</script>
</cfoutput>
I also have a CFDIV that binds to some other content
<!---Dashboard Links --->
<div id="noteDiv" bind="url:templates/dashboard_notes.cfm">
</div>
Here is my modal code located on my template page that contains the form that this AJAX script references (This plugin is found here https://github.com/kylefox/jquery-modal):
<!--- Link to open the modal to add a new dasboard link --->
<div id="DashboardLinks" style="display:none;">
<h3>Add a new dashboard link:</h3>
<form id="add_dashboard_links">
<table width="100%" id="dashboard_table" border="0" cellpadding="5">
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td>Link Description:</td>
<td colspan="2"><input type="text" name="link_description" id="link_description" required="yes" message="Please enter the Link Description"/></td>
</tr>
<tr>
<td>Link URL:</td>
<td colspan="2"><input type="text" name="link_url" id="link_url" required="yes" validate="url" message="Please enter the Link URL with http:// -or- https://"/></td>
</tr>
<tr>
<td>Link Notes:</td>
<td colspan="2"><textarea id="notes" name="notes" cols="" rows=""> </textarea></td>
</tr>
<tr>
<td colspan="3"><input type="submit" name="button" id="button" value="Add Link" />
<input type="hidden" name="link_hidden" value="1"><br />
<div class="loader"><img class="loading-image" src="images/loading.gif" /></div>
<div class="response" id="addNoteResponse"></div>
</td>
</tr>
</table>
</form>
</div>
Is there a way to refresh this CFDIV tag once I recieve the AJAX SUCCESS?
Thanks.
Don't use cfdiv (or any other ColdFusion UI functionality). Since you are already using jQuery, stick with that. Use a plain old HTML <div> and keep the same id.
<div id="noteDiv" bind="url:templates/dashboard_notes.cfm"></div>
Then, in your AJAX call, add this to the success block
$("#noteDiv").load( 'templates/dashboard_notes.cfm' );
You will also need to add that line elsewhere to get the content loaded initially.
I am working in ASP.NET MVC3 and creating a form:
#Html.BeginForm(null, null, FormMethod.Post, new { name = "frmAcnt", id = "frmAcnt" })
Because I dont want to give action and controller name. It works fine but in Firefox or any other browser it shows form between these two lines. What can I do for remove it from display?
System.Web.Mvc.Html.MvcForm {
}
and in the page source this line is showing
<form action="/Home/AccCode" id="frmAcnt" method="post" name="frmAcnt">System.Web.Mvc.Html.MvcForm
below is my view
#model CBS.Models.AccntBD
#{
ViewBag.Title = "AccCode";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>AccCode</h2>
<div>
#Html.BeginForm(null, null, FormMethod.Post, new { name = "frmAcnt", id = "frmAcnt" })
{
<table class="tablestyle">
<tr>
<td>
<input type="text" id="AcCode" name="AcCode" maxlength="10" placeholder="Account Code" autofocus="true" class="required" />
</td>
</tr>
<tr>
<td>
<label>Description</label>
</td>
<td>
<input type="text" id ="Descrip" name="Descrip" maxlength="150" placeholder="Desription..." class="Descrip"/>
</td>
</tr>
<tr>
<td>
<span>
<input type="button" name="clear" value="Cancel" onclick="clearForm(this.form);" >
</span>
<span>
<input type="submit" id="sve" name="action" value="Save" />
</span>
<span>
<input type="button" id="edi" value="Edit" name="action"/>
</span>
<span>
<input type="button" value="Delete" id="del" name="action"/>
</span>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
}
</div>
Try this once and ideally you can use #using (Html.BeginForm()){ } to define form
View
#using (Html.BeginForm(null, null, FormMethod.Post, new { name = "frmAcnt", id = "frmAcnt" }))
{
#* Your Form Content Here *#
}
HTML Output is
<form name="frmAcnt" method="post" id="frmAcnt" action="/"></form>
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.
#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" })
بارگذاری مجدد جدول
</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
<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>
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.
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:
$("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.