We Keep Coding

JavaScript framework for building out a dynamic but server-side driven frontend

I am looking at building a small app that is more or less several nested lists, and selecting various items in each list will filter the contents of the other nested lists.
List One
Apple
Phone
iPhone
Computer
Macbook Air
Samsung
Phone
Galaxy S
List Two
Best Buy
Ann Arbor, MI
Chicago, IL
Walmart
Lansing, MI
If a user Clicks on "Apple > Phone", the server will find the associated entiries in list Two for, and update List Two to show only "Best Buy" (assuming Best Buy is the only store selling Phones made by Apple)
My question, is does anyone have a recommendation for what Front end JS library I should use to build this out? This is going to be alot of updating the DOM (the lists) based on AJAX JSON responses from the server.
I took a look at KnockoutJS but things seemed to get messy trying to create a viewModel for each list, and updating it via the KnockoutJS mappings library.
I was thinking about simply using jQuery but Im not a huge fan of building out large sections of the DOM with it (it seems to get ugly quickly).
One thing I would like to avoid (and why I was looking at KnockoutJS) is I dont like writing markup in code. I like the idea of maintaining my Markup in the "HTML", and "binding" the JS data to these elements through a framework.
Also, I hope to use jQuery for all the visual "fluff", event binding, etc.
Thanks

I ended up settling on Backbone.js [1]
It seems a bit more flexible than Knockout.js in terms of the bindings. I am using Backbone supported JS Templates for building out each list level. This has required a bit of code, but Backbone is very flexible (thus the bit of code). Im sure this is possible in many other JS frameworks, but I think i've been able to make more progress w Backbone is I dont need a deep understanding of the framework/API/intricacies to make it work - the(my) code may be more verbose, but because of this its easier to piece together how everything works.
[1] http://backbonejs.org/

This is more of a partial answer, trying to tackle the concept of "maintaining...Markup in the 'HTML'". I would create a generic menu item in the HTML that can be the template for each menu item, like so:
<li id="menuItemTemplate" class="menuItem">
<span class="menuItemText"></span>
<ul class="submenu"></ul>
</li>
This would not be in a visible place on your page; it would simply be the HTML that gets inserted for each menu item. Then, when you go to add menu items, your JavaScript would be in charge of adding as many menuItem elements as you needed in your list. As far as HTML manipulation, JavaScript would only need to do things like add id or class attributes to organize or style your data, as well as add the text content of each item. A sample implementation might look like this (I love jQuery):
function loadMenuItem(text, parentId) {
// Grab the template
var newItemHtml = $("#menuItemTemplate")[0];
// Set its id to something unique
$(newItemHtml).attr("id", getNextId());
// Set the text
$(newItemHtml).find("span.menuItemText").html(text);
// Put it in the clicked menu
$(parentId + "ul.submenu").append( newItemHtml );
}
In the end, I won't be programming your project, though. I can only give you my preference. If this is going to take a good amount of time, I'd say that the best thing for you to do is to try out all of the frameworks that sound interesting (on a small scale, obviously) to get a general feeling for how you like developing DOM-transforming apps in each one. That'll give you a better idea of which you'll like more as well as introduce you to different frameworks.

Not a direct answer to the question - still it is worth to take a look at Kendo UI MVVM
MVVM using Kendo UI in three simple steps
Kendo UI Web MVVM
Understanding MVVM – A Guide For JavaScript Developers
MVVM in Kendo UI Walkthrough
Build Single Page Apps – Part 7 – MVVM and KnockoutJS

Which one is considered the canonical jQuery plug-in for table

