It does not appear that SWFObject works with AJAX. Please visit my website www.avoidharrypotter.com and click on one of the links at the top left to view an exclusive video. A modal window pops up with content served via AJAX and the SWFObject does not work.
two solutions: 1. if it's in a frame, it the swfobject code needs to reference the parent to get access to swfobject.js 2. you could just add a link to the SWFObject.js file into your http://www.avoidharrypotter.com/videos/potter.cfm page
I tried #2 and it is not working either. That was how I originally had it, actually. I left the changes for you to check out.
It is not in a frame. I am using an small AJAX script to create the modal box, which essentially opens a new page in a div element and the changes the display from hidden to show. So it is not in a frame.
The videos play when you visit the page directly but not when the page is opened into a modal box using AJAX. Please go to http://avoidharrypotter.com and click on a link in the top left.
I was getting 404's on the page directly yesterday, but now the videos are working when viewed stand alone
If your page stand alone is working, then there is something with thinbox which is stopping things working properly. When I click the link and look at the http traffic coming from the server, it never makes a call to get the .js file or any of the .swf files.
Perhaps you want to try thin/thickbox as iframe content rather than through AJAX?
I am watching the post action in Firebug as well. Originally, I placed the link to the swfobject.js on the main page because the modal box actually becomes one with the page. It seems like it should work, but your right, it's as though the script is never getting run and the div content is never being replaced.
Perhaps I will have to make a regular pop-up window, but I'd hate to do that. An iframe is hardly an option for me. Are you sure there is no way to make SWFObject and AJAX play together?
I have implemented AJAX and swfObject successfully together on plenty of projects. I believe it is a thin/thickbox issue specifically. Have you tried the http://www.avoidharrypotter.com/videos/potter.cfm content using the regular <object> / <embed> ? Does it work?
As you don't seem to be writing the page content dynamically, AJAX (as in it's proper definition of xmlhttp object request / response from the server) is not actually required. I know thickbox 3 can take iframe content and display it just like you want, but I am unsure about thinbox.
I know I am not giving you definitive answers here, but I think there are at least some directions to try.
///// UPDATE ////
It seems swfobjwect and thin/thickbox do not play well together. See this thread:
It looks like the only work around was to implement another flash embedding option such as the Adobe method, as there is some interfering code with swfObject and thickbox. I don't like steering people away from swfObject, but if you HAVE to implement thinbox, then I don't see another way...
Thanks for the update, sorry for the results. I do HAVE to implement a modal box, so I guess I can use the Adobe method. I may try UFO first, but I don't think it will be any different that SWFObject.
it seems I have run into the same issue. I am not using modal box, but a standard xmlhttprequest. My page loads fine pre-ajax, but when I retrieve that same page using xmlhttprequest, the player doesn't load, everything else loads fine.
I have tried putting the swfObject.js on both pages, but it isn't working. I would post a link, but it's is all on my dev machine right now and don't have any hosting worked out yet.
Did anybody get this to work? What are the special bits needed?
Again, to clarify, there is nothing wrong with AJAX and SWFObject. People seem to be getting confused with the differnce between javascript effects libraries and AJAX itself (xmlhttp request object to/fronm the server).
Below is a skeletal example reference for a reusable AJAX / SWFObject implementation.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>AJAX Example</title> <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript" language="javascript"> /* SWFObject / AJAX integration example written by Aran Rhee - 07.07.07 */
// Send server location full URL with any get params included // other things could happen in this helper function, but we are keeping it simple // and just setting the callback function 'setFlash'. // You could call makeHttpRequest() directly if you wanted
// Re-usable generic AJAX caller with return function as a param. // You can set xml or text as expected return type to pass // the correct result object into your callback function
function makeHttpRequest(url, callback_function, return_xml) { var http_request = false;
if (window.XMLHttpRequest) // Mozilla, Safari,... { http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) // IE { try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { //do nothing } } }
if (!http_request) { alert('Unfortunatelly you browser doesn\'t support this feature.'); return false; }
http_request.onreadystatechange = function() { if (http_request.readyState == 4) { if (http_request.status == 200) { if (return_xml) { eval(callback_function + '(http_request.responseXML)'); } else { eval(callback_function + '(http_request.responseText)'); } } else { alert('There was a problem with the request.(Code: ' + http_request.status + ')'); } } } http_request.open('GET', url, true); http_request.send(null); }
// Writes flash content to the screen using SWFObject. // Set whatever params and values you specifically need. // You could have multiple callback functions on the one page if required
function setFlash( loc ) { var so = new SWFObject(loc, "ajaxcontent", "728", "90", "8", "#ffffff"); so.write("flashcontent"); } </script> </head> <body> <div id="flashcontent">Flash content will be written here via AJAX return function</div> <p><a href="#" onclick="setRequest('http://someserver.com?param1=abc¶m2=123')">invoke AJAX call</a></p> </body> </html>
Thanks Aran, To help clear this up, I think what most people (myself anyway) are referring to when we say that swfobject isn't working across ajax is that if the entire swfobject is on another page the player doesn't come across. In my case getmp3.php?a=xyz&s=123 uses the swfobject to play music. I can't just use an xmlhttprequest to get that page because if I do, the player doesn't come across to the new containing page. What you have done above is ajax in that it gets data from another page, but you've placed the swfobject on the requesting page and are using ajax to only get and set params. I'm trying to get this to work in my environment, but it is not ideal.
Ok, I am starting to get a better understanding what you are doing. I am still unclear as to what you mean that "the 'player' doesn't come across". Are you saying that a relative reference to your .swf is not being found? If you have a totally new page being displayed, then you need a reference to the swfobject .js library on your new page, so that your function calls to cronstruct a new swfobect will actually work. Do you have an example page which we can see (it would help me see exactly what you are trying to achieve)?
Hi Aran, thanks for your help with this. I've stripped all my code to pretty much the bare bones, and put it all in one folder to ensure that their is no minor directory issues causing the problems, and this should make it easy to read. I have posted the two bare bones pages. the page that plays the music is at http://www.growid.com/demomusic/staticmp3.html the page that requests is at http://www.growid.com/demomusic/playerxmlhttp.html
As you can see, the staticmp3 has no problem playing the music, but the playerxmlhttp page does not ,it seems, run the javascript, or find the swf (I'm not sure exactly what the issue is).
the question i have is: why would you want to load an external HTML file that contains an embedded SWF when all you really need is the SWF's filename, path and params/variables? this data can be loaded from an XML file via xmlhttprequest and utilized by SWFObject in your existing page.
I agree with Philip (and that is what I was trying to show in my example above to you). I don't think it is valid to set the innerHTML of a div with the full source code including <html>, <head> etc. The idea with innerHtml is that you write just the content you need into the <div>
I can understand from my example why it would seem like overkill to load an external html file rather than just pass the params and variables, but the demo I provided was a striped down code of everything I have. Along with the player is a bunch of other content which gets built into the html page, and the html page is requested from a few different scripts.
Having said that, your code worked quite seemlessly, so maybe I just keep rewriting the same code (not effiencient for code management, but maybe better for user resouces).
In trying to get this working previously with xml variables, I was missing your swfVar_xyz step. That is a great help, so now I do have this working from the xml.
i'm not sure what you're trying to do with your project, but my understanding is that only page markup without javascript can be loaded from an external HTML file via xmlhttprequest.
when xmlhttprequest calls a page, it doesn't fire any of that page's javascript. therefore you can't possibly load any of that page's javascript-generated dynamic content, including swfobject instances.
the 'data' page contains one hard-coded sentence in the markup. when the page loads normally, javascript appends the markup with a second sentence.
when the same page is called via xmlhttprequest (aka ajax), the javascript in the data.html file doesn't fire.
this means any page content generated by javascript, including SWFs loaded via swfobject, will not be carried over to the page making the xmlhttprequest. this is not a swfobject issue, it's a limitation of xmlhttprequest and related browser & server technologies.
i hope that clears up any misunderstanding. please feel free to correct me (using examples) if i'm wrong! :)
note: it is possible to execute javascript contained in the body of a remote file, but it gets done after being imported by xmlhttprequest, and i'm not sure how cleanly it would work with DOM manipulation or scripts contained in the head section.
I was having some trouble with switching multiple Flash movies into one container (as you would switch content into a container with an XMLHttpRequest most of the time), but thanks to philip's script I was able to tinker out a solution. It may not be much, but if you're like me, even the most minor coding accomplishments feel good.
By declaring the local variable at the top, you can pass it through the getHttpObject function, when it is called from grabFile. I had some trouble passing it anywhere else, and because of the script flow it works out just fine.
In the XML, I just made a root node <videos>, and gave each video in my 'playlist' its own node, naming them accordingly.
All you have to do to call the right video is pass the variable in the link (here, it's 'bp'):