jQuery Tooltip in IE6
I'm currently fighting with the jQuery Tools Tooltip. It works as claimed in IE8/Firefox, but the client also needs it to work in IE6. From everything I saw on their site, as well as the fact that it works elsewhere in the project, I know it is compatible with IE6.
I believe the hang-up is coming on the fact that I am attaching the tooltip to an AJAX generated list of table rows. I have thus far attempted this two ways, both of which seem to work in IE8/Firefox, neither of which work in IE6.
Attempt 1:
$(document).ready(function() {
// get the undeclared additions and populate the table
$.getJSON("/Drm/Pc/GetUndeclaredAssistanceRecords?partnumber=<%= Model.PartNumber %>",
function(data) {
var rowEntry = "";
var rowClass = "odd";
for (var i = 0; i < data.length; i++) {
// Fix for Bug 71 starts
strComment = "";
for (var k = 0; k < data[i].Comment.length; k++) {
if (data[i].Comment.substring(k, k + 1) == "'")
strComment = strComment + "";
else
strComment = strComment + data[i].Comment.substring(k, k + 1);
}
strComment = strComment.replace(";", ",");
strComment = strComment.substring(0, 400);
var rowEntry = "<tr class='" + rowClass + "'><td class='pcassistresultsCenterAlign'>" + data[i].PurchaseOrder + "</td><td class='pcassistresultsLeftAlign'>" + data[i].SupplierName + "</td><td class='pcassistresultsCenterAlign'>" + data[i].Amount + "<td class='pcassistresultsCenterAlign'>" + data[i].RecordType + "</td></tr>";
rowEntry = rowEntry + "<tr class='" + rowClass + "'><td class='pcassistresultsDetailTitle'>Shipment Date:</td><td>" + data[i].ShipDate + "</td><td class='pcassistresultsDetailTitle'>Input On:</td><td class='pcassistresultsDetailData'>" + data[i].InputOn + "</td></tr>";
rowEntry = rowEntry + "<tr class='" + rowClass + "'><td class='pcassistresultsDetailTitle'>Req Recon:</td><td class='pcassistresultsDetailData'>" + data[i].ReqRecon + "</td><td class='pcassistresultsDetailTitle'>Input By:</td><td class='pcassistresultsDetailData'>" + data[i].InputBy + "</td></tr>";
rowEntry = rowEntry + "<tr class='" + rowClass + "'><td class='pcassistresultsDetailTitle'>From Site</td><td class='pcassistresultsDetailData'>" + data[i].FromSite + "</td><td class='pcassistresultsDetailTitle'>Input By Phone:</td><td class='pcassistresultsDetailData'>" + data[i].InputByPhone
rowEntry = rowEntry + "<tr class='" + rowClass + "'><td class='pcassistresultsDetailTitle' valign='top'>Comment:</td><td colspan='3' rowspan='2' title='" + strComment + "' ><div style='overflow:hidden; height:30px;'>" + data[i].Comment + "</div></td></tr>";
rowEntry = rowEntry + "<tr class='" + rowClass + "'><td> </td></tr>";
//Fix for Bug 71 ends
$('#unDecAddTable tbody>tr:last').after(rowEntry);
rowClass = rowClass == 'odd' ? 'even' : 'odd';
}
$('#unDeclaredAdditions *').tooltip();
});
});
Attempt 2 is the same as above, but with the .tooltip() piece removed and the following code added outside the document.ready function
function PinTooltips() {
$('#unDeclaredAdditions *')开发者_开发知识库.tooltip();
$('#declaredAdditions *').tooltip();
}
$('#declaredAdditions').ajaxComplete(function(event, request, settings) {
PinTooltips();
});
Does anyone see where I went wrong or know something unusual about IE6 that would inhibit this from working?
Okay, I found the problem...and this is weird. Elsewhere in the project, it was assigning tooltips to a very large span of fields. In every browser except IE6, it was not assigning said tooltip to the comments td like I needed it to. But for some reason, in IE6, it was. So, when I tried to call the .tooltip() again it was breaking. As a result, I ended up putting in code to check for the browser being IE6. If it was IE6, don't try to re-attach the tooltip.
Very strange and I have no idea why it works that way, but that was my solution.
精彩评论