Auto reload/refresh page if html changed

When you are twiddling css and constantly tabbing between your editor and browsers, refreshing the browrser can become a chore.

So let’s do some micro-efficiency-dev-process-hacking.

I threw together a quick javascript library that will auto reload the page you are working on IF the html has changed in anyway.

html-crc-reload

Simply include the .js file in your page.
You’ll need to ensure your page references jQuery and that it’s sitting on a web server.

The script will ajax poll itself, check the crc and if different, reload the page.

I develop with lots of side by side windows on a large screen.
This util allows me to stay in the editor window yet see the page refresh when needed.

UPDATE – 2013-05-04

There have been quite a few developments in auto reloading since I posted this.

Firebug, Firefox dev tools and Chrome allow for some aspect of in-page editing (not locally persisted yet).

Here are a bunch of posts on the subject:

I’m going to give the Sublime Text + LiveReload a go since Sublime Text is the pretty damn awesome.

A paid app called Live reload looks pretty cool. Although I haven’t tried it.
And they even talk about other options if it’s not your cup of tea

And Sam Saffron (a developer of Discourse) also touches on the subject

Advertisements

12 thoughts on “Auto reload/refresh page if html changed

  1. You shouldnt need to change the data type. As long as the php alters the final html in some way, then the script will reload the page.

    It’s not really a script that detects sever side changes.

    Usually tho, a server side change will affect the rendered html.

  2. Hmmm…I may have narrowed down the problem. I toyed around with the exact source code that I downloaded. It works on my local machine if I have the files stored locally, but when I place them on our linux box and hit the IP, it doesn’t refresh. Any ideas?

  3. More information: When I looked at the content that GET commands returned, the data doesn’t actually reflect the changes made on the server. Instead, it just shows the same data as in the page.

    • are you sure the html is changing?

      could php be caching the html?

      The lib work with my .net projects. It should be agnostic to the platform anyways. It’s all client side

  4. Hi, I would love to implement this on a project that already has some JS in it. My page uses JS to modify inline styles (animation) and I think it’s causing this script to always detect a change and constantly refresh. Do you have any suggestions how would I go about doing this?

    Thanks
    -Jordan

    • Hmm, any alteration to the html would changes it’s crc and will force a refresh.
      The script is just something simple I threw together to stop an annoyance.

      Sounds like you might need something a bit more different.

      There’s been a bunch of cool new reloading techniques/apps/plugins since this was written.

      I’ll update the post with a bunch of links that might help 🙂

      • That would be wonderful! I’d love to see some similar scripts people have made around this concept. I have been poking around the internet for something like this, but all solutions I’ve come across are for local-development and do not incorporate much customization without rewriting much of the core. What I’m specifically in need of is a script that detects if any images have been added or removed to an image gallery (kiosk) page, and refresh if needed. If I can find something that’s close, I’ll hopefully be able to modify some parameters and be good to go.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s