How do I use externalInterface to allow Flash to call javascript to update a value on the screen?

Question

I have a Flash movie that is embeded in a PHP page. The PHP page displays a value to the user (the number of images they have uploaded). When the user uploads a new image I want the value on the PHP page to reflect the change without refreshing the page.

This value is retrieved from database using MySQL. So heres what Ive done so far -

On the PHP page where I want to show the value I have a div

<div id="content_info"><script type="text/javascript" src="getInfo.php?group= <?php echo($groupid); ?> "></script></div>

This calls an external PHP file that queries the database and outputs the result like this

Header("content-type: application/x-javascript");
//do the query with PHP and get $number and then output
echo "document.write(\" (".$number.")\")";

When the page loads for the first time the correct number shows in the div and so all works fine. The next step is to call something to update the contents of this div when the value changes. So I will set up externalInterface in flash to call a javascript function to do this.

This is where Im stuck, I want to be able to do something like this -

function ReplaceContentInContainer(id) {
var container = document.getElementById(id);
container.innerHTML = getInfo.php?type=new&group= <?php echo($groupid) ?>;
}

and call this by

ReplaceContentInContainer(content_info)

I realise this isnt going to work but can anyone show me how to get this result?

many thanks

Answer 1

group= <?php echo($groupid); ?> will be executed only when PHP creates the page. You should store that value inside a variable in the javascript. See if this works.

<div id="scriptDiv">
    <script type="text/javascript">
    <!-- store the group id -->
        var groupID = <?php echo($groupid); ?>;
        function getGroupID()
        {
           return groupID;
        }
        function updateValue(value)
        {
           document.getElementById("content_info").innerHTML = value;
        }
    </script>
    <div id="content_info">
       <!-- for initial value -->
       <script type="text/javascript" 
            src="getInfo.php?group= <?php echo($groupid); ?> ">
       </script>
    </div>
</div>

Now you can use flash's URLLoader:

var ldr:URLLoader = new URLLoader();
var gid:String = ExternalInterface.call("getGroupID");
var req:URLRequest = new URLRequest("getInfo.php");
req.data = {type:"new", group:gid};
ldr.addEventListener(Event.COMPLETE, onLoad);
ldr.addEventListener(IOErrorEvent.IO_ERROR, onError);
ldr.load(req);

private function onLoad(e:Event):void
{
    var data:String = URLLoader(e.target).data;
    ExternalInterface.call("updateValue", data);
}
private function onError(e:IOErrorEvent):void
{
    trace("ioError");
}