<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[Acko.net]]></title>
  <link href="https://acko.net/atom.xml" rel="self"/>
  <link href="https://acko.net/"/>
  <updated>2026-03-05T12:10:39+01:00</updated>
  <id>https://acko.net</id>
  <author>
    <name><![CDATA[Steven Wittens]]></name>
    
  </author>

  
  <entry>
    <title type="html"><![CDATA[fQuery]]></title>
    <link href="https://acko.net/blog/fquery/"/>
    <updated>2006-11-23T00:00:00+01:00</updated>
    <id>https://acko.net/blog/fquery</id>
    <content type="html"><![CDATA[<div class="g8 i2 first"><div class="pad">
<h1>fQuery</h1>

<p>fQuery is a <a href="http://drupal.org/">Drupal</a> module to help you deal with Form API arrays. Inspired by the <a href="http://jquery.com/">jQuery library</a>, it lets you find form elements using a simple and intuitive selector scheme, based on CSS.</p>

<h2>Download</h2>
<p>fQuery is maintained in the Drupal.org Contributions repository. Downloads are on the <a href="http://drupal.org/project/fquery">fQuery project page</a>.</p>

<p><em>To check out the included demo, install the module, copy <code>example.php</code> to the site root and visit it with your browser.</em></p>

<h2>Usage</h2>

<p>When fQuery is installed and enabled, use the <code>f();</code> function to make queries. For example, selecting all collapsible fieldsets in a form is done using:</p>

<p class="codeblock"><code>&lt;?php<br />
$query = f("fieldset.collapsible", $form);<br />
foreach ($query as &amp;$element) {<br />
  ...<br />
}<br />
?&gt;
</code></p>

<p>Any module that uses fQuery should indicate its dependency in its <a href="http://drupal.org/node/64279#info">.info file</a>.</p>

<h2>Overview</h2>

<p>The following table summarizes how fQuery maps CSS concepts to Form API:</p>
  
<table style="margin: 0 auto;">
<tr><th>CSS</th><th>Form API</th></tr>
<tr class="odd"><td>Tag names</td><td>Field types<br />
e.g. <code>textfield</code></td></tr>
<tr class="even"><td>Class names</td><td>Binary field attributes<br />e.g. <code>.collapsible</code></td></tr>
<tr class="odd"><td>IDs</td><td>Field array keys<br />e.g. <code>'status'</code></td></tr>
<tr class="even"><td>HTML attributes</td><td>Field properties<br />e.g. <code>#size</code><br />
HTML attributes<br />e.g. <code>class</code>.</td></tr>
</table>

<p>Here are some example queries:</p>

<table style="margin-left: auto; margin-right: auto; font-size: 0.9em">
<tr class="even"><td>fieldset</td><td>All fieldsets</td></tr>
<tr class="odd"><td>[#type=fieldset]</td><td>All fieldsets (alternative)</td></tr>
<tr class="even"><td>#status</td><td>All elements with array key name 'status'</td></tr>
<tr class="odd"><td>.resizable</td><td>All items with '#resizable' set to true.</td></tr>
<tr class="even"><td>[#resizable]</td><td>All items with '#resizable' set to a non-empty value when cast to string.</td></tr>
<tr class="odd"><td>[#title=Authored by]</td><td>All elements whose title is 'Authored by'</td></tr>
<tr class="even"><td>[#description*=http://drupal.org/]</td><td>All elements who link to drupal.org in their description.</td></tr>
<tr class="odd"><td>[class~=ponies]</td><td>All elements whose #attributes =&gt; ('class' =&gt; '...') property contains the word ponies</td></tr>
<tr class="even"><td>fieldset:not(.collapsible)</td><td>All fieldsets which aren't collapsible (:not cannot be nested)</td></tr>
<tr class="odd"><td>fieldset &gt; textfield:first-child</td><td>All textfields that are at the beginning of a fieldset</td></tr>
<tr class="even"><td>textfield + textfield</td><td>All textfields that come right after another textfield.</td></tr>
<tr class="odd"><td>textfield ~ textfield</td><td>All textfields that are preceded by at least one other textfield (siblings only).</td></tr>
</table>


<h2>Supported operators</h2>

<p>These operators can be combined into complex selectors, according to the CSS syntax. See the examples above.</p>

<p><strong>Note:</strong> All the <code>[...]</code> operators can be applied both with and without '#' in the attribute name to select Form API properties (like '#required' or '#size') instead of HTML attributes (like 'class' or 'title').</p>

<dl>
<dt>*</dt><dd>Any element</dd>
<dt>foo</dt><dd>An element of type foo</dd>
<dt>[foo]</dt><dd>An element with a "foo" HTML attribute</dd>
<dt>[foo="bar"]</dt><dd>An element whose "foo" HTML attribute value is exactly equal to "bar"</dd>
<dt>[foo~="bar"]</dt><dd>An element whose "foo" HTML attribute value is a list of space-separated values, one of which is exactly equal to "bar"</dd>
<dt>[foo^="bar"]</dt><dd>An element whose "foo" HTML attribute value begins exactly with the string "bar"</dd>
<dt>[foo$="bar"]</dt><dd>An element whose "foo" HTML attribute value ends exactly with the string "bar"</dd>
<dt>[foo*="bar"]</dt><dd>An element whose "foo" HTML attribute value contains the substring "bar"</dd>
<dt>:nth-child(n)</dt><dd>An element, the n-th child of its parent</dd>
<dt>:nth-last-child(n)</dt><dd>An element, the n-th child of its parent, counting from the last one</dd>
<dt>:first-child</dt><dd>An element, first child of its parent</dd>
<dt>:last-child</dt><dd>An element, last child of its parent</dd>
<dt>:only-child</dt><dd>An element, only child of its parent</dd>
<dt>:empty</dt><dd>An element that has no children</dd>
<dt>.foo</dt><dd>An element whose binary property "#foo" is true</dd>
<dt>#foo</dt><dd>An element with array key equal to "foo"</dd>
<dt>:not(s)</dt><dd>An element that does not match <em>simple</em> selector s (the operators below are not allowed)</dd>
<dt>E F</dt><dd>An F element <em>descendant</em> of an E element</dd>
<dt>E &gt; F</dt><dd>An F element <em>child</em> of an E element</dd>
<dt>E ~ F</dt><dd>An F element <em>preceded</em> by an E element</dd>
<dt>E + F</dt><dd>An F element <em>immediately preceded</em> by an E element</dd>
</dl>

</div></div>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[fQuery Sneak Preview]]></title>
    <link href="https://acko.net/blog/fquery-sneak-preview/"/>
    <updated>2006-09-29T00:00:00+02:00</updated>
    <id>https://acko.net/blog/fquery-sneak-preview</id>
    <content type="html"><![CDATA[<div class="g8 i2 first"><div class="pad"><p><em><strong>Update:</strong> fQuery <a href="/blog/fquery">has been released</a>.</em>
</p>

<p>
Here's a sneak preview of something I've been working on since DrupalCon Brussels...
</p>

<p>
I've noticed that most hook_form_alter() uses need to look for certain elements in the $form array. For example, you want to make all resizable textareas fixed height. This means you have to iterate over $form and do recursion, find the matching elements and change them. That sucks.
</p>

<p>
What if you could just find all elements with certain properties with one line of code, and do stuff with them? Doesn't this sound at all <a href="http://jquery.com">familiar</a>?
</p>

<p>
Enter fQuery. In a hook_form_alter(), you could do:
</p>

<p class="codeblock"><code>&lt;?php<br />
$query&nbsp;=&nbsp;f('textarea.resizable',&nbsp;$form);<br />
foreach&nbsp;($query&nbsp;as&nbsp;&amp;$element)&nbsp;{<br />
&nbsp;&nbsp;$element['#resizable']&nbsp;=&nbsp;FALSE;<br />
}<br />
?&gt;</code></p>

<p>
Neat huh?</p></div></div>
]]></content>
  </entry>
  
</feed>
