jQuery: Calling a function from AJAX request

Question

I'm trying to call a function when I get success from my ajax call, but it's not working. This is what I've tryed so far.

function dtMRPReasonCode(dt) {
    var data = null;

    jQuery.ajax({
        type: "POST",
        data: {},
        url: "Index.aspx/getMRPReasonCodeReport",
        contentType: "application/json; charset=utf-8",
        dataType: "json",

        success: function(msg) {
            if (msg.d) {
                console.log(dt);
                console.log(msg.d);
                buildTableBody(dt, msg.d);
            }
        },

        error: function(xhr, ajaxOptions, thrownError) {
            alert("Error: dtMRPReasonCode");
        }
    });

    return false;

}

function buildTableBody(dt, obj) {   
    dt.fnClearTable();
    data = [];

    $(obj).each(function(index, value) {
        element = [];

        element.push(value.Metric);
        element.push(value.Region);
        element.push(value.Plant);
        element.push(value.Customer);
        element.push(value.IMAC);
        element.push(value.NotFilled);
        element.push(value.Filled);
        element.push(value.Total);

        data.push(element);
    });

    dt.fnAddData(data);
}

enter image description here Thanks in advance!

Edit #1

I used console.log in order to show you what I got from dt and msg.d (Image)

Edit #2

If I paste the commands from buildTableBody function in the success: handler instead of calling buildTableBody function in the success: handler it actually works:

function dtMRPReasonCode(dt) {
    var data = null;

    jQuery.ajax({
        type: "POST",
        data: {},
        url: "Index.aspx/getMRPReasonCodeReport",
        contentType: "application/json; charset=utf-8",
        dataType: "json",

        success: function(msg) {
            dt.fnClearTable();
            data = [];

            $(msg.d).each(function(index, value) {
                element = [];

                element.push(value.Metric);
                element.push(value.Region);
                element.push(value.Plant);
                element.push(value.Customer);
                element.push(value.IMAC);
                element.push(value.NotFilled);
                element.push(value.Filled);
                element.push(value.Total);

                data.push(element);
            });

            dt.fnAddData(data); 
        },

        error: function(xhr, ajaxOptions, thrownError) {
            alert("Error: dtMRPReasonCode");
        }
    });

    return false;
}

But it makes no sense to me, since this actually should work in both ways.

Isn't the `td` in your function call a typo? Apart from that, check your console for any errors. — Styxxy, Jun 22 '12 at 21:18
@JonathanM: I got nothing, I believe that *buildTableBody* it's not being called. — Eder, Jun 22 '12 at 21:19
could it be that `msg.d` is undefined so it never *enters* your `if` condition? — MilkyWayJoe, Jun 22 '12 at 21:19
In `success` do an alert to show `td` and `msg.d`. Post your results here. — Jonathan M, Jun 22 '12 at 21:20
@Styxxy: Yeah I've changed *td* to *dt*, and I also checked my console for error but I get nothing. — Eder, Jun 22 '12 at 21:22
@JonathanM: If I do alert(msg.d) I get the whole information from my page method, If I do alert(dt) I get the datatable's reference. — Eder, Jun 22 '12 at 21:25
Another general comment- You seem to be POSTing an empty object to "get" data (getMRPReasonCodeReport).. You really should be using HTTP GET instead. — Steve H., Jun 22 '12 at 21:31
@SteveH.: ASMX/ASPX will not return JSON data from a GET request http://encosia.com/using-jquery-to-consume-aspnet-json-web-services/ — BLSully, Jun 22 '12 at 21:50
@BLSully, I'll add that to my list of reasons to shun ASMX/ASPX ;) — Steve H., Jun 22 '12 at 21:54

score 1 · Answer 1 · answered Jun 22 '12 at 21:20

1

Pretty sure you have a typo on your function call

buildTableBody(td, msg.d);

should be

buildTableBody(dt, msg.d);

Also what is the return type from Index.aspx/getMRPReasonCodeReport? If it is string, you've got to unescape the string before you can treat it as JSON.

answered Jun 22 '12 at 21:20

BLSully

5,929
1
27
43

In fact, it returns a generic list. – Eder Jun 25 '12 at 04:51

score 1 · Answer 2 · answered Jun 22 '12 at 21:21

1

Try removing contentType : "application/json utf-8" from your AJAX call. That is the type of the data sent to the server. It is likely that you want the default content type.

Unless your server-side resource was configured to accept json it likely accepts application/x-www-form-urlencoded

http://api.jquery.com/jQuery.ajax/

answered Jun 22 '12 at 21:21

marteljn

6,446
3
30
43

1

ASPX/ASMX webservice methods need the contentType the OP provided when dealing with JSON serialization. – BLSully Jun 22 '12 at 21:26
http://stackoverflow.com/questions/900231/asmx-webservice-not-returning-json-can-only-post-using-application-x-www-form-u – marteljn Jun 22 '12 at 21:33
Interesting, I've only ever had success using `application/json; charset=utf-8` with ASMX – BLSully Jun 22 '12 at 21:48
1

Im not 100% positive this is the issue here, but I have ran into this before. It is hard to tell without seeing the server-side code/config etc, but its worth trying:) – marteljn Jun 22 '12 at 21:50

jQuery: Calling a function from AJAX request

Edit #1

Edit #2

2 Answers2