How to reload a html page when your code changes

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 ar开发者_Go百科e 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.

---

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

---

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).

---

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

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

---

There's an automatic refresh-on-change tool for IE. It's called ReloadIt, and is available at http://reloadit.codeplex.com . Free.

Not an add-on to IE, but more of an "adjunct". It does not change the IE install, does not install a BHO or anything like that. So very low-impact installation.

You choose a URL that you'd like to auto-reload, and specify one or more directory or file paths to monitor for changes. Press F12 to start monitoring.

After you set it, minimize it. Then edit your content files. When you save, the page gets reloaded. like this:

There's no code you need to add to your solution. It works with jQuery, or mooTools, or whatever. It works with PHP or ASPNET or python. It works with IIS or Apache or any server technology. The only requirement is that the page be viewed in IE.

---

Follow the instructions in this README file and it will do something near to what you want:

Actually you can do exactly refresh the page if it has no errors if you use emacs as your text editor (i.e. command emacs to save the file as soon as it has no errors)

This maybe helpful: https://emacs.stackexchange.com/questions/12459/save-buffer-at-each-modification

You can also check this script:

Refresh-Develop

It works with firefox so you add the remote-control addon.

Then, use a bash script to run commands to the browser when the web directory changes.

So, in addition to this addon you need inotify-tools to watch the directory and netcat to talk to the browser when the directory changes.

Then, you can apply to any other code (maybe you use a .c file and you want to test it as soon as you save it in this case you will only need inotify and to modify the code from the README file)

---

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.

---

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

---

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.