Jquery ajax call: how to parse results?

Question

I have a modal dialog (done through jquery UI) that submit a form to a remote controller Action.

This is the jquery function called:

$("fpForm").submit(function() {
    $.ajax({
        type: "POST",
        url: "ForgotPassword",
        data: $("#fpForm").serialize(),
        success: function(response) {
            alert(response);
        },
        error: function(response) {
            alert(response);
        }
    });
});

The action does some verification on the data and then send back a response in JSON format. Let's say, for example, that this is a sample response:

{"result":"NOK","message":"The user is not registered on the system"}

My questions are:

1. Why the debug alert that I have set in the "success" and "error" block does not are get executed?
2. How I can write my code to parse the response while remaining in wait for it on the dialog?
3. How can I write code to block the form elements during the ajax call?

I am sorry if the question could seem stupid for most of you but I am completely new to ajax and I am trying to learn throgh some experienced pattern that I know.

Thank you for your responses

Answer 1

My questions are:

1. Why the debug alert that I have set in the "success" and "error" block does not are get executed?
2. How I can write my code to parse the response while remaining in wait for it on the dialog?
3. How can I write code to block the form elements during the ajax call?

1. If you meant to use the id then you missed the # designator:

   $("#fpForm")

2. Add the sync : true option on the call?

3. You could either: set the disabled attribute on the form elements AFTER posting the request, or else mask the page with an element (possibly semi-transparent) to divert the inputs.

Answer 2

The first error is the usage of $("fpForm").submit instead of $("#fpForm").submit.

If the server sand back JSON data, for example as JsonResult, you should include dataType: "json" to convert result to the object in object. After that you can replace alert(response); to

alert('Result: ' + response.result + ', Message: ' + response.message);

To block the form element I'll recommend you to use jQuery BlockUI Plugin. On the demos you will find different examples of usage and find the way which you like.