Adding DATEPICKER into column editing, using Ajax. Sending data to the server using Ajax (mvc3)
Adding DATEPICKER into column editing, using Ajax. Sending data to the server using Ajax (mvc3)
Hello
I am working with Ajax, and I have two questions.
A.
How do I submit to the server delete function another value, for example the value of column first name (string) in the selected row,
or, the name of the page if I want to send a few pages to the same delete function.
B.
I want to allow editing, but I want that in fields that keep dates, can enter only the selected value from the calendar. The problem is that I do not know the name of the element to bind him the datepicker.
Thank you in advance.
Here's my code:
$(document).ready(function () {
$('#ResidentsTable').dataTable(
{ "bProcessing": false,
"sDom": 'T<"clear">lfrtip',
"oTableTools": { "aButtons": [{ "sExtends": "print", "sButtonText": "תצוגה להדפסה", "bShowAll": false}] },
"bJQueryUI": true,
"bServerSide": true,
"sAjaxSource": 'ResidentsProvider',
"sPagination": "full_numbers",
"bScrollCollapse": true,
"aoColumns": [
{ "sName": "ResidentID" },
{ "sName": "FirstName" },
{ "sName": "LastName" },
{ "sName": "BirthDayM" },
{ "sName": "BirthDayF" },
{ "sName": "Address" },
{ "sName": "Phone" },
{ "sName": "CellPhoneM" },
{ "sName": "CellPhoneF" },
{ "sName": "NumOfPersons" },
{ "sName": "Local" },
{ "sName": "Residential" },
{ "sName": "RentStart" },
{ "sName": "RentEnd" },
{ "sName": "Permission" },
{ "sName": "PermissionStart" },
{ "sName": "PermissionEnd" },
{ "sName": "EconomyMode" },
{ "sName": "Payments" } ]
}).makeEditable({
aoColumns: [
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{
data: "{" + "'כן':'כן','לא':'לא'" + "}",
type: "select",
submit: "בחר"
},
{
data: "{" + "'שכירות':'שכירות','בעלות':'בעלות'" + "}",
type: "select",
submit: "בחר"
},
{},
{},
{
data: "{" + "'מאושר':'מאושר','לא מאושר':'לא מאושר','בבדיקה':'בבדיקה'" + "}",
type: "select",
submit: "בחר"
},
{},
{},
{
data: "{" + "'נתמך':'נתמך','לא נתמך':'לא נתמך','הוגשה בקשה':'הוגשה בקשה','תומך':'תומך'" + "}",
type: "select",
submit: "בחר"
},
{
data: "{" + "'משלם':'משלם','לא משלם':'לא משלם','הוגשה בקשה להנחה':'הוגשה בקשה להנחה','משלם בהנחה':'משלם בהנחה'" + "}",
type: "select",
submit: "בחר"
}
]
});
});
$(function () {
$.datepicker.setDefaults($.datepicker.regional['IL']);
$("#birthDayM,#birthDayF,#residentialStart,#residentialEnd,#permissionStart,#permissionEnd").datepicker({ changeYear: true, changeMonth: true, minDate: new Date(1900, 1 - 1, 1), disabled: true });
$("#birthDayM,#birthDayF,#residentialStart,#residentialEnd,#permissionStart,#permissionEnd").datepicker();
});
הוסף
מחק
מספר חבר
שם
משפחה
תאריך לידה אב
תאריך לידה אם
כתובת
טלפון
פלאפון אב
פלאפון אם
מספר נפשות
בן הכפר
מגורים
התחלה
סיום
אישורים
התחלה
סיום
תמיכות
תשלומים
SERVER FUNCTION
public string DeleteData(int id)
{
try
{
var db = new VaadKCDB.DB();
var list = db.Residents;
var resident = db.Residents.SingleOrDefault(x => x.ResidentID == id);
if (resident == null)
return "רשומה לא נמצאה";
db.Residents.DeleteOnSubmit(resident);
db.SubmitChanges();
return "ok";
}
catch (Exception ex)
{
return "לא ניתן למחוק עמודה שיש בקשה על שמה";
}
}
I am working with Ajax, and I have two questions.
A.
How do I submit to the server delete function another value, for example the value of column first name (string) in the selected row,
or, the name of the page if I want to send a few pages to the same delete function.
B.
I want to allow editing, but I want that in fields that keep dates, can enter only the selected value from the calendar. The problem is that I do not know the name of the element to bind him the datepicker.
Thank you in advance.
Here's my code:
$(document).ready(function () {
$('#ResidentsTable').dataTable(
{ "bProcessing": false,
"sDom": 'T<"clear">lfrtip',
"oTableTools": { "aButtons": [{ "sExtends": "print", "sButtonText": "תצוגה להדפסה", "bShowAll": false}] },
"bJQueryUI": true,
"bServerSide": true,
"sAjaxSource": 'ResidentsProvider',
"sPagination": "full_numbers",
"bScrollCollapse": true,
"aoColumns": [
{ "sName": "ResidentID" },
{ "sName": "FirstName" },
{ "sName": "LastName" },
{ "sName": "BirthDayM" },
{ "sName": "BirthDayF" },
{ "sName": "Address" },
{ "sName": "Phone" },
{ "sName": "CellPhoneM" },
{ "sName": "CellPhoneF" },
{ "sName": "NumOfPersons" },
{ "sName": "Local" },
{ "sName": "Residential" },
{ "sName": "RentStart" },
{ "sName": "RentEnd" },
{ "sName": "Permission" },
{ "sName": "PermissionStart" },
{ "sName": "PermissionEnd" },
{ "sName": "EconomyMode" },
{ "sName": "Payments" } ]
}).makeEditable({
aoColumns: [
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{
data: "{" + "'כן':'כן','לא':'לא'" + "}",
type: "select",
submit: "בחר"
},
{
data: "{" + "'שכירות':'שכירות','בעלות':'בעלות'" + "}",
type: "select",
submit: "בחר"
},
{},
{},
{
data: "{" + "'מאושר':'מאושר','לא מאושר':'לא מאושר','בבדיקה':'בבדיקה'" + "}",
type: "select",
submit: "בחר"
},
{},
{},
{
data: "{" + "'נתמך':'נתמך','לא נתמך':'לא נתמך','הוגשה בקשה':'הוגשה בקשה','תומך':'תומך'" + "}",
type: "select",
submit: "בחר"
},
{
data: "{" + "'משלם':'משלם','לא משלם':'לא משלם','הוגשה בקשה להנחה':'הוגשה בקשה להנחה','משלם בהנחה':'משלם בהנחה'" + "}",
type: "select",
submit: "בחר"
}
]
});
});
$(function () {
$.datepicker.setDefaults($.datepicker.regional['IL']);
$("#birthDayM,#birthDayF,#residentialStart,#residentialEnd,#permissionStart,#permissionEnd").datepicker({ changeYear: true, changeMonth: true, minDate: new Date(1900, 1 - 1, 1), disabled: true });
$("#birthDayM,#birthDayF,#residentialStart,#residentialEnd,#permissionStart,#permissionEnd").datepicker();
});
הוסף
מחק
מספר חבר
שם
משפחה
תאריך לידה אב
תאריך לידה אם
כתובת
טלפון
פלאפון אב
פלאפון אם
מספר נפשות
בן הכפר
מגורים
התחלה
סיום
אישורים
התחלה
סיום
תמיכות
תשלומים
SERVER FUNCTION
public string DeleteData(int id)
{
try
{
var db = new VaadKCDB.DB();
var list = db.Residents;
var resident = db.Residents.SingleOrDefault(x => x.ResidentID == id);
if (resident == null)
return "רשומה לא נמצאה";
db.Residents.DeleteOnSubmit(resident);
db.SubmitChanges();
return "ok";
}
catch (Exception ex)
{
return "לא ניתן למחוק עמודה שיש בקשה על שמה";
}
}
This discussion has been closed.
Replies
חבר, אתה חופר!
[code]
$('#pricing').dataTable({
"aoColumnDefs": [ { "sClass": 'ui-datepicker-inline', "aTargets": [ 3,5 ] } ],
rest of your take setup here
});
[/code]
Next setup handling
[code]
// select everything when editing field in focus
$('#pricing tbody td input').live('focus', function (e){
$(this).select();
});
// attach datepicker on focus and format to return yy-mm-dd
$('#pricing tbody td.ui-datepicker-inline input').live('focus', function (e){
$(this).datepicker({ dateFormat: 'yy-mm-dd' }).datepicker("show");
});
// override normal blur function ( needed for date month switching )
$('#pricing tbody td input').live('blur', function (e){
return false;
});
// set change function to handle sumbit
$('#pricing tbody td.ui-datepicker-inline input').live('change', function (e){
$(this).parents("form").submit();
});
[/code]