This is a migrated thread and some comments may be shown as answers.

Textbox value set by jquery is empty on save

12 Answers 915 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mattias
Top achievements
Rank 1
Mattias asked on 28 Feb 2013, 01:02 PM
Hi,
I set a textbox value from another textbox by jquery like this:
$('input[id="Name"]').live('change keyup', function () {
   var urlSegment = $('input[id="UrlSegment"]');
   urlSegment.val("Test");
});
I can see the value "Test" in the second textbox but when clicking on save, the posted value is empty.
I think the problem lies along with ajax cause when changing to server binding the value is posted.

The form is generated in a popup by the grid.

How do I solve this?

Regards,
Mattias

12 Answers, 1 is accepted

Sort by
0
todd
Top achievements
Rank 1
answered on 03 Mar 2013, 06:03 PM
I'm having the same problem have you resolved this issue yet?
0
Mattias
Top achievements
Rank 1
answered on 04 Mar 2013, 07:00 AM
Hi Todd,
It seems to work by adding .change() to the textbox.
$('input[id="Name"]').live('change keyup', function () {
   var urlSegment = $('input[id="UrlSegment"]');
   urlSegment.val("Test");
   urlSegment.change();
});

/Mattias
0
todd
Top achievements
Rank 1
answered on 04 Mar 2013, 10:54 PM
Awesome that worked thanks!
0
John
Top achievements
Rank 1
Veteran
answered on 14 Dec 2019, 09:13 PM
Thank you so much!  I found this after hours of beating my head against the keyboard and it worked perfectly.
0
Tsvetomir
Telerik team
answered on 17 Dec 2019, 12:35 PM

Hello,

When the jQuery val() method is used, the value of the input is visually changed. However, in order to have the same value applied in the model, you would have to manually trigger the change method so it would be indicated that the respective model's property has to be updated with the value of the input. Therefore, the provided suggestion above should be utilized:

$('input[id="Name"]').live('change keyup', function () {
   var urlSegment = $('input[id="UrlSegment"]');
   urlSegment.val("Test");
   urlSegment.change();
});

 

Regards,
Tsvetomir
Progress Telerik

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Luke
Top achievements
Rank 1
answered on 09 Mar 2021, 08:00 PM

Good afternoon, 

I am having this same issue, but using '.change()' isn't resolving the issue for me. I'm not sure what else to do.

I am auto filling a name and email textbox based on available users in the domain.

var Name = $('input[id="Name"]');
var Email = $('input[id="Email"]');
 
