CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Antarr Byrd
Antarr Byrd

Reputation: 26131

Posting a form via AJAX in IE 11

I'm trying to do an Ajax post with JQuery in IE11. I have modified to compatibility meta-tag for ie-9 but it still does not work, will not send the post. Instead it throws an error saying {exception} Unable to get property 'settings' of undefined or null reference from jquery.

head

<head id="Head1">
<link href="../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../Content/datepicker.css" rel="stylesheet" type="text/css" />
<script src="/.../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="/.../Scripts/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<script src="/.../Scripts/json2.js" type="text/javascript"></script>
<script src="/.../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/.../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/.../Scripts/UtilityFunctions.js" type="text/javascript"></script>
<script src="/.../Scripts/jquery-ui-1.11.0/jquery-ui.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1;IE=9;IE=8;IE=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="../Content/images/favicon.ico" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" /></head>

jquery

$('#EmailForm').validate({
            invalidHandler: function(event, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {
                    var message = errors == 1
                      ? '1 email field has a missing or invalid email address. It has been highlighted, please correct this or remove the field.'
                      : errors + ' email fields have  missing or invalid email addresses. It has been highlighted, please correct this or remove the fields.';
                    $("div.error span").html(message);
                    $("div.error").show();
                } else {
                    $("div.error").hide();
                }
            },
            submitHandler: function (form) {
                $(form).ajaxSubmit(function () {
                    history.go(-1);
                });
            }
        });

        $('body').on('click', '.remove_field', function () {
            $(this).closest('p').remove();
        });
        $('.add_email_button').closest('p').click(function () {
            var html = '<p><input type="email" class="email" form="EmailForm" required name="EmailAddresses" /><span class="btn_orange"><a href="#" class="remove_field">x</a></span></p>';
            $(html).insertBefore($(this));
        });
        $('#SendEmail_Button').closest('span').click(function (e) {
            e.preventDefault();
            $('#EmailForm').submit();
           @* if ($('#EmailForm').valid()) {
                $.post('@Url.Action("PostEmail")', $('#EmailForm').serialize()).done(function() {
                    history.go(-1);
                });
            }*@
        });

web.config

<httpProtocol>
  <customHeaders>
    <clear/>
    <add name="X-UA-Compatible" value="IE=IE9"/>
  </customHeaders>
</httpProtocol>

Upvotes: 0

Views: 427

Answers (1)

Barmar
Barmar

Reputation: 781726

You need to do 

$("#EmailForm").validate({
    // options
});

before you can use $("#EmailForm").valid().

For the history movement, do it after the AJAX completes:

submitHandler: function(form) {
    $(form).ajaxSubmit(function() {
        history.go(-1);
    });
}

Upvotes: 1

Related Questions