How to call web method on change event of textbox in asp.net

Question

I have a text box. On its input I want to save its data like sticky Note I mean Auto Save textbox in asp.net.

My front end code is :

<textarea id="txtClientArea" runat="server" class="scfMultipleLineTextBox" cols="20" rows="4" onchange="onTextChange" >

My javascript Web method is:

function onTextChange(data) {
        debugger;
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "StickyNote.aspx/SaveData",
            data: JSON.stringify({ "data": data }),
            datatype: "json",
            async: false,
            success: function (response) {
                alert("C# method calling : " + response.d);
            },
            error: function (err) {
                alert(err.responseText);
            }
        });
    }

Code behind method is :

[System.Web.Services.WebMethod]
public static void SaveData(string data)
{
    User currentUser = Sitecore.Context.User;
    if (currentUser != null)
    {
        currentUser.Profile.SetCustomProperty("StickyNote", data);
    }
}

How do I make the textbox data auto save?

it is not working when i put some values in textarea javascript method is not calling — Amit Sharma
– Amit Sharma, Commented Jan 19, 2015 at 11:43
Refer the following link stackoverflow.com/questions/3889004/… — Wintergreen
– Wintergreen, Commented Jan 19, 2015 at 11:43
@neenumariya mostly i want something like this but it send request after each 5 seconds but i want to send this request after any change not after each 5 seconds — Amit Sharma
– Amit Sharma, Commented Jan 19, 2015 at 11:58

chridam · Accepted Answer · 2015-01-19 12:17:43Z

1

You could try the following:

$('#<%=txtClientArea.ClientID%>').on('change',function () {
    var data = encodeURIComponent($(this).text());                
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "StickyNote.aspx/SaveData",
        data: JSON.stringify({ "data": data }),
        datatype: "json",
        async: false,
        success: function (response) {
            alert("C# method calling : " + response.d);
        },
        error: function (err) {
            alert(err.responseText);
        }
    });
});

edited Jan 19, 2015 at 12:17

answered Jan 19, 2015 at 12:06

chridam

104k26 gold badges246 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Amit Sharma Over a year ago

it is throwing an error : TypeError: $(...).live is not a function error source line: $('textarea').live('change', function () {

chridam Over a year ago

Which jQuery version are you using? You should note that as of jQuery 1.7, the .live() method is deprecated. The alternative is the .on() to attach event handlers.

Amit Sharma Over a year ago

i'm using : //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

chridam Over a year ago

I've updated my answer to use the correct method .on(), give that a try, should work.

Collectives™ on Stack Overflow

How to call web method on change event of textbox in asp.net

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related