Develop Reference

Replace Javascript on-the-fly

this questions pops up again and again across the internet (even on SO), but I haven't found a satisfying solution to this problem:
How can we change/replace Javascript code in a running web application, without reloading the page?
Many people answer this with "you cannot, because it is impossible". Some experiments with IntelliJ IDEAs live edit plugin proves me that it is possible. But I don't want to be bound to an IDE for this feature. (Bonus: browser independent)
Here is what I tried:
add //# sourceURL=whatever.js to my dynamically loaded script
add folder to Chrome containing whatever.js
mapping the local whatever.js to the network whatever.js
changing code in either does not affect the web-page at all. In fact editing the network-side file results in a oddish "flashing" of the dev tools.
Please understand that I do not expect the changed JS to magically apply to the webpage once I change it, but I expect it to use the new code when the execution point is passed again.
Example:
Given a button that triggers 'alert(1);'
Change to 'alert(2);'
I expect the button to trigger 'alert(2);'
Having many dependencies and a huge script that is triggered pretty late in a workflow it is really a big problem for me to refresh the page, so I need to find a solution that works on-the-fly.

First of all: What you ask for is really tricky and you can find security problems if you allow this in your applications, anyway it is not impossible.
BUT if you want to achieve your example follow this steps:
Make a code snippet like this:
var message = "1"; // this must be a global variable!!!!
function showMessage() {
alert(message);
}
Given a button that triggers 'alert(1);'
Make button call a function ie: onclick='showMessage()'
Change to 'alert(2);'
I expect the button to trigger 'alert(2);'
Now it's easy, When you detect the event that implies to change the alert message to 2 you just need to change message value:
message = "2";
That's all.

Option 1: Livereload
I would say as long it's for develop reasons you can use livereload on your server.
Depends of your server type. I'm note big expert in apach, glassfish and other java's world stuff, but in world of JS (nodejs) this is a shorter way.
(link for npm-livereload)
Hack: You can handle static-files such as js, css with simple node.js server with built-in livereload.
Option 2: jRebel
I'm not sure about js but perhaps JRebel can handle this issue. Anyway it's a good addition to the develop process - at least it would make a java's "hot reload: for you.
Option 3: Monkey-patching
You can use monkey-patching techniques: Each function in js it's just a string, you can turn string -> function with new Function().
just like:
var foo = {
sum: function (a, b) {return a+b;}
}
//...
obj.sum = new Function(....) //Now you're replaced the original code
check this article about graceful way to do monkey-patching.
And small advertising of my lib for monkey-patching: monkey-punch
Option 4: Attach new tag
You can attach js files with:
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://somedomain.com/somescript";
$("head").append(s);
You're also able to remove dom elements (scripts, styles) and attach new at anytime.

Markup validation when page is generated with AngularJS

We have a single page application created using AngularJS. We'd like to validate markup of that application. The problem is that markup is mostly generated with script, so that if we pass source code to validator, the result is only partial.
Currently we're looking into testing the page in the following way.
Open the page with Selenium web automation library.
Do some actions.
Dump current HTML to file.
Process it with standalone validator.
It's quite time consuming to implement this flow, as we would need to hardcode all the ways to use an application, so I'd like to ask: is there any other ways to do it?

With AngularJS Your should NOT have to do validate every variation of your page as DOM changes with script in your Single Page Application as long as you stick with AngularJS programming model and stick to the following:-
Validate every HTML file/fragment.
These are Angular templates/partials OR any HTML files you may have (index.html).
Use grunt based html validator plugins like this so that grunt workflow can ensure that the HTML is valid even before it is committed in to your source code repository. Such plugins can validate HTML fragments.
Use built-in AngularJS directives to manipulate the DOM.
e.g. ngSwitch, ngView, ngIf etc. instead of any custom stuff using jQuery or other mechanism.
AngularJS already ensures a valid HTML DOM. That means your resulting HTML is always going to be valid.

Have you consider using Angular e2e:
http://docs.angularjs.org/guide/dev_guide.e2e-testing
This allows you access to get/validate elements from html like:
expect(element('#email').html()).toBe('something');
From Angular Documentation using jazmine:
describe('Buzz Client', function() {
it('should filter results', function() {
input('user').enter('jacksparrow');
element(':button').click();
expect(repeater('ul li').count()).toEqual(10);
input('filterText').enter('Bees');
expect(repeater('ul li').count()).toEqual(1);
});
});
Update 1
Then you can try something like:
https://github.com/peterjwest/html_validator/blob/master/demo.js

