Javascript Gritter css/js似乎正在导致IE8恢复到兼容模式
我在IE8中的应用程序中有一个问题，如下所示，当从表单提交接收ajax响应并显示时。如果我不在javascript中包含gritter样式表或不使用gritter，错误就会消失。在IE8兼容模式或IE9及更高版本中不会发生这种情况 下面是一个工作示例，您可以自己看到错误： 很抱歉没有样式，我从一个应用程序中提取了代码，并将其简化为最简单的代码，以便重现问题 该消息是“由于Internet Explorer使用兼容性视图刷新网页而导致的Blothosting.com显示问题” 以下是该页面的源代码：Javascript Gritter css/js似乎正在导致IE8恢复到兼容模式,javascript,jquery,css,Javascript,Jquery,Css,我在IE8中的应用程序中有一个问题，如下所示，当从表单提交接收ajax响应并显示时。如果我不在javascript中包含gritter样式表或不使用gritter，错误就会消失。在IE8兼容模式或IE9及更高版本中不会发生这种情况 下面是一个工作示例，您可以自己看到错误： 很抱歉没有样式，我从一个应用程序中提取了代码，并将其简化为最简单的代码，以便重现问题 该消息是“由于Internet Explorer使用兼容性视图刷新网页而导致的Blothosting.com显示问题” 以下是该页面的
<?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>
PHP销售点公司——由PHP销售点提供支持
var SITE_URL=“index.php”；
共同成功=“成功”；
公共_ERROR=“ERROR”；
$.ajaxSetup({
cache:false，
标头：{“缓存控制”：“无缓存”}
});
$（文档）.ready（函数（）
{
//Ajax提交当前位置
$（“#员工#当前(位置)id”）.更改（函数（）
{
$（“#表单设置#员工#当前位置#id”）.ajaxSubmit（函数（）
{
window.location.reload（true）；
});
});
});
html{
溢出：自动；
}
-
-
新客户
红色字段是必填字段
客户信息
名字：
姓氏：
电邮：
//验证和提交处理
$（文档）.ready（函数（）
{
setTimeout（function（）{$（“：input:visible:first”，“#customer_form”）.focus（）；}，100）；
var=false；
$（“#客户表格”）。验证({
submitHandler:函数（表单）
{
单据客户提交（表格）；
},
规则：
{
名字：“必选”，
姓氏：“必填”，
电子邮件：“电子邮件”
},
errorClass:“文本危险”，
错误元素：“span”，
突出显示：函数（元素、errorClass、validClass）{
$（元素）.parents（'.form group'）.removeClass（'has-success'）.addClass（'has-error'）；
},
取消高亮显示：函数（元素、errorClass、validClass）{
$（元素）.parents（'.form group'）.removeClass（'has-error'）.addClass（'has-success'）；
},
信息：
{
账号：
{
远程：“帐号已存在”}，
名字：“名字是必填字段。”，
姓氏：“姓氏是必填字段”，
电子邮件：“电子邮件地址格式不正确”}
});
});
var=false；
功能doCustomerSubmit（表单）
{
如果（提交）返回；
提交=真；
$（表格）.ajaxSubmit({
成功：