1
У меня проблема в моем приложении в IE 8, как показано ниже, при получении ответа ajax из представления формы, а затем отображается gritter. Ошибка исчезает, если я не включаю таблицу стилей рисования или не использую gritter в своем javascript. Это не происходит в IE режима 8 совместимости или IE 9 и вышеGritter css/js, похоже, вызывает IE 8 для возврата в режим совместимости
Вот рабочий пример, который вы можете увидеть ошибки для себя: http://blastohosting.com/ie_error_8_gritter_error/
К сожалению, что нет ни одного стиля, я вытащил из формы коды приложение и сварил его самым простым, я мог бы сделать это, чтобы воспроизвести проблему.
сообщение является "Проблема отображения blastohosting.com вызвало Internet Explorer, чтобы обновить страницу с помощью зрения совместимости"
http://blastohosting.com/ie_error_8_gritter_error/
Вот исходный код страницы:
<?php
if (isset($_POST['first_name']))
{
sleep(1);
echo json_encode(array('test' => 'test'));
die();
}
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP Point Of Sale, Inc -- Powered By PHP Point Of Sale</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" rev="stylesheet" href="css/jquery.gritter.css?14.0" media="all" />
<script type="text/javascript">
var SITE_URL= "index.php";
</script>
<script src="js/jquery.js?14.0" type="text/javascript" language="javascript" charset="UTF-8"></script>
<script src="js/jquery.gritter.js?14.0" type="text/javascript" language="javascript" charset="UTF-8"></script>
<script src="js/jquery.validate.js?14.0" type="text/javascript" language="javascript" charset="UTF-8"></script>
<script src="js/jquery.form.js?14.0" type="text/javascript" language="javascript" charset="UTF-8"></script>
<script type="text/javascript">
COMMON_SUCCESS = "Success";
COMMON_ERROR = "Error";
$.ajaxSetup ({
cache: false,
headers: { "cache-control": "no-cache" }
});
$(document).ready(function()
{
//Ajax submit current location
$("#employee_current_location_id").change(function()
{
$("#form_set_employee_current_location_id").ajaxSubmit(function()
{
window.location.reload(true);
});
});
});
</script>
<style type="text/css">
html {
overflow: auto;
}
</style>
</head>
<body data-color="grey" class="flat">
<div id="wrapper">
<div id="header" class="hidden-print">
<h1><a href="index.php"><img src="img/header_logo.png" class="hidden-print" alt=""/></a></h1>
<a id="menu-trigger" href="#"><i class="fa fa-th-list fa fa-2x"></i></a>
</div>
<div id="user-nav" class="hidden-print">
<ul class="btn-group ">
<li class="btn hidden-phone" ><a title="" href="index.php/login/switch_user" data-toggle="modal" data-target="#myModal" ><i class="icon fa fa-user fa-2x"></i> <span class="text"> Welcome <b> John Doe! </b></span></a></li>
<li class="btn hidden-phone disabled" >
<a title="" href="" onclick="return false;"><i class="icon fa fa-clock-o fa-2x"></i> <span class="text">
03:32 pm 01/12/2014 </span></a>
</li>
<li class="btn "><a href="index.php/config"><i class="icon fa fa-cog"></i><span class="text">Settings</span></a></li>
<li class="btn ">
<a href="index.php/home/logout"><i class="icon fa fa-share-alt "></i><span class="text">Logout</span></a> </li>
</ul>
</div>
<div id="sidebar" class="hidden-print">
<ul>
<li ><a href="index.php"><i class="icon fa fa-dashboard"></i> <span>Dashboard</span></a></li>
<li class="active"><a href="index.php/customers"><i class="fa fa-group"></i><span>Customers</span></a></li>
<li ><a href="index.php/items"><i class="fa fa-table"></i><span>Items</span></a></li>
<li ><a href="index.php/item_kits"><i class="fa fa-inbox"></i><span>Item Kits</span></a></li>
<li ><a href="index.php/suppliers"><i class="fa fa-download"></i><span>Suppliers</span></a></li>
<li ><a href="index.php/reports"><i class="fa fa-bar-chart-o"></i><span>Reports</span></a></li>
<li ><a href="index.php/receivings"><i class="fa fa-cloud-download"></i><span>Receivings</span></a></li>
<li ><a href="index.php/sales"><i class="fa fa-shopping-cart"></i><span>Sales</span></a></li>
<li ><a href="index.php/employees"><i class="fa fa-user"></i><span>Employees</span></a></li>
<li ><a href="index.php/giftcards"><i class="fa fa-credit-card"></i><span>Gift Cards</span></a></li>
<li ><a href="index.php/config"><i class="fa fa-cogs"></i><span>Store Config</span></a></li>
<li ><a href="index.php/locations"><i class="fa fa-home"></i><span>Locations</span></a></li>
</ul>
</div>
<div id="content">
<div class="modal fade" id="myModal"></div>
<div id="content-header" class="hidden-print">
<h1 > <i class="fa fa-pencil"></i> New Customer </h1>
</div>
<div id="breadcrumb" class="hidden-print">
<a href="index.php" title="Go to Dashboard" class="tip-bottom"><i class="fa fa-home"></i> Dashboard</a><a title="Go to customers" class=" tip-bottom" href="index.php/customers">Customers</a> <a class="current" href="index.php/customers/view">View</a> </div>
<div class="row" id="form">
<div class="col-md-12">
Fields in red are required <div class="widget-box">
<div class="widget-title">
<span class="icon">
<i class="fa fa-align-justify"></i>
</span>
<h5>Customer Information</h5>
</div>
<div class="widget-content ">
<form action="" method="post" accept-charset="utf-8" id="customer_form" class="form-horizontal" enctype="multipart/form-data"> <div class="row">
<div class="col-md-7">
<div class="form-group">
<label for="first_name" class="required col-sm-3 col-md-3 col-lg-2 control-label ">First Name:</label> <div class="col-sm-9 col-md-9 col-lg-10">
<input type="text" name="first_name" value="" class="form-control" id="first_name" /> </div>
</div>
<div class="form-group">
<label for="last_name" class="required col-sm-3 col-md-3 col-lg-2 control-label ">Last Name:</label> <div class="col-sm-9 col-md-9 col-lg-10">
<input type="text" name="last_name" value="" class="form-control" id="last_name" /> </div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 col-md-3 col-lg-2 control-label not_required">E-Mail:</label> <div class="col-sm-9 col-md-9 col-lg-10">
<input type="text" name="email" value="" class="form-control" id="email" /> </div>
</div>
<input type="hidden" name="sale" value="0" />
<div class="form-actions">
<input type="submit" name="submitf" value="Submit" id="submitf" class=" btn btn-primary" /> </div>
</div>
</div>
</div>
</div>
</div>
</form>
<script type='text/javascript'>
//validation and submit handling
$(document).ready(function()
{
setTimeout(function(){$(":input:visible:first","#customer_form").focus();},100);
var submitting = false;
$('#customer_form').validate({
submitHandler:function(form)
{
doCustomerSubmit(form);
},
rules:
{
first_name: "required",
last_name: "required",
email: "email"
},
errorClass: "text-danger",
errorElement: "span",
highlight:function(element, errorClass, validClass) {
$(element).parents('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('.form-group').removeClass('has-error').addClass('has-success');
},
messages:
{
account_number:
{
remote: "Account number already exists" },
first_name: "The first name is a required field.",
last_name: "The last name is a required field",
email: "The e-mail address is not in the proper format" }
});
});
var submitting = false;
function doCustomerSubmit(form)
{
if (submitting) return;
submitting = true;
$(form).ajaxSubmit({
success:function(response)
{
submitting = false;
$.gritter.add({
title: 'Success',
text: 'MESSAGE',
image: false,
sticky: false,
class_name: 'gritter-item-success'
});
},
resetForm: true,
dataType:'json'
});
}
</script>
</body>
</html>
Не может ли это иметь отношение к тому факту, что ваш HTML сломан и не прошел проверку? – Leng
Я думаю, что вы на что-то, я сейчас проверяю это. –