I call this GUI level Testing. Visual Studio has an excellent browser recording and playback tool, which allow a tester to create Automated tests which validate anything the tester wants.
Here's a video: https://onedrive.live.com/?cid=ae5cd7309cccc43c&id=AE5CD7309CCCC43C%21183&sff=1&authkey=%21ANqaLtCZbtJrImU&v=3
You'll need to have the Premium edition to do this. In addition, I've heard good reports about Selenium, in fact, MSFT themselves have endorsed it.

Reuse of javascript code with asp.net

I've recently taken over development of a website written in asp.net. Before taking this on, I have spent very little time with web applications. As I have no experience in this area, I am hesitant to criticise, but I feel like this website is very badly written.
Look at the following search results produced by visual studio:
\website\js\ADMIN_userprofile.js(715):function sendInvite() {
\website\js\ADMIN_userprofilePro.js(745):function sendInvite() {
\website\js\mycontactdetails.js(466):function sendInvite() {
\website\js\mycontactdetailspro.js(466):function sendInvite() {
\website\js\mycontactrequestspro.js(676):function sendInvite() {
\website\js\mycontacts.js(239):function sendInvite()
\website\js\mycontactspro.js(240):function sendInvite()
\website\js\mygroups.js(103):function sendInvite()
\website\js\myprofile.js(715):function sendInvite() {
\website\js\myprofilepro.js(745):function sendInvite() {
\website\js\search.js(55):function sendInvite() {
\website\js\searchpro.js(55):function sendInvite() {
\website\search.js(44):function sendInvite() {
Each of those functions are the same. someone has copied the whole block of code whenenever they feel like another page needs the sendInvite() functionality. In the related .aspx pages, there is usually a link to click on that calls the function, and also a couple of hidden popups called by the javascript to say things like "Are you sure you want to send an invite?" in a way that agrees with the rest of the site design.
Cloned code is terrible, and very difficult to maintain. However, I don't know how to go about making this nicer. Can I wrap all the functionality here - the javascript and the popup stuff - into one device which I can reference wherever needed? I've read about the use of .ascx pages for this (sparingly used in the source code I have inherited), but I don't know if its safe to use these with javascript included too.

Shudder
There is nothing worse than code duplicated all over the place.
The simplest thing to do is copy the function in to a single js file, delete the code from all of the other js files and make sure the new script file is included in any pages that call one of the functions which use it using the script tag in the HTML.

Try a module manager for javascript like
requireJS
curl
Then place your functions in a module and require that module in your pages.

Yeah man just take the method and put it in a .js file, pop it into a folder in your solution, and then in each .aspx page you need it, just import it:
<script type="text/javascript" src="<YOUR_LOCATION>"></script>

What is the best way to organize JS code in webapps where the main "meat" is still server side?

When building webapps with MVC web framworks like Django, Kohana, Rails and the like, I put together the application without JS-driven components initially, and then add them afterwards as "improvements" to the UI.
This approach leads to non-intrusive JS, but I don't have a good "standard" way of how to go about organizing the JS work. Most of the JS I write in apps like these are 10-30 line JQuery snippets that hook into some very specific part of the UI.
So far I often end up inlining these things together with the part of the UI they manage. This makes me feel dirty, I'd like to keep the JS code as organized as the python / php / ruby code, I'd like for it to be testable and I'd like for it to be reusable.
What is the best way to go about organizing JS code in a setup like this, where we're not building a full-blown JS client app, and the main meat is still server side?

I am also very interested in what other people have to say about this. The approach I've taken is to use object literal notation to store the bulk of the function, and store these in one file included on all pages (the library)
uiHelper = {
inputDefault:function(defaulttext){
// function to swap default text into input elements
},
loadSubSection:function(url){
// loads new page using ajax instead of refreshing page
},
makeSortable:function(){
// apply jQuery UI sortable properties to list and remove non javascript controls
}
}
Then I include a .js file on any page that needs to use the library that ties the elements on that page to the function in the library. I've tried to make each function as reuseable as possible and sometimes the event binding function on the page calls several of my library functions.
$(document).ready(function(){
$('#mybutton').live('click',uiHelper.loadSubSection);
//more complicated helper
$('#myotherbutton').live('click',function(){
uiHelper.doThisThing;
uiHelper.andThisThing;
});
});
edit: using jsDoc http://jsdoc.sourceforge.net/ notation for commenting for these functions can produce documentation for the 'library' and helps keep your code easy to read (functions split by comments).
The following question is along similar lines to your own - you should check it out...
Commonly accepted best practices around code organization in JavaScript

When dealing with JS code, you should first analyze whether it will be used right away when the page loads. If it's not used right away (meaning the user must do something to invoke it) you should package this into a JS file and include it later so the load time is perceived faster for the user. This means that anything that the user will sees should go first and JS related to the functionality should be imported near the end of the file.
Download this tool to analyze your website: http://getfirebug.com/
If the JS code is small enough, it should just be inline with the HTML.
Hope that helps a bit.

For quick little user interface things like that I put everything into a single javascript file that I include on every page. Then in the javascript file I check what exists on the page and run code accordingly. I might have this in UIMagic.js for example. I have jQuery, so excuse those jQuery-isms if they aren't familiar to you.
function setupMenuHover() {
if ($("li.menu").length) { // The page has a menu
$("li.menu").hover(function() { ... }, function() { ... });
}
}
$(setupMenuHover);
function setupFacebookWizbang() {
if (typeof FB != "undefined") { // The page has Facebook's Javascript API
...
}
}
$(setupFacebookWizbang);
I've found this to be a sane enough approach.

My preferred method is to store inline javascript in it's own file (so that I can edit it easily with syntax highlighting etc.), and then include it on the page by loading the contents directly:
'<script type="text/javascript">'+open('~/js/page-inline.js').read()+'</script>'
This may not perform well though, unless your templating library can cache this sort of thing.
With Django you might be able to just include the js file:
<script type="text/javascript">
{% include "js/page-inline.js" %}
</script>
Not sure if that caches the output.
If you are still worried about being 'dirty', then you could check out the following projects, which try to bridge the server/client side language mismatch:
http://pyjs.org/ (Python generating JavaScript)
http://code.google.com/webtoolkit/ (Java generating JavaScript)
http://nodejs.org/ (JavaScript all the way!)

Client-side Javascript code to strip bogus HTML from CKEditor

I believe this may be related to Need Pure/jQuery Javascript Solution For Cleaning Word HTML From Text Area
But in my case I am using CKEditor; however, before sending the data to the server (or after receiving it back) I'd like to strip out "junk" HTML tags and comments such as those that appear when pasting from recent (2007 or later) versions of Microsoft Office. Because the server-side here is a third-party application, I'd prefer to do this client side if I can. Yes, I am aware of the security risks of doing that; this is just meant to sanitize data in common use cases.
Are there any common techniques or existing libraries (especially jQuery-friendly) that can do this? Note, I am not looking to encode or strip all HTML, only the Office-related crud.

Did you try CKEditor built in Word clean up functionality?
It seems to be run automatically when using the "Paste From Word" dialog, but can also be used from your code.
I'm not an expert on CKEditor API, so there might be a more efficient or correct way of doing this, but this seems to work on the current release (3.3.1):
function cleanUp() {
if (!CKEDITOR.cleanWord) {
// since the filter is lazily loaded by the pastefromword plugin we need to add it ourselves.
// We use the same function as the callback for when the cleanup filter is loaded. Change the script path to the correct one
CKEDITOR.scriptLoader.load("../plugins/pastefromword/filter/default.js", cleanUp, null, false, true );
alert('loading script for the first usage');
} else { // The cleanWord is available for use
// change to the correct editor instance
var editor = CKEDITOR.instances.editor1;
// perform the clean up
var cleanedUpData = CKEDITOR.cleanWord(editor .getData(), editor );
// do something with the clean up
alert(cleanedUpData);
}
}
cleanUp();
If you're not happy with this clean up you can modify default.js for your clean up needs.
There are some configuration options available for the cleanup, check http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html (search for "pasteFromWord" options).
If you need something more advanced, but that will require a server access, I suggest you check WordOff (http://wordoff.org/). You might be able to build a proxy and jsonp wrapper around their service so you can use it from the client without a server installation.