How to reload a html page when your code changes

Question

I remember watching a jquery demo by John Resig. He had a browser application that reloaded live while he was coding. I think he did not even have to save his code changes for this to happen ( see 3:40 in the video ).

This is the video: http://vimeo.com/116991

I find this really cool and think this can be really useful and fun while you are coding.

Do you know what application he was using? Do you know how this is done or might be done?

Update: This was suggested by Januz:

You could use XRefresh. It reloads everytime you save a file in your project's folder.

Seems to work fine.

Answer 1

Skúli - I don't have the time to watch the whole video but I think I know what you are after: the ability to refresh a web page automatically. This can be done for any number of reasons. You might want to implement a monitor, save content, avoid timeouts, etc.

While JQuery can be useful, the overall effect is achieved using Ajax. In ASP.NET, simply place a timer on the page and a matching Ajax update panel:

<asp:Timer ID="Timer1" runat="server" Interval="60000" ontick="Timer1_Tick" ></asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick"/>
    </Triggers>
</asp:UpdatePanel>

In the callback, you can save the state of the page (e.g. a document the user is working on) or refresh content in the update panel (there is no content shown in the panel here but I think you'll get the idea).

Answer 2

I tried this javascript code:

window.setInterval("if(document.hasFocus()===false)location.reload(true);",3000);

It works in firefox, I get a warning in IE and it doesn't work in chrome( document.hasFocus() is alway true )

Not a perfect solution, but it works, though not gracefully. The downside is that this code is in the solution itself. Using ajax that can be fixed.

Answer 3

I don't know what he uses, but I use ReloadEvery

Answer 4

You could use XRefresh. It reloads everytime you save a file in your project's folder.

Answer 5

You could also use a meta refresh to automatically reload the page:

<meta http-equiv="refresh" content="3" />

Answer 6

He's using a code editor with a preview window that automatically refreshes on changes to the code window. No Ajax magic!

Not sure exactly what editor he's using but I know CSSEdit can do this, there's probably plugins for various other editors out there.