Dynamic Web Development with Seaside

21.2.3Performing Actions

There is a wide variety of actions that come supported with jQuery. jQuery UI and thousands of other plugins add even more. In this section we present some of the most common actions provided by the core framework.

Classes

The following examples add, remove or toggle the CSS class important given as the first argument. These methods are commonly used to change the appearance of one or more HTML elements for example to visualize a state change in the application.

aQuery addClass: 'important'.
aQuery removeClass: 'important'.
aQuery toggleClass: 'important'.

Also you can query if a particular class is set:

aQuery hasClass: 'important'.

Styles

Similarly you can change the style of one or more HTML elements. By providing a dictionary you can change multiple CSS styles at once:

aQuery css: aDictionary.

Alternatively you can use a dictionary-like protocol to read and write specific style properties:

aQuery cssAt: 'color'.
aQuery cssAt: 'color' put: '#ff0'.

Note that in most cases it is preferred to use CSS classes instead of hardcoding your style settings into the application code.

Attributes

While the above methods change the class and style attribute of one or more DOM elements, there are also accessor methods to change arbitrary HTML attributes. By providing a dictionary of key-value pairs you can change multiple attributes at once:

aQuery attributes: aDictionary.

Alternatively you can use a dictionary-like protocol to read and write attributes:

aQuery attributeAt: 'href'.
aQuery attributeAt: 'href' put: 'http://www.seaside.st/'.

Replace Content

A common operation on DOM elements is to change their contents, for example to update a view or to display additional information. To set the HTML contents of matched elements you can use the following construct that will replace the contents with <div></div>:

aQuery html: [ :r | r div ].

Alternatively you can set the text contents of each element in the set of matched elements:

aQuery text: 'some text'.

Last but not least you can set the value. This is especially useful for form fields, that require different ways to set the current contents (input fields require you to change the attribute value, text areas require you to change the contents). The following code takes care of the details automatically:

aQuery value: 'some value'.

Insert Content

Alternatively to replacing the contents you can append new contents. before: inserts content before each element in the set of matched elements; prepend: inserts content to the beginning of each element in the set of matched elements; append: inserts content to the end of each element in the set of matched elements; and after: inserts content after each element in the set of matched elements.

aQuery before: [ :r | r div ].
aQuery prepend: [ :r | r div ].
aQuery append: [ :r | r div ].
aQuery after: [ :r | r div ].

Note that, as with html:, the argument can be any renderable object: a string, a Seaside component, or a render block as in the given examples.

Animations

Showing or hiding DOM elements is one of the most common operations. While this is typically done by adding or removing a CSS class, jQuery provides a simpler way. The action show makes sure that the matching DOM elements are visible. If a duration is given as a first parameter, the elements are faded-in:

aQuery show.
aQuery show: 1 second.

The same functionality is available to hide one or more DOM elements with hide:

aQuery hide.
aQuery hide: 1 second.
§
jQuery Basics
Adding jQuery
Refining Queries
This is a draft chapter.

Copyright © 19 March 2024 Stéphane Ducasse, Lukas Renggli, C. David Shaffer, Rick Zaccone
This book is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license.

This book is published using Seaside, Magritte and the Pier book publishing engine.