Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Enabling refreshing for specific html elements only

Tags:

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>
like image 304
Dexter Schneider Avatar asked May 31 '12 21:05

Dexter Schneider


1 Answers

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

like image 78
DextrousDave Avatar answered Dec 09 '22 19:12

DextrousDave