个人中心
gpt4 book ai didi

javascript - Gritter css/js 似乎导致 IE 8 恢复到兼容模式

转载 作者：太空宇宙 更新时间：2023-11-03 18:24:41 25 4
gpt4 key购买 nike

我在 IE 8 中的应用程序在收到来自表单提交的 ajax 响应然后显示 gritter 时出现问题，如下所示.如果我不包含 gritter 样式表或者不在我的 javascript 中使用 gritter，错误就会消失。这不会在 IE 8 兼容模式或 IE 9 及更高版本中发生

这是您可以自己查看错误的工作示例: http://blastohosting.com/ie_error_8_gritter_error/

抱歉，没有样式，我从一个应用程序中提取代码并将其简化为最简单的代码，以便重现问题。

消息是“显示 blastohosting.com 的问题导致 Internet Explorer 使用兼容性 View 刷新网页”

IE 8 error on ajax response

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>

最佳答案

正如 Leng 所说，我错过了一对 </div>的，这就是导致问题的原因。

关于javascript - Gritter css/js 似乎导致 IE 8 恢复到兼容模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21080200/

25 4 0
文章推荐： c# - 错误 : (using List class) Index was outside the bounds of array
文章推荐： ruby-on-rails - rails : App fails but code runs fine in console
文章推荐： html - 为什么我的页面不能在我的选项卡栏上全部打开？
文章推荐： ruby - 如何使用 Mongoid 删除特定数据库？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com