У меня есть скрипт, в котором Ajax-вызов выполняется следующим образом:
(function () {
var setup, validation;
var errorMessage = '';
var errorClass = '';
var element = '';
var errorElement = '';
var allOk = true;
var testTelefon = /^[0-9\-+]{2,40}$/;
var testEpostAdress = /^(?!.{65})\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
(function () {
setup = {
init: function () {
this.initSendForm();
},
initSendForm: function () {
var self = this;
$('#helpContactForm').submit(function (event) {
if (allOk) {
var formData = self.getFormData();
var url = $(this).attr("action");
$.ajax({
cache: false,
type: "POST",
url: url,
data: formData,
success: function (data) {
if (data.Success) {
self.resetFormData();
self.showModal(data);
}
},
error: function (data) {
self.showModal(data);
}
});
}
self.hideModal();
event.preventDefault();
});
},
getFormData: function () {
var data = {
'Namn': $('#namn').val(),
'Email': $('#epost').val(),
'Telefon': $('#telefon').val(),
'Fraga': $('#fraga').val()
};
return data;
},
resetFormData: function () {
$('#namn').val(''),
$('#epost').val(''),
$('#telefon').val(''),
$('#fraga').val('')
return true;
},
showModal: function (data) {
$('#messageModalTitle').text(data.Caption);
$("#messageModalBodyText").text(data.Message);
$('#messageModal').modal('show');
return true;
},
hideModal: function () {
setTimeout(function () {
$('#messageModal').modal('hide');
}, 5000);
return true;
}
};
})();
(function () {
validation = {
valideraFormularet: function (errorMsgs) {
var errorMsgsArr = errorMsgs.split(","); //0=> Namn validerings meddel., 1=> Epost, 2=> Telefon, 3=> Fråga
var epost = document.getElementById("epost");
var telefon = document.getElementById("telefon");
this.valideraNamnet(errorMsgsArr[0]);
this.valideraEpostTelefon((errorMsgsArr[1] + ', ' + errorMsgsArr[2]), epost);
this.valideraEpostTelefon((errorMsgsArr[1] + ', ' + errorMsgsArr[2]), telefon);
this.valideraFraga(errorMsgsArr[3]);
return false;
},
valideraNamnet: function (errorMsg) {
var namn = document.getElementById("namn");
var namnError = document.getElementById("namnError");
if (namn.value == "") {
this.setErrorMsgAndClass(namn, namnError, "input-validation-error", errorMsg);
}
else {
this.setErrorMsgAndClass(namn, namnError);
return true;
}
allOk = false;
return false;
},
valideraEpostTelefon: function (errorMsg, ele) {
var result = errorMsg.split(","); //0=> När båda saknas, 1=> När epost saknas, 2=> När telefon saknas
var srcElement = document.getElementById(ele.id);
var epost = document.getElementById("epost");
var epostError = document.getElementById("epostError");
var telefon = document.getElementById("telefon");
var telefonError = document.getElementById("telefonError");
var errorElement = srcElement === epost ? epostError : telefonError;
var validEpost = testEpostAdress.test(epost.value);
var validTelefon = testTelefon.test(telefon.value);
if (epost.value == "" && telefon.value == "") {
this.setErrorMsgAndClass(srcElement, errorElement, "input-validation-error", result[0]);
}
else if (!validEpost && !validTelefon) {
this.setErrorMsgAndClass(srcElement, errorElement, "input-validation-error", srcElement === epost ? result[1] : result[2]);
}
else {
this.setErrorMsgAndClass(srcElement, errorElement);
return true;
}
allOk = false;
return false;
},
valideraTelefon: function (errorMsg) {
var result = errorMsg.split(",");
var telefon = document.getElementById("telefon");
var epost = document.getElementById("epost");
var telefonError = document.getElementById("telefonError");
var validTelefon = testTelefon.test(telefon.value);
if (telefon.value == "" && epost.value == "") {
this.setErrorMsgAndClass(telefon, telefonError, "input-validation-error", result[0]);
}
else if (validTelefon == false) {
this.setErrorMsgAndClass(telefon, telefonError, "input-validation-error", result[1]);
}
else {
this.setErrorMsgAndClass(telefon, telefonError);
return true;
}
allOk = false;
return false;
},
valideraFraga: function (errorMsg) {
var fraga = document.getElementById("fraga");
var fragaError = document.getElementById("fragaError");
if (fraga.value == "") {
fraga.style.borderColor = "#ffb6b6";
this.setErrorMsgAndClass(fraga, fragaError, "input-validation-error", errorMsg);
}
else {
fraga.style.borderColor = "#dddddd";
this.setErrorMsgAndClass(fraga, fragaError);
return true;
}
allOk = false;
return false;
},
setErrorMsgAndClass: function (el, errorEl, nameOfClass = '', errorMsg = '') {
element = el;
errorElement = errorEl;
errorClass = nameOfClass;
errorMessage = errorMsg;
this.setErrorMsgAndClassOnElements();
return false;
},
setErrorMsgAndClassOnElements: function () {
element.className = errorClass;
errorElement.textContent = errorMessage;
this.toggleSubmitBtn();
return false;
},
toggleSubmitBtn: function () {
allOk = errorClass == '' && $('.input-validation-error').length == 0 ? true : false;
if (!allOk)
document.getElementById("btnHelpFormSubmit").disabled = true;
else
document.getElementById("btnHelpFormSubmit").disabled = false;
}
};
})();
})();
Это в основном простая форма "свяжитесь с нами". Таким образом, пользователь заполняет контактную информацию и вопрос. Затем форма отправляется на сервер (контроллер mvc asp.net), и ответ (json) в виде сообщения с благодарностью отображается в модале Bootstrap и автоматически исчезает через 5 секунд.
Теперь это работает нормально во всех браузерах, кроме IE 11 и ниже (да, мы должны поддерживать эти браузеры, поскольку у нас есть пользователи в некоторых странах, где эти браузеры используются).
Проблема в том, что когда форма отправляется в IE, она не показывает модальный режим, а просит пользователя загрузить (то небольшое сообщение о сохранении или открытии внизу окна IE) содержимое json.
Единственная ошибка в консоли IE ") ожидается". Хотя я проверял код очень много раз, и в нем нет пропущенных символов ")" (или я пропустил?).
Это могут быть проблемы с подключением или, возможно, что-то отсутствует в блоке запроса ajax, поэтому IE не показывает модальный режим и вместо этого предоставляет пользователю возможность загрузить контент json, и эта ошибка в скобках связана с чем-то другим.
Нужна помощь!
Редактировать: теперь это полный код. Некоторый код был в другом файле JS, и я объединил их здесь, чтобы он выглядел так же, как в исходном представлении Chrome.