JQUERY AJAX not returning value

Question

Please see the code below:

<script type='text/javascript'>
        $(document).ready(function () {
            $("button").click(function(){
                alert('Test');
                $('#div1 h2').text('Hi I am replace');
                var divToBeWorkedOn = "#div1";
                var n1 = 1;
                var n2 = 2;
                var webMethod = "Service1.svc/getNumber";

                $.ajax({
                    type: "POST",
                    url: webMethod,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        $(divToBeWorkedOn).html(val(result));
                    },
                    error: function (e) {
                        $(divToBeWorkedOn).html(e.responseText);
                    }
                });
            })
        });
    </script>

Here is the code from the server side:

 Public Function getNumber() As Integer Implements IService1.GetNumber
        Return 1
    End Function

The div1 contains no text after I click the button. I think it is calling the web service because it did error when I named it Service.svc/getNumber by mistake. What am I doing worng?

What does your `val` function do? The one you're using in `$(divToBeWorkedOn).html(val(result));` — T.J. Crowder, Jul 09 '14 at 14:18
Why you just can't debug both server and client side to see where is a problem? — Dmitry Zaets, Jul 09 '14 at 14:28
Are you sure that you are getting into success function. Is so then are you sure that you are getting correct result inthere? — Dmitry Zaets, Jul 09 '14 at 14:28
@U10, no I am not. I can confirm that it is erroring. What should the URL be. Is Service1.svc a proxy? — w0051977, Jul 09 '14 at 14:31
Check your comms, using something like Fiddler2 http://www.telerik.com/fiddler. Your Ajax URL is *relative* (to the hosting page), so may not be hitting your service at all. — iCollect.it Ltd, Jul 09 '14 at 14:48
@TrueBlueAussie, are you able to specify something like this: var webMethod = "http://localhost/MFCWebService/Service1.svc/getNumber";, where getNumber is the function? — w0051977, Jul 09 '14 at 14:51
@w0051977: probably, but we do not have enough detail about the setup of your website. Rather than hard-wire an absolute path, I would normally inject the server root into the page (or worst case into the javascript) and append the relative path to that server root path. — iCollect.it Ltd, Jul 09 '14 at 15:31

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

In your success function, you should refer to result.d instead of just result. So it should be like this:

            $.ajax({
                type: "POST",
                url: webMethod,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    $(divToBeWorkedOn).html(result.d); // Note the .d which contains the actual value
                },
                error: function (e) {
                    $(divToBeWorkedOn).html(e.responseText);
                }
            });

See also this SO question about why it has to be data.d instead of just data (or result in your case).

edited May 23 '17 at 11:57

Community

1
1

answered Jul 09 '14 at 14:17

ZiNNED

2,620
20
31

Well, we don't know that the `val` function doesn't do that. – T.J. Crowder Jul 09 '14 at 14:18
Good point. Normally an extra `val` function shouldn't be needed, but it is indeed the question what that function does or why it is being called. Otherwise, leaving the `val()` out and just using `result.d` should do the trick. – ZiNNED Jul 09 '14 at 14:21
Thanks. That is what the Val function does (I should of included it). How do I see the error text returned: e.responsetext does not seem to work. – w0051977 Jul 09 '14 at 14:22

Norrj · Answer 2 · 2014-07-10T12:43:33.843

I will add the full code I added cuz you dont beleve that the earlier code I postad is right.

Imo when using Ajax you should also use Json. So I use Json in my code here, but you can also just return an int directly (I will be sending my ajax to an ActionResult in the controller.

Controller:

public ActionResult GetJson()
{
     return Json(1);
}

HTML:

<div id="div1" style="padding: 5px;"><h2></h2></div>
<button>Click me!</button>

Sctipt:

<script type='text/javascript'>
        $(document).ready(function () {
            $("button").click(function(){
                alert('Test');
                $('#div1 h2').text('Hi I am replace');
                var divToBeWorkedOn = "#div1";
                var n1 = 1;
                var n2 = 2;

                $.ajax({
                    type: "POST",
                    url: '@Url.Action("GetJson", "Estimate")',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        $(divToBeWorkedOn).html(result);
                    },
                    error: function (e) {
                        $(divToBeWorkedOn).html(e.responseText);
                    }
                });
            })
        });
    </script>

I don't really know what you want to do with this, but this code will do an alert('test') then change the text in the div to 'Hi I am replaced' then that text will be replaced with the value that is returned and placed in result. and It will be placed in the div.

Before Click:

enter image description here

After Click:

enter image description here

If I have completely misunderstood what you mean, then write more info and I'll try to help you.

Hope this helps

JQUERY AJAX not returning value

2 Answers2

Linked