Why my text() function doesn't work in my script?

Question

I write a script that call a method which return count of some data, and then change the text of a 'P' tag (by id=count) to returned value. my script :

$(document).ready(function () {
    $("#count").text(function () {
        $.ajax({
            type: "POST",
            url: "./WebForm1.aspx/GetCountUnCheckNotification",
            data: {},
            async: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                return (response.d);
            },
        });
    });
});

What is the problem?

Also `success: function (response) { return (response.d); },` remove trailing comma — Tushar Gupta - curioustushar, Feb 23 '14 at 05:12

score 2 · Answer 1 · answered Feb 23 '14 at 05:12

If your response is a json,then you need to parse it like below.And if your response is not in json,you can directly assign value to .text(response)

          $(document).ready(function () {

                     $.ajax({
                        type: "POST",
                        url: "./WebForm1.aspx/GetCountUnCheckNotification",
                        data: {},
                        async: false,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success:
                            function (response) {
                                var result=parseJSON(response)
                                $("#count").text(result.d)
                            },
                    });

                });
          });

score 1 · Accepted Answer · answered Feb 23 '14 at 05:12

You have a bug relating to how AJAX works - your function isn't returning anything. Your success callback is invoked after the function has returned because AJAX is asynchronous.

To make this work, you would have to start with the AJAX call, and then, in it success handler, set the text of the <p>:

$.ajax({
  ...
  success: function (result) {
    $("#count").text(result.d);
  }
})

score 1 · Answer 3 · answered Feb 23 '14 at 05:13

try:

$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "./WebForm1.aspx/GetCountUnCheckNotification",
        data: {},
        async: false,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            $("#count").text(response.d);
        },
    });
});

score 0 · Answer 4 · answered Feb 23 '14 at 05:13

$.ajax({
                        type: "POST",
                        url: "./WebForm1.aspx/GetCountUnCheckNotification",
                        data: {},
                        async: false,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success:
                            function (response) {
                               $("#count").val(response["id"]); // in case of input tag
                              $("#count").html(response["id"]); // in case of span/p/div
                            },
                    });

score 0 · Answer 5 · answered Feb 23 '14 at 05:13

You need to set $("#count").text() in the success callback...

$(document).ready(function () {
                    $.ajax({
                        type: "POST",
                        url: "./WebForm1.aspx/GetCountUnCheckNotification",
                        data: {},
                        async: false,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success:
                            function (response) {
                                $("#count").text(response.d);
                            }
                    });
                }

score 0 · Answer 6 · answered Feb 23 '14 at 05:13

The $.ajax function doesn't return anything. Try something like this:

 $.ajax({
    type: "POST",
    url: "./WebForm1.aspx/GetCountUnCheckNotification",
    data: {},
    async: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success:
        function (response) {
            $("#count").text(response.d);
        },
});

score 0 · Answer 7 · answered Feb 23 '14 at 05:14

It doesn't work because of the way asynchronous operations work. Basically you are telling $('#count').text() to immediately set the text to whatever the anonymous function returns. But that function will just return undefined after firing the ajax event. You must place the text call inside the final callback; which is not executed until later:

$(document).ready(function () {
  $.ajax({
    type: "POST",
    url: "./WebForm1.aspx/GetCountUnCheckNotification",
    data: {},
    async: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success:
    function (response) {
      $("#count").text(response.d);
    },
  });
});

Why my text() function doesn't work in my script?

7 Answers7