I have a problem by saving my data from, in jQuery generated table, to database. somehow is the length of my sting to long as I understand, somebody knows how can I fix it, without editing database properties, like delete empty spaces or something?
What I have tried:
My jQuery:
$(document).ready(function () {
loadWeekData();
});
function loadWeekData() {
$.ajax({
type: "GET",
url: "/Home/JsonWeekEvents",
dataType: "JSON",
success: function (result) {
$.each(result, function (i, val) {
var trow = $('<tr/>').data("id", val.Id);
trow.append('<td style="padding:5px; width:100px; height:70px"></td>');
trow.append('<td valign="top" style="padding:2px; width:150px; height:100px">' +
'<div class="ui-widget">' +
'<input size="10" maxlength="10" id="tagsM" class="tags" />' +
'<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
'<div style="text-align:center" id="monVal" class="desc_NumM">' + val.Monday + '</div >' +
'<input type="hidden" class="idEvent" />' +
'</div >' +
'</td>');
trow.append('<td valign="top" style="padding:2px; width:150px; height:100px">' +
'<div class="ui-widget">' +
'<input size="10" maxlength="10" id="tagsT" class="tags" />' +
'<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
'<div style="text-align:center" id="tueVal" class="desc_NumT">' + val.Tuesday + '</div >' +
'<input type="hidden" class="idEvent" />' +
'</div >' +
'</td>');
trow.append('<td valign="top" style="padding:2px; width:150px; height:100px">' +
'<div class="ui-widget">' +
'<input size="10" maxlength="10" id="tagsW" class="tags" />' +
'<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
'<div style="text-align:center" id="wedVal" class="desc_NumW">' + val.Wednesday + '</div >' +
'<input type="hidden" class="idEvent" />' +
'</div >' +
'</td>');
trow.append('<td valign="top" style="padding:2px; width:150px; height:100px">' +
'<div class="ui-widget">' +
'<input size="10" maxlength="10" id="tagsTr" class="tags" />' +
'<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
'<div style="text-align:center" id="thurVal" class="desc_NumTr">' + val.Thursday + '</div >' +
'<input type="hidden" class="idEvent" />' +
'</div >' +
'</td>');
trow.append('<td valign="top" style="padding:2px; width:150px; height:100px">' +
'<div class="ui-widget">' +
'<input size="10" maxlength="10" id="tagsFr" class="tags" />' +
'<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
'<div style="text-align:center" id="friVal" class="desc_NumF">' + val.Friday + '</div >' +
'<input type="hidden" class="idEvent" />' +
'</div >' +
'</td>');
trow.append('<td valign="top" style="padding:2px; width:150px; height:100px">' +
'<div class="ui-widget">' +
'<input size="10" maxlength="10" id="tagsSt" class="tags" />' +
'<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
'<div style="text-align:center" id="satVal" class="desc_NumSa">' + val.Saturday + '</div >' +
'<input type="hidden" class="idEvent" />' +
'</div >' +
'</td>');
trow.append('<td valign="top" style="padding:2px; width:150px; height:100px">' +
'<div class="ui-widget">' +
'<input size="10" maxlength="10" id="tagsSu" class="tags" />' +
'<input type="button" id="addBtn" class="addEvent" size="5" value="+" /><br/>' +
'<div style="text-align:center" id="sunVal" class="desc_NumSu">' + val.Sunday + '</div >' +
'<input type="hidden" class="idEvent" />' +
'</div >' +
'</td>');
trow.append('<td style="padding:2px; width:100px; height:70px"><a href="#" rel="events-week-edit" class="edit">Edit Week</a></td>');
tab.append(trow);
});
$("tr:odd", tab).css('background-color', '#C4C4C4');
$("#weekEvents").html(tab);
},
error: function () {
alert("Failed! Please try again.");
}
});
var tab = $('<table class=MyTable border=1 ></table>');
var thead = $('<thead></thead>');
thead.append('<th style="padding:5px">FSE' + " " + '</th>');
thead.append('<th style="padding:5px">Monday' + " " + '</th>');
thead.append('<th style="padding:5px">Tuesday' + " " + '</th>');
thead.append('<th style="padding:5px">Wednesday' + " " + '</th>');
thead.append('<th style="padding:5px">Thursday' + " " + '</th>');
thead.append('<th style="padding:5px">Friday' + " " + '</th>');
thead.append('<th style="padding:5px">Saturday' + " " + '</th>');
thead.append('<th style="padding:5px">Sunday' + " " + '</th>');
tab.append(thead);
tab.on("focus", ".tags", function (e) {
$(this).autocomplete({
source: function (request, response) {
$.ajax({
url: "/Home/GetSearchValue",
dataType: "json",
data: {
search: request.term
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Title + ', ' + item.Description, value: item.Title,
Id: item.Id,
Title: item.Title,
Description: item.Description,
Location: item.Location
}
}));
},
error: function (xhr, status, error) {
alert("Error!" + xhr);
}
});
},
select: function (event, ui) {
var field_id = $(this).closest("div").find(".idEvent");
field_id.val(ui.item.Id);
}
});
});
tab.on("click", ".addEvent", function (e) {
var id = $(this).closest("div").find(".idEvent").val();
var field = $(this).closest("div").find(".desc_NumM");
var select = $(this).closest("div").find(".tags");
$.ajax({
type: "GET",
url: "/Home/AutoEventDetails",
data: { id: id },
dataType: "JSON",
success: function (data) {
var res = $('<p>' + data.Title + '<br/>' + data.Description + '<br/>' + data.Location + '</p>');
field.html(res);
select.val('');
}
});
});
tab.on("click", ".addEvent", function (e) {
var id = $(this).closest("div").find(".idEvent").val();
var field = $(this).closest("div").find(".desc_NumT");
var select = $(this).closest("div").find(".tags");
$.ajax({
type: "GET",
url: "/Home/AutoEventDetails",
data: { id: id },
dataType: "JSON",
success: function (data) {
var res = $('<p>' + data.Title + '<br/>' + data.Description + '<br/>' + data.Location + '</p>');
field.html(res);
select.val('');
}
});
});
tab.on("click", ".addEvent", function (e) {
var id = $(this).closest("div").find(".idEvent").val();
var field = $(this).closest("div").find(".desc_NumW");
var select = $(this).closest("div").find(".tags");
$.ajax({
type: "GET",
url: "/Home/AutoEventDetails",
data: { id: id },
dataType: "JSON",
success: function (data) {
var res = $('<p>' + data.Title + '<br/>' + data.Description + '<br/>' + data.Location + '</p>');
field.html(res);
select.val('');
}
});
});
tab.on("click", ".addEvent", function (e) {
var id = $(this).closest("div").find(".idEvent").val();
var field = $(this).closest("div").find(".desc_NumTr");
var select = $(this).closest("div").find(".tags");
$.ajax({
type: "GET",
url: "/Home/AutoEventDetails",
data: { id: id },
dataType: "JSON",
success: function (data) {
var res = $('<p>' + data.Title + '<br/>' + data.Description + '<br/>' + data.Location + '</p>');
field.html(res);
select.val('');
}
});
});
tab.on("click", ".addEvent", function (e) {
var id = $(this).closest("div").find(".idEvent").val();
var field = $(this).closest("div").find(".desc_NumF");
var select = $(this).closest("div").find(".tags");
$.ajax({
type: "GET",
url: "/Home/AutoEventDetails",
data: { id: id },
dataType: "JSON",
success: function (data) {
var res = $('<p>' + data.Title + '<br/>' + data.Description + '<br/>' + data.Location + '</p>');
field.html(res);
select.val('');
}
});
});
tab.on("click", ".addEvent", function (e) {
var id = $(this).closest("div").find(".idEvent").val();
var field = $(this).closest("div").find(".desc_NumSa");
var select = $(this).closest("div").find(".tags");
$.ajax({
type: "GET",
url: "/Home/AutoEventDetails",
data: { id: id },
dataType: "JSON",
success: function (data) {
var res = $('<p>' + data.Title + '<br/>' + data.Description + '<br/>' + data.Location + '</p>');
field.html(res);
select.val('');
}
});
});
tab.on("click", ".addEvent", function (e) {
var id = $(this).closest("div").find(".idEvent").val();
var field = $(this).closest("div").find(".desc_NumSu");
var select = $(this).closest("div").find(".tags");
$.ajax({
type: "GET",
url: "/Home/AutoEventDetails",
data: { id: id },
dataType: "JSON",
success: function (data) {
var res = $('<p>' + data.Title + '<br/>' + data.Description + '<br/>' + data.Location + '</p>');
field.html(res);
select.val('');
}
});
});
tab.on("click", ".edit", function (e) {
var tr = $(this).closest("tr");
var id = tr.data("id");
var field = $(this).closest("tr").find(".ui-widget");
var mon = field.find(".desc_NumM");
var tue = field.find(".desc_NumT");
var wed = field.find(".desc_NumW");
var thur = field.find(".desc_NumTr");
var fri = field.find(".desc_NumF");
var sat = field.find(".desc_NumSa");
var sun = field.find(".desc_NumSu");
var monVal = mon.text();
var tueVal = tue.text();
var wedVal = wed.text();
var thurVal = thur.text();
var friVal = fri.text();
var satrVal = sat.text();
var sunVal = sun.text();
$.ajax({
type: "POST",
url: "/Home/UpdateWeek",
data: {
id: id,
Monday: monVal,
Tuesday: tueVal,
Wednesday: wedVal,
Thursday: thurVal,
Friday: friVal,
Saturday: satrVal,
Sunday: sunVal
},
dataType: "JSON",
success: function (data) {
alert("Week " + id + " changed!");
$('#weekEvents').load(loadWeekData());
},
error: function () {
alert("Failed, try again");
}
});
});
}
My controller:
[HttpPost]
public JsonResult UpdateWeek(int id, EventsWeek w)
{
using (WeekEventsDBEntities db = new WeekEventsDBEntities())
{
EventsWeek ewupt = db.EventsWeeks.Where(x => x.Id == id).FirstOrDefault();
ewupt.Monday = w.Monday;
ewupt.Tuesday = w.Tuesday;
ewupt.Wednesday = w.Wednesday;
ewupt.Thursday = w.Thursday;
ewupt.Friday = w.Friday;
ewupt.Saturday = w.Saturday;
ewupt.Sunday = w.Sunday;
db.SaveChanges();
}
return Json(true, JsonRequestBehavior.AllowGet);
}
My model (I'm using Entity Framework):
namespace WebApplication2.Models
{
public partial class EventsWeek
{
public int Id { get; set; }
public string Monday { get; set; }
public string Tuesday { get; set; }
public string Wednesday { get; set; }
public string Thursday { get; set; }
public string Friday { get; set; }
public string Saturday { get; set; }
public string Sunday { get; set; }
}
}
All properties have nvchar(100)
After clicking on "Edit Week" link it goes thru and it looks good but then I get an error in the controller and operation fails.
If somebody can help, would be great!