Question

I have the following snippet of jQuery:

var AlertType =
{
    Save: function () {
        var model = $('#alert').serialize();
        $.post('/account/alert/edit', model);
    }
}

When AlertType.Save() is called, the $.post() does not work in IE, but in all other browsers (surprising right?) I have tried to research the problem, but it is a fairly broad category or problems. I have even placed a callback function in the $.post() and tried to alert() inside of the callback, but it never hit the alert.

What might be causing this, and what would the fix be?

Answer 1

In your shoes I would break the problem down to its smallest chunk and then build up from there.

Step 1

Are you sure AlertType.Save() is being called at all? Put an alert in:

var AlertType =
        {
            Save: function () {
                alert('Save called.');
                var model = $('#alert').serialize();
                $.post('/account/alert/edit', model);

            }
        }

Step 2

If Save() is being called, try calling $.post() with null instead of model. Put a breakpoint in the code for the action method for Edit in the Alert controller. You want to make sure that the controller code is being called.

Step 3

If the controller code is being called, then you have a problem with model. (Not sure where to take it from there, sorry). If the controller code is still not being called, then try calling $.post() directly i.e. without using AlertType.Save(). So instead of:

AlertType.Save();

do the actual $.post(). You want to eliminate the chance of it being the javascript object at fault here.

Perhaps the above is overkill, but you only have to do this once and you will have learnt something if it ever happens again 🙂 From experience IE can make you have to go around the houses in order to diagnose a problem, since IE does stupid things under the hood sometimes, that other browsers just don’t do. Gotta love IE.