Executing SWFObject with Ajax reloads

Question

For my current project I am working on a home page that has a series of tabs above a content box that each execute an ajax script to load new content into the content box. However, some of these pages contain a flash object called with SWFObject and when the ajax script calls the page, the SWFObject javascript is not executed and I am left with the no flash support error message.

I have tried defining a function for each video call (short of just designing a single function and passing variables to it) and having the function be called as part of the ajax function but I am left with the same results.

Any ideas how to solve this? I am not opposed to using something other than SWFObject though I have been lead to believe it is the best solution currently. All help is sincerely appreciated.

Answer 1

edit: I misunderstood the question... let me reanswer:

The problem is when the content is returned the scripts aren't run at all.

Case A: You are in control of the pages content / javascript (which it sounds like)

You should provide a means of callback once those pages are loaded to start executing your SWFObject embeds.

it could look a little like this (on the page with flash)

function loaded()
{
    swfobject.embedSWF("myContent.swf", "flashContent", "300", "120", "9.0.0");
}

and on the shell page

//note the jquery dependency
$.post('url', function(data)
{
    $(myDiv).html(data);
    loaded();
});

Case B: You do not have control of those pages...

Some libraroies (jquery might be excluded) allow 'run scripts' as an option... I'm pretty sure they parse out the script tags and eval(...) them - I would strongly suggest against this, but it's worked for me in the past.

Answer 2

Ok, Skawful's response works great for me with a simple page however the Ajax script I am using from Dynamic Drive is mystifying me as to how to modify it and get the same functionality. I must admit I'm more of a server-side coder than client-side and javascript baffles me.

var bustcachevar=1 //bust potential caching of external pages after initial request?(1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

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)
    }
    if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

This is the ajax script. Its called in the links as

<a id="media" href="javascript:ajaxpage('media.asp','maincontent');" onclick="selector2010('media');">Media</a>

and the function on media.asp is loadFlash();