Question

我是mac上的初级程序员（所以我没有ie）并构建了一个相对简单的ajax jquery应用程序，根据数据库中存储的$msg，它显示了表单元素（可以是一个按钮，一个选择/下拉列表，或只是文本和一个链接），点击后，返回数据库并更改$msg。

我的代码在Chrome和Firefox中效果很好，但是当我在所有版本的IE中测试时，表单元素（在5秒滞后）恢复到加载页面时的位置。在感到沮丧之后，我查找了SO答案并阅读了有时候有问题的doctypes，因此我将doctype更改为html5 doctype并且没有任何更改。

继承我的代码：

$(document).ready(function() {  



$('.checkIn').click(function() {
    var $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of button  (1 for the first button)
    // You can map this to the corresponding button in database...
    $.ajax({
        type: "POST",
        url: "checkin.php",
        // Data used to set the values in Database
        data: { "checkIn" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.hide();
            var $container = $e.closest("div.jcontainer");
            // Get the immediate form for the button
            // find the select inside it and show...

            $container.find('.locationSelect').fadeIn();
        }
    });
});
$('.reset').click(function() {
    var $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of button  (1 for the first button)
    // You can map this to the corresponding button in database...
    $.ajax({
        type: "POST",
        url: "reset.php",
        // Data used to set the values in Database
        data: { "reset" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.fadeOut();

            var $container = $e.closest("div.jcontainer");
            // Get the immediate form for the button
            // find the select inside it and show...
            $container.find('.finished').fadeOut();
            $container.find('.checkIn').fadeIn();
        }
    });
});
$('.locationSelect').change(function(e) {
  if($(this).children(":selected").val() === "CheckOut") {
    $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    $.ajax({
        type: "POST",
        url: "checkout.php",
        // Data used to set the values in Database
        data: { "checkOut" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.fadeOut();
            var $container = $e.closest("div.jcontainer");
            // Get the immediate form for the button
            // find the select inside it and show...
            $container.find('reset').fadeIn();
            $container.find('.finished').fadeIn();

        }
    });
  }
  else{
    $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of select (1 for the first select)
    // You can map this to the corresponding select in database...
    $.ajax({
        type: "POST",
        url: "changeloc.php",
        data: { "locationSelect" : $(this).val(), "selectid" : data},
        success: function() {
            // Do something here
        }
    });
  }
});
setInterval(function(){

    $('.jcontainer').each(function() {
        var $e = $(this);
        var dataid = $e.data("param").split('_')[1] ;
        $.ajax({
            url: 'heartbeat.php',
            method: 'POST',
            contentType: "application/json",
            cache: true,
            data: { "dataid": dataid },
            success: function(data){


                var msg = $.parseJSON(data);

                if (msg == ""){ //after reset or after new patient that is untouched is added, show checkin
                    $e.find('.checkIn').show();
                    $e.find('.locationSelect').hide();
                    $e.find('.finished').hide();
                    $e.find('.reset').hide();
                }
                if ((msg < 999) && (msg > 0)){ // after hitting "Check In", Checkin button is hidden, and locationSelect is shown
                    $e.find('.checkIn').hide();
                    $e.find('.locationSelect').show();
                    $e.find('.finished').hide();
                    $e.find('.reset').hide();
                    $e.find('.locationSelect').val(msg);
                }
                if (msg == 1000){ //after hitting "Checkout", Option to reset is shown and "Finished!"
                    $e.find('.checkIn').hide();
                    $e.find('.locationSelect').hide();
                    $e.find('.finished').show();
                    $e.find('.reset').show();
                }


            }
       });


    });
  },5000);
});

我尝试尽可能多地评论我的代码，但基本上第一部分所做的只是将$msg上传到我的php页面，以便与表单元素进行每种交互（点击按钮，选择选项被点击，链接被点击）。然后第二部分是每5秒刷新一次，以确保计算机1上当前显示的表单元素在计算机2上显示（延迟5秒）。

感谢您提供的所有帮助，如果您需要更多详情/信息，请提出！谢谢！

Answer 1

我不是100％确定你遇到的问题所以我很抱歉，如果这样的话，那可能就是IE正在缓存你的Ajax请求。您可以尝试在功能之前插入它：

$.ajaxSetup({
  cache: false
});

注意：如果这样做，请不要像这样留下最终代码。禁用所有浏览器的Ajax缓存并不是一个好主意，但有时需要为旧版本的IE完成。我建议在HTML中使用IE条件注释，如下所示：

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie10 lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie10 lt-ie9 ie8"> <![endif]-->
<!--[if IE 9]>    <html class="no-js lt-ie10 ie9"> <![endif]-->
<!--[if gt IE 9]><!-->
<html class='no-js'>
  <!--<![endif]-->

然后你可以检测IE，$.ajaxSetup看起来像这样：

$.ajaxSetup({
  cache: !$('html').hasClass('lt-ie9'); //false if lower than IE9
});

jQuery是不是在任何版本的ie工作？

1 个答案: