Potential issue with jquery.load in IE 8 ?
I have started developing a website, which implements loading on demand of sections in the user profile using Jquery.load().
Have a look at: http://www.creativelunch.com/atesore/user/profile/rwap_software
This works fine in Opera, Google Chrome, Firefox.
However, in Internet Explorer v8 (including under the compatability mode), I get an "undefined" error when the .load() function ends
The section of code (in global.js) which causes the issue is:
//On Click Event
$("ul.userTagList li").live('click',function() {
var path = location.pathname;
var userProfile = 'user/profile';
var userTags=path.indexOf(userProfile); // Are we dealing with tags in user profile?
$("ul.userTagList li").removeClass("active"); //Remove any "active" class
loadContent($(this));
var relativePath=path.substr(0,userTags+userProfile.length);
var activeTagContent = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tag content
var activeTagContent_Parts=activeTagContent.split('-');
var activeTagContent_Name=activeTagContent_Parts[1];
var activeTab_Name=activeTagContent_Parts[0].substr(1);
var tabs=$(this).closest("#content").find("ul.ate_tabs li a");
$(tabs).each(function(){
if ($(this).attr("href")=='#tab-'+activeTab_Name)
{
var tabName=$(this).html();
var tabName_parts=tabName.split(' ('); // Remove any bracketed figures
var tabName=tabName_parts[0];
var breadcrumb = $(tabs).closest("#content").find('#tab_breadcrumb');
$(breadcrumb).html(tabName);
}
});
var breadcrumb = $(this).closest("#content").find('#tag_breadcrumb');
var tagName=$(this).find("a").html();
var tagName_parts=tagName.split(' ('); // Remove any bracketed figures
var tagName=tagName_parts[0];
$(breadcrumb).html(tagName);
$(breadcrumb).attr("href",relativePath + "/_" + activeTab_Name + '/_' + activeTagContent_Name);
$(activeTagContent).fadeIn(); //Fade in the active content
return false;
});
function loadContent(tab){
$(tab).addClass("active"); //Add "active" class to selected tab
$(".userContent").hide(); //Hide all tab content
var activeTag = $(tab).find("a").attr("href"); //Find the rel attribute value to identify the active tag content
var tag_history_array = activeTag.split('-');
var activeTab=tag_history_array[0].substr(1);
var tagName=tag_history_array[1];
var AjaxPage = $(tab).find("a").attr("rel"); //Find the rel attribute value to identify the active tag content
showLoading(activeTab);
$(activeTag).load(AjaxPage, hideLoading(activeTab));
$(activeTag).fadeIn(); //Fade in the active content
}
function showLoading(activeTab){
$('#loading-' + activeTab)
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
.css({height:"15px"})
};
//hide loading bar
function hideLoading(activeTab){
$('#loading-' + activeTab)
.fadeTo(1000, 0)
.css({height:"0px"});
};
This appears to work fine until the following section of Jquery v1.4.2 is called:
// Use insertBefore instead of appendChild to circumvent an IE6 bug.
// This arises when a base node is used (#2709).
head.insertBefore( script, head.firstChild );
head.removeChild( script );
Am I doing something amiss here, or is it a bug?
On another point, I am also perplexed as to why the following code does not work to show loading... with a symbol whilst the call is in operation:
<div id="loading-selling" class="hidden">
<img style="position:relative;left:52px;" src="<?=$relativePath?>themes/<?=$theme?>/img/loading_01.gif" >
Loading...
</div>
Under IE the loading image remains on screen despite the call to hideLoading('selling'). The text Loading.... quite rightly disappears - surely the image should also?
Rich
http://www.rwapservices.co.uk