From the "what a great time-saver" department:

Here is a short patch to node.module that adds a "Check all | none" javascript link to the bottom of the content listing table on admin/node. By clicking "all" or "none" you can select or deselect all of the check boxes in the table at once.

The javascript is very non-invasive, should work older (non-DOM) browsers, and non-javascript browsers will simply lose this function.

The patch also adds the attribute [name = "node-admin"] to the [form] tag. I don't know if there is a form naming convention, but this was the best guess I could come up with by looking at the page source. And incidentally, if Drupal is going to move toward javascript/ajax functioning, all forms are going to need 'name' and 'id' tags. Most don't have these now.

-Jeff

Comments

Bèr Kessels’s picture

-1. Its up to the client to provide such interface tricks. Most clients can do this with bookmarklets already.

junyor’s picture

How would you propose that a client implement this? As of now, there's no common attribute that the client could use to determine that the checkboxes are related. Theoretically, it could be done if the checkboxes shared a common name. But what would the UI look like?

My point is, no UA has implemented this and there's a working solution used throughout the Web. Let's use that solution.

Bèr Kessels’s picture

http://www.squarefree.com/bookmarklets/forms.html is the one you are looking for. See "Toggle checkboxes".

junyor’s picture

Checking all checkboxes on a page is not a viable solution for most cases (though it may work here).

moshe weitzman’s picture

It is silly to require users to install bookmarklets from 3rd party web sites in order to easily use our pages. Every web mail application I've used provides a 'check all' feature. This is not a "client hack". It is ECMAscript, which is a web standard. +1

factoryjoe’s picture

Bookmarklets are not a viable solution when viewing a site on kiosk/school web browser. +1 for this functionality, but I really think that these scripts belong in a drupal utility.js file, similar to Rails' prototype.js file.

It also seems to me that there needs to be a bit more logic about where this kind of "check all" | "deselect all" link shows up. As it is, I couldn't tell if it gets added to the table header, footer, or shows up after... I think tossing it in the admin UI makes good sense for now, but I imagine that this would also be useful in more user-facing UIs.

jjeff’s picture

Yes, downloading a bookmarklet is rediculous. It might be a solution for the people who are reading this, but aren't we trying to appeal to a larger audience than the development community?

This script only (un)checks the boxes within the given form. The bookmarklet hits the whole page.

I understand that it's both narrow thinking and bad web design to require JavaScript of the client browser. But let's be honest, it's 2005 and most browsers have it. Even Opera on my cell phone has some basic JavaScript capability. As in this case, the JavaScript should not define an essential function, nor "get in the way" for non-javascript browsers. Certainly, JavaScript can be abused, but simply using it does not amount to inaccessiblity nor standards non-comliance.

And there are honestly some AMAZING things being done with AJAX and lesser JavaScript. Anyone who has used Flickr can attest to this. Their system uses both AJAX-style javascript and Flash in a way that provides quick and efficient content editing and photo presentation, but degrades gracefully.

Perhaps there should be a larger discussion about a JavaScript layer or some sort of standard for Drupal. 'Cause let's be honest, a little DHTML in the menu navigation would save a lot of time -- click 'administer', wait for page to load, click 'settings', wait for the page to load, click the thing you want -- it's just not efficient (and I know I can fold 'em out using admin/menu, but that kinda kills the advantage of having a heirarchy). The Rail prototype library is certainly intreguing. Perhaps Drupal could adopt something like this, or build something of our own.

Mathias, RichardB, and I have been doing some really cool stuff with the TinyMCE JavaScript WYSIWYG editor. It provides Word-like extended textarea editing capabilties to users who have the capability, with no impact on non-capable browsers.

I made this patch as a quick way to get some basic "CMS 101" functionality on the content list page. But I agree that it would be a bit of an anomaly to commit this patch without looking at how JavaScript can benefit the Drupal user interface as a whole.

-Jeff

Steve Dondley’s picture

+1 to the concept. It should be in core.

I can't comment on the code since I haven't looked at it.

ñull’s picture

StatusFileSize
new1.11 KB

The same patch now both in header and footer of the table & I adapted it to cvs.

moshe weitzman’s picture

this satisfies a great nead, but i'd rather see a more generic version of check(what) in drupal.js. the one here is defined within BODY tag which isn't so clean

Steven’s picture

+1 for concept, -5 on implementation:

  • It does not degrade. Preferably these extra controls would be added onload through JS. At worst, we generate them with an inline <script> tag which calls an API.
  • The code belongs in a .js file with a killswitch, like the other JS in Drupal.
  • DOM methods are preferred to legacy accessors like document.forms IMO. We should use getElementsByTagName() instead.
  • Instead of a link, why not use a checkbox in the header row? Check it to select all, uncheck it to select nothing. It is ugly to use a separate table row for each of them this.
  • We should be more selective with this. We should restrict the list of boxes to check by id/name.
jjeff’s picture

I pretty much agree with Steven. I like the idea of a 'master' checkbox in the header and the code should be sure to degrade.