I'm looking for a plug-in to present a table of data in a HTML page. Data is coming from Ajax as XML or JSON. Requirements are fairly standard:
Plug is supported, with a live community
Table binds to data, or a mechanism to fill table with data.
Columns are sortable with the standard UI
Support for filters
Support for search (assisted search)
Preferably, table looks good by default without any change. Able to customize
every aspect of the table
Support interaction. e.g. Mouse Hover or Click
Customizable.
Paging
Scroll bars
Overall I think these are very basic requirements. This question also fold another question: how do you choose a plug-in? Looking at the jQuery plugin page, shows there are 19 pages of plugins, with names such as "Yet another table plug-in".
I don't a "Yet Another ...". I'm looking for the canonical plug-in. The one that "everyone is using", which has live community, people to consult with, reasonable documentation (mainly examples), and bug fixes.
Googl'ing for 'jquery table plug-in' yields 70,000 articles, but I cannot identify any plug-in has multiple references.
Please also advise about a general strategy how do you pick a plug-in. Which web site to you go? Which blogs do you follow? etc. Down the road I'll have to choose a charting plugin (although there, there seems to be two main plug-ins that stands up: Flot and jQuery Google chart).

I don't believe that there is an ultimate strategy to find exactly the plugin you need.
At least not without trying different options. Usually i limit the selection by what a see and read about a plugin (looking at exactly the things you mention: is there a good documentation? are there demos? is it still supported?), but in the end there's no way around trying out.
That said there are two plugins i used, which both do a very decent job, though i never used them for processing json-responses, only for making existing tables more dynamic and user-friendly. But both should do what you want.
http://www.datatables.net/usage/server-side
http://tablesorter.com/docs/example-ajax.html
Lately i prefer datatables as i find the plugin easier to configure and better looking by default. (And as i use jquery-ui already i really appreciate the support for themeroller).
But i guess in the end the choice is pretty subjective.

I would recommend you jqGrid. It meets all of your requirements.

Display tabs like FireFox's on my website

I want to implement with jQuery a tabbed interface for my website (like the firefox ones). They should also be able to be moved like the ones FireFox has.
If anyone knows of an already written library, please give me a link.

If you're already using jQuery, the jQuery UI Tabs has a sortable option for this.
Checkout the other demos for all the widgets there as well...in most cases it's not worth it to include the jQuery UI library for any 1 widget or effect...but if you can make use of a few of them, it's a nice library to work with. Of course there are alternatives out there, just throwing this as the simple/configurable option.
As a side note, it is jQuery UI....style it like you want.

ExtJS is more suitable for such interfaces. In the process of trying it out you will find many more amazing possibilities that it opens up. Also, it is very well written and a pleasure to work with.

How can I make an HTML table sortable with javascript without loading data via AJAX?

How can I make a table sortable using javascript without loading data via AJAX? More specifically, I'm looking for a solution that gives me the following:
Works on a plain old HTML table
Makes columns sortable using a natural comparison
Is agnostic of server-side technology (should be portable regardless of whether the tables are being rendered by JSP, PHP, etc)
Implemented preferably as an extension to JQuery, which I'm already using in the specific project I'd like to immediately apply this to. I'm open to suggestions involving another javascript framework such as YUI, but it will need to play nice with JQuery.
What I'm not looking for:
A solution which requires me to populate the data via an AJAX call. I'd like to apply this in a project that has a number of plain old HTML tables for things like search results that I'd like to quickly make sortable without rewriting any server-side code.
Paging.
Filtering.
The ability to specify arbitrary comparison logic.
I'm purposefully omitting our technology stack for the specific project I'm working on for now, but will include it if people feel that it is absolutely necessary. Again, I'm most interested in solutions that don't involve anything on the server. There are a ton of projects written in all sorts of languages that could use a little love in this area.
Regarding the issue of similar, existing questions on Stack Overflow
I've done some poking around, and the closest question I can find to mine is this one. My requirements are a little different, however, and so I decided to ask a new question.

The jquery plugin tablesorter works very nicely.

Tablesorter is a jQuery plugin which works similar to sortable.js, turning a normal HTML table into a sortable one.

