PDA

View Full Version : I want a script to run on return from AJAX function



shocker
07-22-2007, 02:35 PM
1) Script Name: Dynamic AJAX Content
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem:

My problem involves AJAX, IE6, transparent png and in a away a javascript called sleight.js.

The sleight.js script is used to fix IE6 inability to handle transparent pngs. so the sleight.js script is included on the page and works fine. Under most circumstances.

this is the script for reference:

/
**********************************************************
Sleight
(c) 2001, Aaron Boodman
http://www.youngpup.net
*********************************************************/

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent)
{
// ******* see this line *****
document.writeln('<style type="text/css">img { visibility:hidden; } </style>');

window.attachEvent("onload", fnLoadPngs);
}

function fnLoadPngs()
{
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);

for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--)
{
if (itsAllGood && img.src.match(/\.png$/i) != null)
{
var src = img.src;
var div = document.createElement("DIV");
div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizing='scale')"
div.style.width = img.width + "px";
div.style.height = img.height + "px";
img.replaceNode(div);
}
img.style.visibility = "visible";
}
}




The problem arises after the page is loaded and a link calling the ajax script runs. The content that is being included has img tags. The content is retrieve successfully, but the images don't display. They don't display because of the sleight script (of course without this script the images display, but png's transparency will not be rendered in IE6).

So my idea of a solution was to add a call to the sleight scipt's fnLoadPngs() at the end of the ajaxpage() function (see snippet below). The code runs but the images are still hidden. Running "javascript:fnLoadPngs()" from the address bar will display the images, so why wont the same thing work when calling the fnLoadPngs fromt he ajaxpage()?



function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false

page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null);

// add sleight function to process pngs and display imgs after request

fnLoadPngs();
}


I figured that maybe the fnLoadPngs() at the end of the ajaxpage() was running before the content was returned. So how to do I determine it the contents are returned before calling the fnLoadPngs()?

I hope someone can give me some insight into doing this.

s.ali

jscheuer1
07-22-2007, 06:17 PM
You could use the type of scheme outlined here:

http://www.dynamicdrive.com/forums/showthread.php?t=13003

But a much simpler solution might be just to run fnLoadPngs() onload of the images in the Ajax added content. That is if you have access to those pages (you should, Ajax generally doesn't work cross domain):


<img src="some.png" onload="fnLoadPngs();">

untested.