Click here to Skip to main content
15,891,938 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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() {

    // Append database data here

    $.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>' + val.Id + " " + '</td>');
                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) {
        //var prefix = $('.tags').val();

        $(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 divM = $(this).closest("div").find("#monVal");
        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();
        //var res = field.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!
Posted
Comments
F-ES Sitecore 26-May-20 12:16pm    
If you just want the data truncated then use string.Substring

w.Monday.Substring(0, 100)

That will take the first 100 chars of w.Monday, but to be honest it sounds like your problems are elsewhere and this is just a bandaid over a gaping wound :) If you can live with just 100 characters then what are the other characters, where are the coming from and if they are irrelevant why are they there?
Member 14803832 26-May-20 12:34pm    
cool! it works! but not really solve my problem. the thing is I making an autocomplete from one table and insert data to an other table in my database. i guess my first table is too big, i have there 3 properties with 300 symbols together ans i'm trying to push 300 symbols in 100 :)
Richard Deeming 27-May-20 12:48pm    
So you're trying to store multiple values in a single column of a single row? That's a bad database design.

I'd split this into two tables - EventsWeeek, which would contain an ID and maybe a start date; and EventsWeekEvent which would contain its own ID, the EventsWeek ID, the DayOfWeek[^], and the event details. Multiple events on the same day would get multiple rows in the EventsWeekEvent table.
Member 14803832 27-May-20 13:42pm    
this is what I|ve already done, otherwise it would be impossible to make autocomplete
Richard Deeming 27-May-20 13:44pm    
I was assuming the autocomplete data was coming from a third table.

If you've already split out the week into multiple rows, why are you trying to insert the data for multiple events into a single row?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900