3
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>

        <!-- JQuery code -->
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        
        <!-- Script which refreshes each element every 5 seconds -->
        <script>
            setInterval(reloadElements, 5000);
            function reloadElements() {
                $('#refresh').load(location.href+' #refresh');
            }
        </script>
    </head>

    <body>
        <p id="refresh">
            This is some paragraph text. <br />
            
            <ul>
                <li> List item one. </li>
                <li> List item two. </li>
            </ul>
        </p>
    </body>
</html>

This HTML file will always reside locally on the client.

The whole reason I wrote this script was so that my page can automatically reflect changes made to the file (i.e. I shouldn't be required to manually refresh the page). I have a C++ application which writes to this HTML file (only changes the content of the <p id="refresh"> tag).

My test machine is running Windows XP 32 bit.

Behaviour on Google Chrome, Version 26.0.1410.64 m:

When I run Chrome with the --allow-file-access-from-files parameter and without any command line arguments and modified the .html file using a text editor, the changes did not get displayed on the browser.

Behaviour on Internet Explorer, Version 8.0.6001.18702, Mozilla Firefox, Version 20.0.1:

Modification of only the paragraph text works (i.e. the changes are reflected). Modifying the list elements or adding anything after the list doesn't get reflected.

Behaviour on JS Bin:

As expected, after opening the web page and modifying the .html file using a text editor, the changes were reflected on the browser when the 5 second interval expired.

I currently need only support Internet Explorer, Google Chrome and Mozilla Firefox.

Why is there this difference? What am I doing wrong? Is there a better way to achieve what I want?

PS: This happens to be my first web-page code.

UPDATE:

I fixed the Firefox and Internet Explorer issues thanks to the helpful suggestions of squint (see comments below). I basically put the contents of the <p> element in a separate .html file and I modified the JQuery load to load that file. Don't know how this makes a difference though.

Community
  • 1
  • 1
Anish Ramaswamy
  • 2,326
  • 3
  • 32
  • 63
  • You're requesting the entire page? That could have something to do with it. Also there shouldn't be any reason to add `#refresh` after the `location.href`. –  May 07 '13 at 05:49
  • @squint, Actually I don't want to refresh the entire page. Just dynamically reload only the `

    ` element. Is that possible?

     – Anish Ramaswamy May 07 '13 at 05:50
  • You should have your server return just the part that you want to load. But add a callback function to the `.load()` call to make sure that the response is being received. `$('#refresh').load(location.href, function(data) { console.log(data); });` *(You'll need to open your browser's developer tools to see the logging.)* –  May 07 '13 at 05:52
  • @squint, Oh I forgot to mention, the file is always going to reside locally. And yes, I will try that logging out now. – Anish Ramaswamy May 07 '13 at 05:57
  • @squint, Okay I fixed the issues in Firefox and Internet Explorer. I basically put the data into a separate file and I'm loading from there (still don't know how that makes a difference). Chrome is still the same. The log in Chrome displays only once after the first 5 second interval fires. – Anish Ramaswamy May 07 '13 at 06:23
  • @squint, In my computer, I had downloaded the JQuery code and was loading in locally. Chrome doesn't seem to like that I guess. So when I modified the code to load the JQuery code from their website, the refresh log kept displaying every 5 seconds. Problem is, the log doesn't display the changed contents. It always displays the original contents. In the debugger, I tried disabling the cache as well. – Anish Ramaswamy May 07 '13 at 06:44
  • Not sure what the issue would be then. Maybe there's some useful information in the Network panel of the dev tools. –  May 07 '13 at 10:45

1 Answers1

0

I think you missed document.ready

<script>
$(document).ready(function(){  
    setInterval(reloadElements, 5000);
    function reloadElements() {
        $('#refresh').load(location.href+' #refresh');
    }
});
</script>

document.ready makes sure your code is executed only after the elements in the document is ready.

nhahtdh
  • 55,989
  • 15
  • 126
  • 162
bipen
  • 36,319
  • 9
  • 49
  • 62
  • The code is running asynchronously in a `setInterval`. There's no reason to use `.ready()`. –  May 07 '13 at 05:39
  • Thank you for your answer :) I had originally done this, but as @squint pointed out, I found this was not necessary. – Anish Ramaswamy May 07 '13 at 05:49