This question follows up on Philip's post (http://pipwerks.com/lab/swfobject/#ajax)
Re: Ajax + SWFObject example

I am using a template installed in Google's Picasa to automatically create a flash photo album. It exports the photos, thumbnails, an swfobject.js file, an XML file with the details of each photograph, as well as an index.html page. The Index.html page loads the swfobject.js in the header (external js file in the same directory as index.html) and then runs

<script type="text/javascript">

var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "7", "#181818");

fo.addVariable("preloaderColor", "0xffffff");

fo.addVariable("xmlDataPath", "gallery.xml");

fo.write("flashcontent");

</script>

in the body of the document.

As per Philip's perfect description, I am trying to load this index.html into a div of my primary webpage. (to have several web galleries without reloading the page). My problem is, it loads the page, but I get a scripted error (scripted into the page by the template) saying that it looks as though flash is not installed. It does load the textual data, but not the SWF.

<div id="flashcontent">SimpleViewer requires Macromedia Flash.<a href="http://www.macromedia.com/go/getflashplayer/">Get Macromedia Flash.</a> If you have Flash installed, <a href="index.html?detectflash=false">click to view gallery</a></div>

Any thoughts on what I can do to get over this hump?

Might also be worth noting that (as per Philip's suggestion) it is using SWFobject to load the swf, and not xmlhttprequest. Data about the swf is not loaded via xmlhttprequest though.

See www.labelme.org/trev for my work in progress.

Many thanks in advance.

you have a couple of options.

1. replace your target DIV with an iframe and have the iframe load the index file. all the javascript in the index file will be executed as normal. easy-breezy.

or

2. load the SWF into the DIV dynamically using SWFObject. the question then becomes: where are you getting the SWF parameter data? (src, width/height, the addVariable values needed for the picasa gallery, etc.)

if you have a very short list of SWFs to load, you can store this data in a JavaScript array or JSON format, in the javascript itself. something like:


var swf = [];

swf[0] = {
src: "myfirstgallery.swf",
width: "550px",
height: "400px"
}

swf[1] = {
src: "mysecondgallery.swf",
width: "700px",
height: "250px"
}


(you could store this data in an external JS file if you want to keep your HTML file clean.)

then when you need to write the SWF, populate the SWFObject parameters with whichever variables will be changing from SWF to SWF:


function loadGallerySWF(swf){
var so = new SWFObject(swf.src, "viewer", swf.width, swf.height, "7", "#181818");
so.write("flashcontent");
}

loadGallerySWF(swf[0]);


in this case your index.html file isn't really needed. xmlhttprequest would only be needed if you're trying to get this data from an external XML or HTML file insteadof storing it in javascript.

the best solutions are usually the simplest solutions, so try and keep it simple! :)

- philip