javascriptjqueryasp.netjquery-eventswebmethod

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


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?


Solution

  • 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);
            }
        });
    });