/examples/render-update.lisp

 1(in-package :wu)
 2
 3(publish-code)
 4
 5(publish :path "/render-update-demo" 
 6	 :content-type "text/html"
 7	 :function 'render-update-demo)
 8
 9(defun render-update-demo (req ent)
10  (with-http-response-and-body (req ent)
11    (html (:head
12	   (javascript-includes "prototype.js" "effects.js" "dragdrop.js")
13	   (css-includes "wuwei.css"))
14	  (:body
15	   (example-header #.(this-pathname))
16	   (:h1 "WuWei render-update demo")
17	   ((:div :id "FOO")
18	    (link-to-remote
19	     "Click me and I will be replaced"
20	     (ajax-continuation () 
21	       (render-update
22		 (:update "FOO" (html (:i (:princ "I have been replaced"))))))))
23
24	   :hr
25	   ((:div :id "notdragme" :style "background:#FFBBAD; border: 1px solid; margin: 5px; padding: 5x; width: 50px; height: 50px;"))
26	   (link-to-remote "Click me" (ajax-continuation ()
27					(render-update 
28					  (:visual-effect :fade "notdragme"))))
29	   " for a disappearing act"
30
31	   :hr
32
33	   (let ((n 1) (acc 1))
34	     (link-to-remote "A hand-cranked factorial engine."
35			     (ajax-continuation (:keep t)
36			     (render-update
37			       (:insert :after "bar" (html ((:div :style "background:#FFFFAD; border 1px solid; margin 5px; padding 5x")
38							    (setq acc (* acc (incf n)))
39							    (:princ (format nil "~A! = ~A" n acc))
40							    )))
41			       ))))
42	   ((:div :id "bar"))
43	   :hr
44	   "Some drag-n-drop"
45	   ((:div :id "dragme" :style "background:#BBFFAD; border: 1px solid; margin: 5px; padding: 5x; width: 100px; height: 50px;")
46	    "Drag me")
47	   ((:div :id "target" :style "background:#BBFAFD; border: 1px solid; margin: 5px; padding: 5x; width: 100px; height: 50px;")
48	    "Drop it here")
49	   (render-scripts
50	     (:draggable "dragme")
51	     (:drop-target "target"
52			   :|onDrop| `(:raw "function (elt) {alert('thanks!');}")))
53	   
54	   
55
56	   ))))