Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 4 down vote favorite

This question already has an answer here:

I have a text box and a button next to it. I want to send the content of textbox through Jquery ajax call to webmethod and get back the upper case value of the same and display that in alert. So far i have this code but its not working.

JAVASCRIPT:

function CallWM()
    {          

        var name = $('#name').val();         


        RealCallWM(name);


    }
    function RealCallWM(name) {

        $.ajax({
            url: 'Register.aspx/UpperWM',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: { name: JSON.stringify(name) },
            success: OnSuccess(response),
            error: function (response) {
                alert(response.responseText);
            }
        })
    };

HTML:

  Name:    <input id="name" type="text" /> 
<input id="Button1" type="button" value="button" onclick="CallWM();"/></div>
    </form>

WEB METHOD:

 [WebMethod]
        public static string UpperWM(string name )
        {
            var msg=name.ToUpper();
            return (msg);
        }
share|improve this question
2  
what is the console error message you getting? –  Delphian Jul 15 at 13:49
 
Uncaught ReferenceError: response is not defined –  Arbaaz Jul 15 at 13:50
1  
ok, as Darin mentioned, use JSON.stringify(name) –  Delphian Jul 15 at 13:51
 
@Delphian i made changes as suggested by Darin but i am getting console error "Uncaught ReferenceError: response is not defined " –  Arbaaz Jul 15 at 14:25
 
what is the use of "msg" in function "CallWM", and you are not passing the value while calling –  Delphian Jul 15 at 14:29
show 2 more comments

marked as duplicate by George Stocker♦ Jul 17 at 16:46

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

2 Answers

up vote 0 down vote accepted

As per your comment I understood your issue not yet resolved, so just try this

    function RealCallWM(name) {
        $.ajax({
            type: "POST",
            url: "Default.aspx/UpperWM",
            data: JSON.stringify({ name: $('#name').val() }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            success: function (data, status) {
                console.log("CallWM");
                alert(data.d);
            },               
            failure: function (data) {
                alert(data.d);
            },
            error: function (data) {
                alert(data.d);
            }
        });
    }
share|improve this answer
 
Same error Uncaught ReferenceError: response is not defined I guess we are looking for problem at he wrong place. I know it must be something silly, i am trying to figure out whats causing this error. –  Arbaaz Jul 15 at 14:49
 
updated the code,its working for me –  Delphian Jul 15 at 14:50
 
Working for me as well, I wonder why Darin's method is not working. –  Arbaaz Jul 15 at 15:01
up vote 4 down vote

Replace:

data: '{name: ' + name + '}',

with:

data: { name: JSON.stringify(name) },

to ensure proper encoding. Right now you are sending the following payload:

{name:'some value'}

which is obviously an invalid JSON payload. In JSON everything should be double quoted:

{"name":"some value"}

That's the reason why you should absolutely never be building JSON manually with some string concatenations but using the built-in methods for that (JSON.stringify).

Side note: I am not sure that there's a callback called failure that the $.ajax method understands. So:

$.ajax({
    url: 'Register.aspx/UpperWM',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: { name: JSON.stringify(name) },
    success: OnSuccess(response),
    error: function (response) {                        
        alert(response.responseText);
    }
});

Also notice that in your error callback I have removed the response.d property as if there's an exception in your web method chances are that the server won't return any JSON at all.

share|improve this answer
 
Just for further edification, see What is the difference between JSON and Object Literal Notation? –  Karl Anderson Jul 15 at 13:56
 
Darin is correct, there is no failure callback for the jQuery.ajax() method. –  Karl Anderson Jul 15 at 13:58
 
Excellent answer. –  bluetoft Jul 15 at 13:58
 
SOrry for responding late, i made the changes but i am getting the console error "ncaught ReferenceError: CallWM is not defined" –  Arbaaz Jul 15 at 14:19
 
Where is this javascript code written? Is it in a separate javascript file? Did you reference this file in your WebForm? Also you must reference it before the button. Also since you are using jQuery don't forget to reference that as well before your custom javascript code. –  Darin Dimitrov Jul 15 at 14:29
show 4 more comments

Not the answer you're looking for? Browse other questions tagged or ask your own question.