Flash application losing state after displaced to another div by JavaScript

Question

Guys,

I've a simple flash application that does counting on button click. I load it in a page and a javaScript code does some DOM manipulation to move it from one div tag to another.

Problem: the state of the count is not preserved as the swf node is moved from one node to another.

What I did: 1. I simply get the node using javascript getElementbyId function and then once I get the source and destination div nodes then I use

destinationNode.appendChild(sourceNode); //javascript

This works well in Internet explorer, but it doesn't work in Chrome and Firefox.

1. So then I tried prototype library.

   node1 = $("destinationDIV"); node2 = $("sourceDIV"); //keeps the swf element //------------------------------------------Works | only IE //node1.replace(node2); //this works, only in IE node1.insert({'after':node2}); //this also works, also only in IE

sadly this works only in IE, not in Chrome, and Firefox. 3. I tried to clone the source node first and put cloned object to the destination div. Like:

var obj = Object.clone(node2); // prototype library
node1.insert({'after':obj});

but I got an error. That says Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3"...

my concern is not this error. I'm concerned with the fact that solution 1 and 2 are working in Internet Explorer not in Firefox and chrome.

Any body who knows any way to make flash remember it's state when it's moved from one div to another in firefox,chrome, and IE??

thanks

Answer 1

The problem here is probably the fact that you're really removing and inserting the flash file anew. If you had a container around the swf object, you could position it with CSS/JavaScript wherever, but I don't know a good way to preserve state while physically moving the DOM swf object.

Answer 2

As you already noted it looks like the swf gets reloaded every time you displace it. So you will have to manually keep track of the current state and in case there is a reload pick up from there. The way to do that is to use a LocalSharedObject aka "Flash Cookie":

http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/net/SharedObject.html

var my_so:SharedObject = SharedObject.getLocal("widgetState");
my_so.data.buttonClicks= currentClicks;
my_so.flush();

Whenever the app gets started you first check if there is already a LocalSharedObject with your data present and if yes you load your data from it:

var my_so:SharedObject = SharedObject.getLocal("widgetState");
if ( my_so.data.buttonClicks != null ) currentClicks = my_so.data.buttonClicks;