Name.bind("on keyup", function (e) {
                var UN = $(this).val();
                $.ajax({
                    cache: false,
                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    url: url,
                    data: {"UserName": UN },
                    success: function (results) {
                        if (results) { alert("SUCCESS: " + results); }
                        var res = results.split(",");
                        var email = res[0];
                        var name = res[1];
                        if (name) {
                            Name.val(name);
                            Name.change();
                            Email.val(email);
                            Email.change();
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert("AJAX error");
                    }
                });

 

For some reason the name field gets posted successfully but email is always null even though I get the text I need in the textbox.

here is my grid

@(Html.Kendo().Grid<vmPurchasingList>()
    .Name("PurchasingList")
    .Columns(columns =>
    {
        columns.Bound(c => c.Name);
        columns.Bound(c => c.Email);
        columns.Bound(c => c.StepsString);
        columns.ForeignKey(c => c.CostCenterId, (System.Collections.IEnumerable)ViewData["UsersCostCenters"], "Id","Name")
               .Title("Cost Center");
        columns.ForeignKey(c => c.StepsId, (System.Collections.IEnumerable)ViewData["Steps"], "Id", "Type")
               .Hidden(true);
        columns.ForeignKey(c => c.StepsHwyId, (System.Collections.IEnumerable)ViewData["StepsHwy"], "Id", "Type")
               .Hidden(true);
        columns.Command(command => { command.Edit(); }).Width(160);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => {
            events.Error("error_handler");
            events.Sync("reload");
        })
        .Model(model =>
        {
            model.Id(c => c.Id);
            model.Field(c => c.Id).Editable(false);
            model.Field(c => c.Name);
            model.Field(c => c.Email);
            model.Field(c => c.CostCenterId).DefaultValue(1);
            model.Field(c => c.StepsId).DefaultValue(0);
            model.Field(c => c.StepsHwyId).DefaultValue(0);
        })
        .Create(create => create.Action("Create", "Home"))
        .Read(r => r.Action("Read", "Home"))
        .Update(update => update.Action("Update", "Home"))
    )
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Events(e => e.Edit("onEdit"))
    .HtmlAttributes(new { style = "height:700px;" })
)

 

I am also having the same issue with the drop down lists when I attempt to 'clear' a users selection based on another drop down list.

0
Tsvetomir
Telerik team
answered on 10 Mar 2021, 04:41 PM

Hi Luke,

As an alternative to triggering the change manually, you could set the value for the fields directly in the model and the binder should show the values in the textbox elements automatically:

var model = $("#grid").getKendoGrid().editable.options.model; 
model.set("Name", name);  
model.set("Email", email);  

 

Regards,
Tsvetomir
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Luke
Top achievements
Rank 1
answered on 10 Mar 2021, 04:57 PM

Thank you, that did the trick. I implemented my code above inside the onEdit(event) call for my popup editing so my code was slightly different. I needed to update the model and the text of the textbox.

function onEdit(event) {
    var model = event.model;
    var Name = $('input[id="Name"]');
    var Email = $('input[id="Email"]');
 
    Name.bind("on keyup", function (e) {
        var UN = $(this).val();
        $.ajax({
           cache: false,
           type: "GET",
           contentType: "application/json; charset=utf-8",
           dataType: 'json',
           url: autoFillUrl,
           data: {"UserName": UN },
           success: function (results) {
               if (results) { alert("SUCCESS: " + results); }
               var res = results.split(",");
               var email = res[0];
               var name = res[1];
               if (name) {
                   Name.val(name);
                   Email.val(email);
                   model.Name = name;
                   model.Email = email;
               }
           },
           error: function (xhr, ajaxOptions, thrownError) {
                alert("AJAX error");
           }
       });
   });
}
0
Tsvetomir
Telerik team
answered on 11 Mar 2021, 11:36 AM

Hi Luke,

The set() method exposed by the observable objects is supposed to be updating the inputs automatically. Therefore, you would not have to manually fill the input as the binder will be automatically triggered.

https://docs.telerik.com/kendo-ui/api/javascript/data/observableobject/methods/set

 

Kind regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Luke
Top achievements
Rank 1
answered on 11 Mar 2021, 02:15 PM
In my case it's not working as expected. I am capturing the onEdit() event to implement the desired auto fill functionality within the editor popup window. None of the fields automatically update/refresh based on the model either within 'onEdit()' or because of the popup editing. Therefore, I am manually updated the model and the displayed text.
0
John
Top achievements
Rank 1
Veteran
answered on 11 Mar 2021, 02:32 PM
var model = $("#grid").getKendoGrid().editable.options.model;


What is this sorcery?!  I can't tell you how useful this little tidbit is...

0
Tsvetomir
Telerik team
answered on 11 Mar 2021, 03:45 PM

Hi,

Whenever the Kendo UI Grid enters edit mode, a custom editable widget is dynamically created that has a reference to the currently edited item. An alternative to this would be to pass the TR element to the dataItem() method of the Kendo UI Grid:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/dataitem

 

Regards,
Tsvetomir
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Mattias
Top achievements
Rank 1
Answers by
todd
Top achievements
Rank 1
Mattias
Top achievements
Rank 1
John
Top achievements
Rank 1
Veteran
Tsvetomir
Telerik team
Luke
Top achievements
Rank 1
Share this question
or