Reloading an HTML element with a Javascript function

Question

I have a flash object embedded inside a DIV. Now I want to use a link('a' tag) above that div for the user to be able to reload that flash dialer, or more specifically the div tag it is contained in(I cannot change the flash file in any way).

I've tried using this JS function below, but it does not work(does not reload the div and contents when hitting the 'reload' link.

<div class="userProfile">
<script type="text/javascript">
     function refreshDialer(){
             document.getElementById("dialerDiv1").contentWindow.location.reload(true);
            }
</script>
<a href="javascript: refreshDialer()">Reload</a>
<div id="dialerDiv1">
    <embed type="application/x-shockwave-flash" wmode="opaque"                     
            src="http://dummysite.com"
            width="301"
            height="401"
            id="popUpSwf"
            name="popUpSwf"
            quality="high"
            border="none"
            allowscriptaccess="always"
                            pluginspage="http://www.adobe.com/go/getflashplayer"
            scale="noscale"
            menu="false"
            flashvars="#" />
</div>
</div>

What am I doing wrong here?

Thanks

Answer 1

Try this:

function refreshDialer(){
   //alert("In function");
   var container = document.getElementById("dialerDiv1");
   var content = container.innerHTML;
   //alert(content);
   container.innerHTML= content;
}

In action using youtube link as example.

Answer 2

You can, but the way you have used is wrong. When you want to reload something, you can just append a search query, so that it refreshes the source.

For Eg., when there is a frequently changing image (say captcha) and you wanna load it again, without refreshing the browser, you can do this way:

Initial Code:

<img src="captcha.png" alt="captcha" />

Refreshed Code:

<img src="captcha.png?1" alt="captcha" />

So, the same technique can be used in your page too. So the DIV's ID is 'dialerDiv1' right, for that, if you use jQuery, you can refresh this way:

function refreshDialer()
{
    var d = new Date();
    document.getElementByTagName('embed')[0].setAttribute('src',  + document.getElementByTagName('embed')[0].getAttribute('src') + d.getMilliseconds());
}

Or if you are not using jQuery, you need to use the setAttribute() function this way:

function refreshDialer()
{
    var d = new Date();
    $('#dialerDiv1 embed').attr('src', $('#dialerDiv1 embed').attr('src') + d.getMilliseconds());
}

Simple. Hope this helps.