And I agree with Moshe that there should be some functions for this type of thing in drupal.js.

I'm going to go one further and suggest a form_mastercheckbox() function. By default it would check all checkboxes within the current form. But are there consistent patterns to how similar checkboxes are named? I could set it up so that you could pass a regex and javascript would compare names (or ids) against it, but it seems like there should be a more efficient way of handling that.

It looks like the form_checkboxes() outputs a series of checkboxes with the naming scheme:

name="edit[checkboxname][]"
and no id

These would be easy enough to target, but the more common use of form_mastercheckbox() would probably be (as we've been talking about in this thread), all checkboxes in an html table column. And these are called using form_checkbox(). These have the format:

name="edit[checkboxname]" id="edit-checkboxname"

although, developers sometimes insert "][" into the checkbox names in order to generate arrays.

So the question is this:
What is the best way to pass the selector for a column of checkboxes? I'm guessing that a regex will need to be generated for JavaScript to find what it needs, but it'd be nice if this regex could be generated by form_mastercheckbox() rather than having to require developers to get mucked up with regular expressions in order to use the function.

Any thoughts are appreciated!

-Jeff Robbins

moshe weitzman’s picture

Status: Needs review » Needs work
moshe weitzman’s picture

come on folks. how long must we suffer without a 'check all' function? get to it :)

mgifford’s picture

Still seems to work great in 4.6.. Thanks! Hopefully it gets into 4.7 as a usubility thing.

Mike

tenrapid’s picture

Title: Check All | None on Content List Page (admin/node) » Check All | None on Content and Comments List Page
StatusFileSize
new3.54 KB

Here is a new try to implement the check all functionality. It adds a master checkbox to the header of the tables on admin/node and admin/comment.

It's implemented as a new form item 'check_all' and is used as every other form item.

$form['nodes'] = array('#type' => 'checkboxes', '#options' => $nodes);
$form['checkall'] = array('#type' => 'check_all', '#value' => 'nodes');

As you can see the '#value' field is set to the key of the form element that represents the set of checkboxes.
You can also let '#value' point to this form element:
$form['checkall'] = array('#type' => 'check_all', '#value' => &$form['nodes']);

Attached is a patch that adds the 'check _all' form element's theme function to form.inc and does the required changes in node.module and comment.module.

The next comment has the required checkall.js attached.

tenrapid’s picture

Status: Needs work » Needs review
StatusFileSize
new933 bytes

Here the checkall.js. Place it in the 'misc' folder.

moshe weitzman’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new3.34 KB

praise to tenrapid for finally submitting a winning patch for this. i tested this and it works as advertised. the API is easy for module developers to use ... rerolled to fix a bad hunk.

RTBC.

Steven’s picture

Status: Reviewed & tested by the community » Needs work

-1 on implementation.
The className set on the div is never used. Instead of the regexp in the autoAttach, you can just use hasClass(). Then to extract the id of the target checkboxes, you can use .substring().

Setting the checkbox's name attribute to the parent id sounds like a bad idea, because as per HTML 4.0 name is deprecated and id should be used instead. Does it even need a name attribute? It is not used on the server side...

Zen’s picture

tenrapid’s picture

Status: Needs work » Needs review
StatusFileSize
new3.49 KB

Thanks for reviewing and rerolling.

Following Steven's advice I improved the checkall.js.

Also the naming is more consistent. The form element is called 'checkbox_check_all' now.
$form['checkall'] = array('#type' => 'checkbox_check_all', '#value' => 'nodes');

So here's the patch ...

tenrapid’s picture

StatusFileSize
new988 bytes

... and the checkall.js.

chx’s picture

as this is a feature (a very cool feature, i love it!) it won't be in 4.7. I propose to start a small project out of it, it will be popular, I bet :) from what I saw, this is pretty much doable with form_alter anyways.

nedjo’s picture

This would make a great addition to the Javascript Tools package, http://drupal.org/node/57285, for the 4.7 cycle. tenrapid, would you like to rework it as a module and add it to the package? You could use one of the other jstools modules as a model.

jjeff’s picture

... just adding a closing code tag...

budda’s picture

So is this going to finally get in to 4.8 core then?

rkerr’s picture

Great stuff.. this will save a lot of time. +1 :)

goose2000’s picture

I am looking at the 4.7 node.module and I am coming to the thought that the patch above was developed on a 4.6 node.module, is the correct?

EX. 4.7 has no line that shows:

$form['#method'] = 'post';

Thanks for help.

jmiccolis’s picture

StatusFileSize
new1.2 KB

Attached is a small 4.7 module I threw together based on tenrapid's patch that adds a "check all" box to the admin/comment and admin/node screens. One minor issue with this module is that the "check all" box appears at the top of the admin/comment form and the bottom of the admin/node form because of complexities with the node form that I didn't have time to hash out.

Anyhow, I think this may be useful to folks who want that 'check all' box.

m3avrck’s picture

Version: x.y.z » 5.x-dev
Status: Needs review » Closed (duplicate)