Question

Update

My problem was that I used event.preventDefault() instead of return false to hinder the form from posting normally. FF and IE didn’t like that and broke the JS by that line. I removed that and appended return false at the end and this solved the problem. Thanks to Darin Dimitrov for the extensive checklist.

Original question

I’m using ASP.NET MVC3 and jquery ajax to post json-data to the server and receive a response. However, when I’m using Chrome it reads the json-response normally, updating the divs that I want etc. With IE and FF it doesn’t work though. They read just the response and shows only that on the page.

I saw some other threads mentioning to define the mime type as “text/plain”. This changed the previous behavior of prompting the user to download the json-response instead.

This is the javascript for making the post:

 $.ajax({
        url: $("#formRegister").attr("action"),
        type: 'POST',
        data: JSON.stringify(user),
        dataType: 'json',
        contentType: 'application/json, charset=utf-8',
        traditional: true,
        success: function (data) {
            alertMessage(data.Message);

        },
        error: function () {

        }
    });

This is the ActionMethod receiving the call and returning a JsonResponse:

[HttpPost]
    public JsonResult Register(UserRegisterPackage package)
    {
        ClientAlert alert = new ClientAlert();
        if (package.Password != null)
        {       
            //bool success = Removed for simplicity's sake.
            bool success = true;
            if (success)
            {                    
                alert.Message = "Success!";                    
            }
            else
            {                    
                alert.Message = "Failed to register";                    
            }
        }
        else
        {                
            alert.Message = "You need to enter a password!";                
        }
        return Json(alert, "text/plain");
    }

As I said, when the content type is defined as text/plain the browser shows only the response and when it’s not defined it prompts the user to download the json-response instead.

With FF I seem to get an error about:

"event is not defined
event.preventDefault(); "

This could have something to do with the error.. but I need to prevent the form from posting normally. Is this done differently in FF or IE?

Any ideas?

Answer 1

Things to try:

1. If this $.ajax call is made inside the .click or .submit handler of some anchor or <form> make sure you return false; at the end in order to cancel the default behavior and leave time for your AJAX request to execute. The attr('action') that you are using leaves me to believe that this is the case.
2. Remove traditional: true parameter, you are sending a JSON request => it is irrelevant.
3. Make sure there aren’t some other javascript errors on your page as they might stop js execution and proceed into normal form submission
4. Remove all text/plain from your server if you intend to return JSON. It’s meaningless to do something like this and it’s definitely not where your problem comes from. Simply use return Json(alert);.

So if you are AJAXifying a form you don’t even need any JSON requests, simply:

$('#formRegister').submit(function() {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (data) {
            alertMessage(data.Message);
        },
        error: function () {

        }
    });
    return false;
});

and if you intend to send JSON requests then your code seems fine, jsu make sure there aren’t some other JS errors.