Enabling refreshing for specific html elements only

ajax, html, javascript

Solution

Try this:

function reload(){
    var container = document.getElementById("yourDiv");
    var content = container.innerHTML;
    container.innerHTML= content; 
    
   //this line is to watch the result in console , you can remove it later 
    console.log("Refreshed"); 
}

<a href="javascript: reload()">Click to Reload</a>
    <div id="yourDiv">The content that you want to refresh/reload</div>

Hope it works. Let me know

Problem

I would like to know how I can only refresh a specific element in my website, instead of the whole web page? The element I'm talking about is a flash application that loads quite slow and may experience connection timeouts. I want to enable the user to only refresh that element/falsh app. How do i do that? Below I have an Ajax function that updates an HTML element but not sure how to apply it to my situation. ``` <head> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", "ajax_info.txt", true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"> <h2>Let AJAX change this text</h2> </div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> ```

Original source