CODEWITHSUNDEEP
javascripthtmlweb
aularon
aularon

Reputation: 11110

Reload updated java<script> code without fully reloading the html page

I am developing a single page web application, that has many different features and forms. When developing a deep (I mean something that is not on the home page) feature, I go through this cycle:

  1. develop the code, editing classes and functions
  2. refresh the whole page
  3. clicking all the way till I get to the part that I need to test (that adds up to about a minute sometimes)
  4. testing the new code
  5. back to the (1) code editor doing updates

doing about 15 minor edits, can take a frustrating 30 minutes of repeated reloading and clicking

Is there any plugin, piece of javascript, or method, that allows to reload the updated javascript without reloading everything, so one can skip the 2. and 3. from the cycle above and continue doing live tests?

If there's no such thing, I am planning on developing a little javascript plugin that will reload the scripts, and probably with socket.io connection to a backend node.js server that will watch the files for any updates and push the load events to the browser.

So, I am interested in any idea about this, any thing that I should take into consideration when writing the plugin.

Thanks : )

Upvotes: 6

Views: 13395

Answers (4)

Arnab Nath
Arnab Nath

Reputation: 1

Replace with dynamic script.

function LoadMyJs(scriptName) 
{
   var docHeadObj = document.getElementsByTagName("head")[0];
   var dynamicScript = document.createElement("script");
   dynamicScript.type = "text/javascript";
   dynamicScript.src = scriptName;
   docHeadObj.appendChild(dynamicScript);
}

Upvotes: 0

aularon
aularon

Reputation: 11110

Here's what I came up with: a Node.js module that watches for changes in .js & .coffee scripts, and pushes the changes to the browser upon editing the files.

  • It works standalone, even if you are developing on filesystem file:/// without using a web server.
  • It works with any framework, just launch the standalone script and point it to your js/ directory.
  • It has an express.js helper, that make it run using the same server instance.

It is as easy as

  1. adding a single line of <script> tag to your existing code, and
  2. running the live script, pointing it to the html root.

code: 🐱/etabits/live.js

Upvotes: 1

Asenar
Asenar

Reputation: 7030

That's may be not the best answer but for local developments I use that firefox plugins:

https://addons.mozilla.org/en-US/firefox/addon/auto-reload/

This reload the css, js or anything present in a directory

For dev which really needs to be remotely , I use that small js code you can adapt for reloading js.

function refreshCss(rule){

    if (rule == null)
         rule = /.*/;

    var links = document.getElementsByTagName("link");
    for(var i=0;i<links.length;i++)
    {

        if (!links[i].href.match(rule))
            continue;

        if (! links[i].href.match(/(.*)time=/)){
            if (links[i].href.match(/\?/))
                var glue = '&';
            else
                var glue = '?';
            links[i].href += glue+"time="+new Date().getTime();
        }
        else{
            links[i].href.replace(/time=\d+/, "time"+new Date().getTime());
        }
    }
    if (!no_refresh)
    {
        setTimeout(function(){refreshCss(rule)}, 5000);
    }

};

// and then call it  refreshCss("regex to match your css, or not"); var no_refresh=false;

Edit: this is a version with "setTimeout", but you can easily made a "keypress" version of it

Upvotes: 0

subZero
subZero

Reputation: 5186

You could do something like this.

function LoadMyJs(scriptName) {
   var docHeadObj = document.getElementsByTagName("head")[0];
   var dynamicScript = document.createElement("script");
   dynamicScript.type = "text/javascript";
   dynamicScript.src = scriptName;
   docHeadObj.appendChild(newScript);
}

Call the LoadMyJs function on page load

<body onLoad="LoadMyJs()">

Then reload with the click of a button (or from your console)

<input type="button" name="reloadjs" value="Reload JavaScript" onclick="LoadMyJs('my_live_loading_script.js')">

This could be simplified using e.g jQuery

Thanks to: http://www.philnicholas.com/2009/05/11/reloading-your-javascript-without-reloading-your-page/

Upvotes: 2

Related Questions