我现在很难过,我需要帮助。 我通过AJAX(大约250行,15列)拉入一个大的html表 每行的7列包含更多子表,这些子表隐藏在单元格中的div中,并在单元格悬停时显示在悬停中(显示更多数据)
所有最近的浏览器(IE9,FF,Chrome)都能正常运行。 我开始添加datatables jquery插件以便能够动态地对列等进行排序,这也很好。
然后我意识到这个应用程序的用户将通过虚拟化操作系统使用IE8,所以我开始测试。直接,我注意到在我的开发笔记本电脑上在虚拟机中使用IE8进行测试时会出现问题。
似乎发生的情况是,第一次发送ajax请求时,浏览器会收集返回的数据,并在屏幕上合理地快速呈现它。如果我然后尝试重新提交具有相同数据的表单,浏览器将暂停一段时间,然后提出“此脚本需要很长时间才能处理...您希望......”
所以我开始屠宰我的网页,试着看看导致这种减速的原因。看起来像第二次桌面上的IE扼流圈并显示错误消息,但为什么!?!?
我遵循了MSN关于优化IE渲染表的建议,我为这个表和子表添加了固定宽度,我还添加了<colgroups>
。这影响很小。
在我意识到如果我在脚本中删除对JQuery UI的调用之后不久,错误就会消失,而virtualbox下的IE8会在没有问题的情况下呈现每个ajax响应!
所以,有人可以提供一些建议,为什么包括JQueryUI导致ajax表加载速度非常慢并且捏造浏览器。
BTW - 只有jqueryUI存在的原因是因为我在我的搜索表单中使用了JQueryUI日期选择器。据我所知,JQueryUI不应该干扰IE的渲染过程,但它似乎确实如此!
查找以下ajax请求的代码示例:
点击“搜索”时 在服务器返回响应之后,“data”将包含一个长字符串,其中包含一个表:
$.get("<?= config_item('base_url') ?>"+linky, $("#quote").serialize(),
function(data)
{
//$("#quoteresults").show();
$("#ajaxloading").hide();
//$("#ajaxloadingscr").hide();
//alert(data);
$('#dvResult').html(data);
});
这里是一些示例数据,这是我表中的一行......
<tr>
<td><a target="_blank" href="\Anantara Bo Phut"><img src="/assets/images/contractlink.png"></a> <span class="result_HotelName">Anantara Bophut Resort and Spa</span></td>
<td><a target="_blank" onClick="fnLoadRoomData('5173')" class="result_RoomName">Anantara Suite</a></td>
<td nowrap="nowrap">2</td>
<td>BB</td>
<td nowrap="nowrap" align="right" class="result_PricePound">£0.00</td>
<td nowrap="nowrap" align="right"><div class="containerprice">
<div class="pricedate"><span class="result_Price">THB 0.00</span></div>
<div class="pricext">
<table class="subtable" style="table-layout:fixed;" width="600" border="0">
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<td colspan="3">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-08#</td>
</tr>
<tr>
<td>STD Total</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td colspan="3"><table style="table-layout:fixed;" border="0">
<tbody>
<tr>
<td nowrap="nowrap">Age 35 (1)</td>
<td nowrap="nowrap">Age 35 (2)</td>
</tr>
<tr>
<td nowrap="nowrap">0</td>
<td nowrap="nowrap">0</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
</div></td>
<td nowrap="nowrap"><div class="containerprice">
<div class="pricedate"><a href="" class="price_normal">0</a></div>
<div class="pricext">
<table class="subtable" width="600" border="0">
<tbody>
<tr>
<td colspan="5">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-02#</td>
</tr>
<tr>
<td>Total</td>
<td>STD Rate</td>
<td>STD Supps</td>
<td>SNG</td>
<td>Extra</td>
</tr>
<tr>
<td><a href="" class="price_normal">0</a></td>
<td></td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5"><table width="100%" border="0">
<tbody>
<tr>
<td nowrap="nowrap">Age 35 (1)</td>
<td nowrap="nowrap">Age 35 (1) Supps</td>
<td nowrap="nowrap">Age 35 (2)</td>
<td nowrap="nowrap">Age 35 (2) Supps</td>
</tr>
<tr>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="5">2 2 2# Age 35 2 # EBO I(-15.00%PP) = -0<br></td>
</tr>
<tr>
<td>StdOcc: 2</td>
<td>AdultBasis: PR</td>
<td>AdultAgeFrom: 12</td>
<td colspan="2">RoomBoardCode: BB</td>
</tr>
<tr>
<td></td>
<td>RoomID: 5173</td>
<td>ContractID: 511</td>
<td colspan="2">Total: <span class="grandtotal">0</span></td>
</tr>
</tbody>
</table>
</div>
</div></td>
<td nowrap="nowrap"><div class="containerprice">
<div class="pricedate"><a href="" class="price_normal">0</a></div>
<div class="pricext">
<table class="subtable" width="600" border="0">
<tbody>
<tr>
<td colspan="5">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-03#</td>
</tr>
<tr>
<td>Total</td>
<td>STD Rate</td>
<td>STD Supps</td>
<td>SNG</td>
<td>Extra</td>
</tr>
<tr>
<td><a href="" class="price_normal">0</a></td>
<td></td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5"><table width="100%" border="0">
<tbody>
<tr>
<td nowrap="nowrap">Age 35 (1)</td>
<td nowrap="nowrap">Age 35 (1) Supps</td>
<td nowrap="nowrap">Age 35 (2)</td>
<td nowrap="nowrap">Age 35 (2) Supps</td>
</tr>
<tr>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="5">2 2 2# Age 35 2 # EBO I(-15.00%PP) = -0<br></td>
</tr>
<tr>
<td>StdOcc: 2</td>
<td>AdultBasis: PR</td>
<td>AdultAgeFrom: 12</td>
<td colspan="2">RoomBoardCode: BB</td>
</tr>
<tr>
<td></td>
<td>RoomID: 5173</td>
<td>ContractID: 511</td>
<td colspan="2">Total: <span class="grandtotal">0</span></td>
</tr>
</tbody>
</table>
</div>
</div></td>
<td nowrap="nowrap"><div class="containerprice">
<div class="pricedate"><a href="" class="price_normal">0</a></div>
<div class="pricext">
<table class="subtable" width="600" border="0">
<tbody>
<tr>
<td colspan="5">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-04#</td>
</tr>
<tr>
<td>Total</td>
<td>STD Rate</td>
<td>STD Supps</td>
<td>SNG</td>
<td>Extra</td>
</tr>
<tr>
<td><a href="" class="price_normal">0</a></td>
<td></td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5"><table width="100%" border="0">
<tbody>
<tr>
<td nowrap="nowrap">Age 35 (1)</td>
<td nowrap="nowrap">Age 35 (1) Supps</td>
<td nowrap="nowrap">Age 35 (2)</td>
<td nowrap="nowrap">Age 35 (2) Supps</td>
</tr>
<tr>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="5">2 2 2# Age 35 2 # EBO I(-15.00%PP) = -0<br></td>
</tr>
<tr>
<td>StdOcc: 2</td>
<td>AdultBasis: PR</td>
<td>AdultAgeFrom: 12</td>
<td colspan="2">RoomBoardCode: BB</td>
</tr>
<tr>
<td></td>
<td>RoomID: 5173</td>
<td>ContractID: 511</td>
<td colspan="2">Total: <span class="grandtotal">0</span></td>
</tr>
</tbody>
</table>
</div>
</div></td>
<td nowrap="nowrap"><div class="containerprice">
<div class="pricedate"><a href="" class="price_normal">0</a></div>
<div class="pricext">
<table class="subtable" width="600" border="0">
<tbody>
<tr>
<td colspan="5">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-05#</td>
</tr>
<tr>
<td>Total</td>
<td>STD Rate</td>
<td>STD Supps</td>
<td>SNG</td>
<td>Extra</td>
</tr>
<tr>
<td><a href="" class="price_normal">0</a></td>
<td></td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5"><table width="100%" border="0">
<tbody>
<tr>
<td nowrap="nowrap">Age 35 (1)</td>
<td nowrap="nowrap">Age 35 (1) Supps</td>
<td nowrap="nowrap">Age 35 (2)</td>
<td nowrap="nowrap">Age 35 (2) Supps</td>
</tr>
<tr>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="5">2 2 2# Age 35 2 # EBO I(-15.00%PP) = -0<br></td>
</tr>
<tr>
<td>StdOcc: 2</td>
<td>AdultBasis: PR</td>
<td>AdultAgeFrom: 12</td>
<td colspan="2">RoomBoardCode: BB</td>
</tr>
<tr>
<td></td>
<td>RoomID: 5173</td>
<td>ContractID: 511</td>
<td colspan="2">Total: <span class="grandtotal">0</span></td>
</tr>
</tbody>
</table>
</div>
</div></td>
<td nowrap="nowrap"><div class="containerprice">
<div class="pricedate"><a href="" class="price_normal">0</a></div>
<div class="pricext">
<table class="subtable" width="600" border="0">
<tbody>
<tr>
<td colspan="5">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-06#</td>
</tr>
<tr>
<td>Total</td>
<td>STD Rate</td>
<td>STD Supps</td>
<td>SNG</td>
<td>Extra</td>
</tr>
<tr>
<td><a href="" class="price_normal">0</a></td>
<td></td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5"><table width="100%" border="0">
<tbody>
<tr>
<td nowrap="nowrap">Age 35 (1)</td>
<td nowrap="nowrap">Age 35 (1) Supps</td>
<td nowrap="nowrap">Age 35 (2)</td>
<td nowrap="nowrap">Age 35 (2) Supps</td>
</tr>
<tr>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="5">2 2 2# Age 35 2 # EBO I(-15.00%PP) = -0<br></td>
</tr>
<tr>
<td>StdOcc: 2</td>
<td>AdultBasis: PR</td>
<td>AdultAgeFrom: 12</td>
<td colspan="2">RoomBoardCode: BB</td>
</tr>
<tr>
<td></td>
<td>RoomID: 5173</td>
<td>ContractID: 511</td>
<td colspan="2">Total: <span class="grandtotal">0</span></td>
</tr>
</tbody>
</table>
</div>
</div></td>
<td nowrap="nowrap"><div class="containerprice">
<div class="pricedate"><a href="" class="price_normal">0</a></div>
<div class="pricext">
<table class="subtable" width="600" border="0">
<tbody>
<tr>
<td colspan="5">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-07#</td>
</tr>
<tr>
<td>Total</td>
<td>STD Rate</td>
<td>STD Supps</td>
<td>SNG</td>
<td>Extra</td>
</tr>
<tr>
<td><a href="" class="price_normal">0</a></td>
<td></td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5"><table width="100%" border="0">
<tbody>
<tr>
<td nowrap="nowrap">Age 35 (1)</td>
<td nowrap="nowrap">Age 35 (1) Supps</td>
<td nowrap="nowrap">Age 35 (2)</td>
<td nowrap="nowrap">Age 35 (2) Supps</td>
</tr>
<tr>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="5">2 2 2# Age 35 2 # EBO I(-15.00%PP) = -0<br></td>
</tr>
<tr>
<td>StdOcc: 2</td>
<td>AdultBasis: PR</td>
<td>AdultAgeFrom: 12</td>
<td colspan="2">RoomBoardCode: BB</td>
</tr>
<tr>
<td></td>
<td>RoomID: 5173</td>
<td>ContractID: 511</td>
<td colspan="2">Total: <span class="grandtotal">0</span></td>
</tr>
</tbody>
</table>
</div>
</div></td>
<td nowrap="nowrap"><div class="containerprice">
<div class="pricedate"><a href="" class="price_normal">0</a></div>
<div class="pricext">
<table class="subtable" width="600" border="0">
<tbody>
<tr>
<td colspan="5">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-08#</td>
</tr>
<tr>
<td>Total</td>
<td>STD Rate</td>
<td>STD Supps</td>
<td>SNG</td>
<td>Extra</td>
</tr>
<tr>
<td><a href="" class="price_normal">0</a></td>
<td></td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5"><table width="100%" border="0">
<tbody>
<tr>
<td nowrap="nowrap">Age 35 (1)</td>
<td nowrap="nowrap">Age 35 (1) Supps</td>
<td nowrap="nowrap">Age 35 (2)</td>
<td nowrap="nowrap">Age 35 (2) Supps</td>
</tr>
<tr>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
<td nowrap="nowrap"></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="5">2 2 2# Age 35 2 # EBO I(-15.00%PP) = -0<br></td>
</tr>
<tr>
<td>StdOcc: 2</td>
<td>AdultBasis: PR</td>
<td>AdultAgeFrom: 12</td>
<td colspan="2">RoomBoardCode: BB</td>
</tr>
<tr>
<td></td>
<td>RoomID: 5173</td>
<td>ContractID: 511</td>
<td colspan="2">Total: <span class="grandtotal">0</span></td>
</tr>
</tbody>
</table>
</div>
</div></td>
</tr>
这是datepicker init ondomload
$(function() {
$.ajaxSetup({ cache: false });
$("#quote").submit(function(e){
e.preventDefault();
});
$( "#datefrom" ).datepicker({
dateFormat: "dd-mm-yy",
changeMonth: false,
numberOfMonths: 1,
minDate: 0,
onSelect: function(dateText, inst) {
var aDates=dateText.split("-");
var strSelectedDate=aDates[1]+'/'+aDates[0]+'/'+aDates[2];
var oSelectDate=new Date(strSelectedDate);
//$( "#dateto" ).datepicker( "option", "minDate", $("#datefrom").val() );
oSelectDate.setDate(oSelectDate.getDate()+1);
$("#dateto").val(Convert(oSelectDate.getDate())+'-'+Convert(parseInt(oSelectDate.getMonth())+1)+'-'+oSelectDate.getFullYear());
$( "#drNoOfNights" ).val(1);
}
});
$( "#dateto" ).datepicker({
dateFormat: "dd-mm-yy",
changeMonth: false,
numberOfMonths: 1,
onSelect: function(dateText, inst) {
var aDates=$( "#datefrom" ).val().split("-");
var strSelectedDate=aDates[1]+'/'+aDates[0]+'/'+aDates[2];
var start=new Date(strSelectedDate);
aDates=dateText.split("-");
var strSelectedDate=aDates[1]+'/'+aDates[0]+'/'+aDates[2];
var end=new Date(strSelectedDate);
var diff = 0;
if (start && end) {
diff = Math.floor((end.getTime() - start.getTime()) / 86400000); // ms per day
}
$('#drNoOfNights').val(diff);
}
});
});