Updated link (note this is not https://github.com/SortableJS/Sortable):
Try sortable.

Along with OrbMan's answer, you can look at wikibits.js, which is MediaWiki's version of the sorting code. It doesn't require any AJAX or special glue code, just a simple class (sortable) to designate sortable tables.
The code is freely licensed, and used in production all over the Wikimedia sites.
EDIT: MediaWiki switched to a version of Tablesorter starting in 86088 (April 2011).

I really like tristen's tablesort. It is dependency free, lightweight and doesn't require a lot of styling / doesn't mess with your own styling!

Download the sorttable.js
Include the sorttable.js, by putting a link to it in the HEAD of your page, like so:
<script src="sorttable.js"></script>
Mark your table as a sortable one by giving it a class of sortable:
<table class="sortable">

List of in-browser UI techniques?

I'd like to know what can be done in a browser UI (using a browser+CSS+javascript, not using Flash or Silverlight). For example, I think it's possible to:
Drag and drop
Arrange list items horizontally, and make them behave like menu items
Make things on page visible or invisible, depending on where the mouse is hovering
I admit this is a broad question, but that's what I'm looking for: an overview of available UI techniques (preferably with, also, at least a little clue or hyperlink as to how to implement each one).
Do you know of such a list or dictionary?
I'm especially interested in any techniques for interaction and user input (i.e. not simply page layout and navigation where the end-user is only consuming information).
Edit: people answered that I should look to see what functionality is implemented in various 'JavaScript UI toolkits'. FWIW, the following are my brief review/summary after looking at some of the suggestions.
http://demos.mootools.net/ -- implements a small (not wide) variety of UI features
http://ajaxian.com/by/topic/ui -- not an organized or coherent reference, more like a blog that reviews various things.
http://jqueryui.com/demos/ -- concise, organized introduction to a dozen interactions and/or widgets
http://plugins.jquery.com/ -- a library of a couple of thousand 'plug-ins' in 20 categories ... vaster and not so immediately understandable nor so consistently documented as the jqueryui demos
http://www.dojotoolkit.org/ -- takes a bit of navigating ... the easiest introduction to all functionality might be http://dojocampus.org/explorer/
http://script.aculo.us/ -- not very big
http://extjs.com/ -- quite a variety of powerful features, with a good set of demos at http://extjs.com/deploy/dev/examples/samples.html
http://mochikit.com/ -- this is another small library
http://developer.yahoo.com/yui/ -- includes about 20 widget classes, thorough documentation (each class description includes a link to demos), and special mention for having "Layout Manager" and "CSS Reset".
http://www.midorijs.com/ -- quite small and simple, no demos
To summarize, I think the best answers (i.e. the easiest-to-browse collections of the most functionality) are:
http://extjs.com/deploy/dev/examples/samples.html
http://dojocampus.org/explorer/
http://developer.yahoo.com/yui/examples/

A very great many things can be done in JS.

Try any of these javascript libraries:
http://www.dojotoolkit.org/
http://mootools.net/
http://jquery.com/
http://script.aculo.us/
http://extjs.com/
http://mochikit.com/
http://developer.yahoo.com/yui/
http://www.midorijs.com/
If you accept the HTML Canvas as valid HTML (Microsoft doesn't), you can do even more (requires Canvas support in your browser):
https://developer.mozilla.org/en/Canvas_tutorial
http://www.blobsallad.se/
http://www.benjoffe.com/code/demos/canvascape/ - 3rd person shooter

look at the documentation for things like mootools and jquery UI, there are plenty of examples of the crazy stuff that you can do in there.
Also check out ajaxians UI section

check out jquery UI http://jqueryui.com/ as well as plugins http://plugins.jquery.com/
this is just a simple example what you can achieve via Java Script

I think you could in principle do almost anything you can think of that involves the page changing how it looks in response to user action. I mean, js can do amazing visual effects, including pretty complex animation and vectors, and retrieve data from anywhere that allows it to using ajax, so put that way you can display anything you want how you want.
The question is how much resources these take client side. While pretty much anything is possible, not everything will necessarily be practical, and I doubt there's any reliable way to decide which things will be too resource-heavy to realistically implement on the client side.

Check out JQuery and JQueryUI