Bug #1344

Replace prototype javascript code with jQuery

Added by Scott Ullrich over 8 years ago. Updated over 3 years ago.

Very Low
Web Interface
Target version:
Start date:
Due date:
% Done:


Estimated time:
Affected Version:
Affected Architecture:


In light of this announcement!/usejquery/statuses/45924060558925825 and due to the steam building behind the jQuery project it would be in our best interest to replace prototype with jQuery for 2.1 or beyond.


#2 Updated by Scott Ullrich almost 8 years ago

Possible on / off / service buttons:

#3 Updated by G D almost 8 years ago

For log/state/etc... tables, I would highly recommend the DataTables jQuery plugin ( ). I have used it extensively and it has great performance and can enable really useful additional features such as per column filtering as shown in this example:
An additional use for DataTables, when combined with jQueryUI as shown here ( ) is to allow drag and drop row re-ordering. This would allow this to be used for the firewall filters as well if desirable.

On the subject of jQueryUI, the tab element could be used as shown here:
And depending on how the different form elements were built within the tabs, a single apply/save button per section could be used above the tabs to allow going back and forth between tabs before saving or applying the settings of the actual section.

#4 Updated by Scott Ullrich almost 8 years ago

Another alerting jQuery plugin:

#5 Updated by Warren Baker almost 8 years ago

Also another notification bar called foobar - which is pretty neat.
Then there is also which can be used for event notifications. Possibly a nice addition to certain widgets or # of fw log hits etc.

Note: I havent looked at the licensing of the above.

#6 Updated by G D almost 8 years ago

Other Growl style notifications:
Last update: 2011-01-16
License: MIT & GPL
Notes: A neat builtin feature of jGrowl is detection of multiple existing alerts and the automatic display of a "Close All" option.
jQuery Purr
URL: (Shows existing object turned into alert) (More advanced example)
Last update: 2008-08-15
License: MIT
Notes: This takes a different approach by turning an (existing) object into a notification instead of building the notification based on a template.
jwNotify (jQuery HTML5 Desktop Notification)
Last update: 2011-05-15
License: CC0 (Public Domain Dedication)
Notes: I haven't pondered desktop notifications for pfSense before, but this would allow them in supported browsers.

@Warren Baker, thank you I had forgotten to look at licensing!
- DataTables is dual licensed under the GPL v2 license or a BSD (3-point) license

#7 Updated by Scott Ullrich almost 8 years ago

2.0 has Growl support already. Might be nice to use the jGrowl deal.

#8 Updated by Scott Ullrich almost 8 years ago

Neat tool for generating network maps!?

#9 Updated by Warren Baker almost 8 years ago

Progress bar replacement? for the demo - also BSD licensed.

Actually System->Firmware->Manual Upload needs some progress bar love to at least give the end user some form of feedback.

#10 Updated by G D almost 8 years ago

jQuery UI Core has a progress bar builtin:

It is easy to control, is built in to jQuery UI, and can be customized nicely as well. The one thing worth noting is that if you are using the animated background fill image feature, where say the bar stops at 50%, but the 50% that is filled has an animation to it, you have to manually generate a different animated image if you do not like the default scrolling orange diagonal lines. The Theme Roller does not yet generate this image. It is however simple to modify that image or make your own if desired, but it is worth noting that is one extra step if you use that feature. The progress bar animates very nicely and works very well even without enabling that.

#12 Updated by G D almost 8 years ago

I wanted an "enhanced" multi select box for something I was working on and although Chosen looks absolutely brilliant, I did not like the manner in which it worked with multi selects (social network tag style). I found another plugin which takes a completely different approach which I am more accustomed to with the transfer of options from one area to another:
The reasons this one is handy for my particular case are that it is searchable for very long lists and allows you to visualize both selected and unselected elements side by side. It also allows click selecting or drag and drop selecting.

#13 Updated by Scott Ullrich almost 8 years ago

Nice javascript spinner

#14 Updated by Warren Baker almost 8 years ago

Bootstrap, a nice framework from Twitter which has a number of some quite nice features

#16 Updated by Warren Baker over 7 years ago

Nice Pagify jQuery plugin

#17 Updated by Warren Baker over 7 years ago

And another notification plugin - looks neat

#18 Updated by Chris Buechler over 3 years ago

  • Status changed from New to Resolved
  • Target version deleted (Future)

Also available in: Atom PDF