Tag Archives: Javascript

Table Drag and Drop JQuery plugin

I’ve been using JQuery for a while now and really agree with its tag line that it’s the “The Write Less, Do More, JavaScript Library”. We’ve also got this code for dragging and dropping table rows that has proved very popular, so it seemed natural to combine the two and wrap up the table drag and drop as a JQuery plugin. Continue reading Table Drag and Drop JQuery plugin

Dragging and dropping table rows in Javascript

Summary: This article tells you how to implement drag and drop for HTML tables in Javascript. You can download the source here and play with the demo here.

Updated: now copes with multiple tables on the same page, non-drag and non-drop rows (such as headers) and embedding form elements. Also see my jQuery plug-in which does much more. Continue reading Dragging and dropping table rows in Javascript

Confirming a URL in Javascript

This is a little tip that I discovered a while ago but which I’m always forgetting, so I thought I’d post it here where I woudn’t lose it! Sometimes you’ll have a link on a web page which actually does something to a database, deletes the current thing for example. In those circumstances you want to have some sort of “Are you sure?” confirmation.

Javascript has a confirm dialog that you can use, but because you can use the return value of a method to determine event bubbling, you can use this really neatly to give optional links as follows:

Click here to go to home page

And of course you can try it yourself: Click here to go to home page.

If you click OK, then the confirm returns true and the link is followed. If you click Cancel, then confirm returns false and the event isn’t bubbled up to the href handler and so the link isn’t followed and you stay on the same page.

Javascript debugging, Firefox and Drag and Drop

In one of my current projects I need to have a table of data that the user can reorder. A quick search of the internet doesn’t turn up any javascript howtos or frameworks that allow dragging and dropping of table rows, so I had to role my own. I’ve written an article about how to do it, here. Continue reading Javascript debugging, Firefox and Drag and Drop

Javascript Debug Utility

Note: See the May 2008 update at the bottom of this article.

One of the problems when writing JavaScript is that you don’t have a development environment with a debugger to find out what’s going on. For Microsoft platforms, there is the Microsoft Script Debugger which provides some help, but often people resort to just sprinkling alert("You are here") around the code to find out what’s going on. The problems with this approach are that you can’t easily switch them on and off without going through and commenting out individual calls; the fact that you get a dialog box up which needs to be accepted by the user can affect time-sensitive code, so you might not be able to debug it using this method; and finally it’s difficult to compare values from one alert to the next since the text just comes up in a dialog box.

Here we present three functions that allow you to put debug calls in your code and switch them on and off as needed. Continue reading Javascript Debug Utility