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

Playmaker · Accepted Answer · 2012-06-06 11:46:11Z

8

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.

edited Jun 6, 2012 at 11:46

answered Jun 6, 2012 at 11:29

Playmaker

1,4561 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DextrousDave Over a year ago

Hi. Thanks for your answer, but it does not work. Any other suggestions?

Playmaker Over a year ago

Sorry forgot to post the link. JSFiddle of above code in action. Also just remove the comments (//) out of the alerts and see whether there is a problem in code or calling of the function.

Playmaker Over a year ago

Also you can use removeChild and addChild methods

DextrousDave Over a year ago

Sweet man, thanks. This is exactly what I was looking for. "Also you can use removeChild and addChild methods". What does that do and how do I use it?

Playmaker Over a year ago

You are welcome :). Using javascript you could set the function to remove the <embeded> element from the parent div and then using add/appendChild, add another/same element again. Simiar to the clone suggestion by Mr.Praveen Kumar

Praveen Kumar Purushothaman · Accepted Answer · 2012-06-06 11:22:05Z

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.

answered Jun 6, 2012 at 11:22

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

2 Comments

DextrousDave Over a year ago

Awesome, thanks, it helps. But what if I want to reload the whole flash object ( as it would reload with the whole page when hitting f5) and not just the 'src'?

Praveen Kumar Purushothaman Over a year ago

@DextrousDave, yeah, you can do that. Just make a clone and then remove the original. var clone = $('#dialerDiv1 embed').clone(); $('#dialerDiv1 embed').remove(); $('#dialerDiv1').append(clone);

Collectives™ on Stack Overflow

Reloading an HTML element with a Javascript function

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related