A CL-HTTP Primer - Using Events

Using Events

You can associate JavaScript code with appropriate HTML constructs using the :events keyword.

The :events keyword takes a list of event definitions of the form:

((event . :JavaScript)  javascript-code)

where event is a keyword such as :mouse-click to define the action that should trigger the event, and javascript-code is the code to run when the event is triggered. This should either be a string, or a function which will be called with the stream as a parameter.

Creating a modal dialog

As a simple example of using the :events parameter here's a simple application to create a JavaScript modal dialog:

(defparameter *overlay*
 "position:absolute;width:100%;height:100%;left:0;top:0;visibility:hidden;z-index:1000;")

(defparameter *dialog*
 "width:300px;margin:60px auto;background-color:white;border:2px solid;text-align:center;")

(defun write-events-demo (url stream)
  (declare (ignore url))
  (with-page (url stream "Events Demo")
    (with-paragraph (:stream stream)
      (note-anchor "Click to show dialog" :reference "#"
                   :events '(((:mouse-click . :java-script)
                              "document.getElementById('overlay').style.visibility='visible'"))
                   :stream stream))
    (with-division (:id "overlay" :style *overlay* :stream stream)
      (with-division (:style *dialog* :stream stream)
        (with-paragraph (:stream stream)
          (write-string "Warning - save before closing!" stream))
          (note-anchor "Hide" :reference "#"
                   :events '(((:mouse-click . :java-script)
                              "document.getElementById('overlay').style.visibility='hidden'")) 
                   :stream stream)))))

Here's hthe definition of the URL:

(export-url "http://localhost:8000/events.html"
            :computed
            :response-function 'write-events-demo)

Going to this page displays a link:

Clicking on the link shows the modal dialog:

Using with-event-handlers

CL-HTTP includes a procedure with-event-handlers to help you define lists of event definitions for use as the parameter to the :events keyword.

In its simplest version with-event-handlers can take a string defining the JavaScript you want to emit. So you could define the show-event in the above example as follows:

(with-event-handlers
      (show-event (:java-script :mouse-click 
                   "document.getElementById('overlay').style.visibility='visible'"))
    (with-page (url stream "Events Demo")
      (with-paragraph (:stream stream)
        (note-anchor "Click to show dialog" :reference "#" :events show-event :stream stream))