I wrote a bunch of jQuery files to manipulate my software. My software is poorly designed and I’ve decided to make it much better with jQuery. The jQuery works in every browser except IE6-8. Although there is a fallback for non-supporting browsers, IE6-8 makes up for 25% of my traffic and I’d prefer to offer that 25% the same experience as everyone else (IE8 is about 21% so that’s all I really care about, IE6 & IE7 I don’t care about). So here’s an example of some of my code (It’s all very basic, I have about 10 files that look like this):
$(document).ready(function(){
$('input#v65-product-wishlist-button').replaceWith('<input type="submit" id="v65-product-wishlist-button" class="graybutton" name="btnaddtowishlist" alt="Add to Wishlist" value="Add to Wishlist" title="Add this item to my Wishlist">');
$('td[background="v/vspfiles/templates/volusion/images/expand_tab_right.gif"]').remove();
$('td[background="v/vspfiles/templates/volusion/images/expand_tab_left.gif"]').remove();
$('td[background="v/vspfiles/templates/volusion/images/PBox_Opt_Back.gif"]').remove();
$('td[background^="v/vspfiles/templates/volusion/images/PBox_Border_"]').remove();
$('td img[src^="v/vspfiles/templates/volusion/images/PBox_Border_"]').parent().remove();
$('td[background^="v/vspfiles/templates/volusion/images/DBox_Border_"]').remove();
$('td img[src^="v/vspfiles/templates/volusion/images/DBox_Border_"]').parent().remove();
$('td img[src="v/vspfiles/templates/volusion/images/RBox_Border_Left_Top.gif"]').parent().closest("table").addClass('ReviewBox');
$('td img[src="v/vspfiles/templates/volusion/images/RBox_Border_Left_Top.gif"]').parent().remove();
$('input.vCSS_input_addtocart').after('<input type="submit" class="vCSS_input_addtocart blackbutton" name="btnaddtocart" alt="Add to Cart" value="Add to Cart" title="Add this item to my Cart">').remove();
$('img.vCSS_img_email_a_friend').replaceWith('<span id="graybutton">Email a Friend</span>');
$('img.vCSS_img_larger_photo').replaceWith('<span id="graybutton">Larger View</span>');
$('img.vCSS_img_history_off').replaceWith('<span id="blackbutton">Turn History Off</span>');
$('img.vCSS_img_history_clear').replaceWith('<span id="graybutton" class="mediumbutton">Remove</span>');
$("td#Header_ProductDetail_ProductDetails, td#Header_ProductDetail_TechSpecs, td#Header_ProductDetail_ExtInfo").removeAttr("background");
$('#Header_ProductDetail_ProductDetails').siblings("td[width='90%']").remove();
$('img.vCSS_img_icon_free_shipping').replaceWith('<span class="freeshipping">This item qualifies for Free Shipping!</span>');
$('img[src="v/vspfiles/templates/volusion/images/buttons/btn_reviews_yes.gif"]').replaceWith('<span id="graybutton" class="smallbutton">Yes</span>');
$('img[src="v/vspfiles/templates/volusion/images/buttons/btn_reviews_no.gif"]').replaceWith('<span id="graybutton" class="smallbutton">No</span>');
$('img[src="v/vspfiles/templates/volusion/images/Icon_Help_Options.gif"]').replaceWith('<span class="optionshelp"><sup>?</sup></span>');
$('img.vCSS_img_line_group_features').remove();
$('img.vCSS_img_heading_history').after('<span class="title">Recently Viewed</span>').remove();
$("td").filter(function() { return $(this).html() === ' '; }).remove();
$('table.ReviewBox tbody tr td table tbody tr td i:contains("By:")').each(function(){
$(this).html($(this).html().split("By:").join(""));
});
$('input[type="checkbox"], input[type="radio"]').after("<span />");
$(function() {
if ($("div#ProductDetail_ProductDetails_div2 table tbody tr").text().trim() == '') {
$("div#ProductDetail_ProductDetails_div2").css("border", "0px");
$("div#ProductDetail_ProductDetails_div").css({'border-bottom-left-radius' : '5px', '-moz-border-bottom-left-radius' : '5px', '-webkit-border-bottom-left-radius' : '5px', 'border-bottom-right-radius' : '5px', '-moz-border-bottom-right-radius' : '5px', '-webkit-border-bottom-right-radius' : '5px'});
}
});
});
About half of that script works. Some of the remove functions and some of the replace functions work fine. But most of it does not.
I tried to test this on jsFiddle. It would work in IE8 but not IE6 & IE7, which is perfect. I just don’t understand why it wouldn’t work in my site. Would it make a difference if the JavaScript is inline or called in a file? Currently all of my JS is being called from files between the <head> tags. I can move or change anything except the jQuery. I cannot update the jQuery nor can I relocate it. What disturbs me even more, is that on my other server with the same files and the same jQuery, it works! But that does not help me, I need it to work on this server.
How to clear your browser’s cache:
http://www.wikihow.com/Clear-Your-Browser%27s-Cache
How to view the debugging console in IE:
http://msdn.microsoft.com/en-us/library/dd565625%28v=vs.85%29.aspx
Pressing F12 in IE should make the developers tools appear.
This question is fairly hard to answer provided the few details on the behaviors, hope this helps.