Making jQuery selection in IE on html added via .load ()
Scenario: I am using jQuery to lazy load some html and change the relative href attributes of all anchors to absolute links.
The download function adds html to all browsers.
The URL rewriting feature works on the original DOM in all browsers.
But
In IE7, IE8, I cannot run the same function on the new lazy loaded html in the DOM.
//lazy load a part of a file
$(document).ready(function() {
$('#tab1-cont')
.load('/web_Content.htm #tab1-cont');
return false;
});
//convert relative links to absolute links
$("#tab1-cont a[href^=/]").each(function() {
var hrefValue = $(this).attr("href");
$(this)
.attr("href", "http://www.web.org" + hrefValue)
.css('border', 'solid 1px green');
return false;
});
I think my question is, why do we need IE to select DOM that is lazy loaded with jQuery?
This is my first post. Be careful: -)
Thanks,
Joel
a source to share
If you've ever wanted to lazy load some HTML using jquery.load (), you need to know that IE and FF do not treat relative HREFs the same way. IE adds the ghost domain to the relative url (to lazy loaded html).
As a result, if you load a DIV of content full of HREFs, you cannot count on using $ (a [href ^ = /]) to find all the relative HREFs. IE won't have.
So I wrote this:
(Bear with me, I'm a CSS guy who does some jQuery. I know this can be written MORE more elegantly. Can anyone help me on this?)
$('.footer-wrap').ready(function() {
$('.tab1-cont').load('/web_Content.htm .tab1-cont');
return false;
});
$(".footer-wrap").hover(function() {
//Step 1
//IE seems to add a ghost domain to lazy loaded html. In my case, "site.heritage" is the domain, so IE added to lazy loaded href URL.
//So I sniff for "site" in the URL
$(".footer-wrap a[href*=site]")
//on all results
.each(function() {
//clean up the ghost domain by getting the href and replacing "http://site.web.org" with nothing
var hrefValue = $(this).attr("href").replace('http://site1.web.org', '').replace('http://site2.web.org', '').replace('http://site.web.org', '');
//add the proper domain to the clean relative href URL
$(this).attr("href", "http://www.web.org" + hrefValue);
});
//Step 2
//FF just needs this to make a relative url into an absolute URL because it treats lazy loaded html like regular html.
$(".footer-wrap a[href^=/]")
.each(function() {
var hrefValue = $(this).attr("href");
$(this).attr("href", "http://www.web.org" + hrefValue);
});
});
Perhaps lazy loaded HREFs in IE don't act this way for all people all the time ... and I just found some niche circumstance. I dont know. Hope this HREF post saves a little.
a source to share
Have you tried using your transformation logic as a callback for load
?
$(document).ready(function() {
$('#tab1-cont')
.load('/HeritageFoundation_Content.htm #tab1-cont', function(html){
$('a[href^=/]', html).each(function(){
var hrefValue = $(this).attr("href");
$(this)
.attr("href", "http://www.heritage.org" + hrefValue)
.css('border', 'solid 1px green');
return false;
});
});
return false;
});
a source to share