Dynamic Web Development with Seaside

21.2.1Creating Queries

If you’ve already used jQuery (or followed the link to the documentation), you will already be familiar with the $() syntax for specifying CSS queries to select DOM elements. JQueryClass>>expression: exposes this same interface, but there are also a number of shortcut forms available to you. All the constructor methods return an instance of JQueryInstance.

$("div.hint")

Normally a jQuery instance is setup with a CSS selector. You can either use the long form (1) or take the shortcut (2). Of course, both forms are absolutely equivalent, in practice you will mostly encounter the shorter second form:

html jQuery expression: 'div.hint'.      "(1)"
html jQuery: 'div.hint'. "(2)"

$("#foo")

Often you want to create a query with an element ID. Again we have different possibilities to instantiate that query. (1) and (3) use a normal CSS selector for element IDs. (2) uses the id: selector, and (4) uses a shortcut using a symbol. Note that the forth form only works for symbols, if you pass a string it will be interpreted as a CSS selector.

html jQuery expression: '#foo'.          "(1)"
html jQuery id: 'foo'. "(2)"
html jQuery: '#foo'. "(3)"
html jQuery: #foo. "(4)"

$("*")

The CSS selector to match all elements in the page is *. Again you have several equivalent possibilities to achieve the same in jQuery. The first two use a CSS selector, while the last one uses a convenience method:

html jQuery expression: '*'.
html jQuery: '*'.
html jQuery all.

$(this)

If you want to refer to the currently active DOM element from an event handler you can use new or this.

html jQuery this.
html jQuery new.

Note that the new you call here is not the one implemented in the Smalltalk class Behavior, but a custom one implemented on the instance side of JQueryClass. Similar to all other constructor methods it returns an instance of JQueryInstance.

$("<div></div>")

Furthermore, jQuery provides the possibility to create new HTML code on the fly, that inserted into an existing element. Again we have different equivalent possibilities to do this. The first one uses a raw HTML string, with Seaside we want to avoid this in most cases. The second and third variation uses a block with a new renderer that we can use with the normal Seaside rendering API.

html jQuery expression: '<div></div>'.
html jQuery html: [ :r | r div ].
html jQuery: [ :r | r div ].

$(function() { alert(’Hello’); })

Last but not least there is the case of the $() syntax allows you to specify some action that should happen once the page is ready. This is done by attaching

html jQuery ready: (html javascript alert: 'Hello').
html jQuery: (html javascript alert: 'Hello').
§
jQuery Basics
Refining Queries
jQuery Basics
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.