[noob question] how can I have an input and output zone on the same webpage?

[Samuel Lê]

Hi,

I have been playing around with the very nice web noir tutorial and I can see how I can get some inputs from a web page to my server and output it to another webpage.

My question is: is there a simple way to have the inputs and outputs displayed together on the same page?

Thanks,

Sam

[Mark Rathwell]

Could you elaborate a little on what you are trying to do? I'm
guessing that by inputs you are talking about request params, but I'm
not sure what you mean by outputs, and also not sure what you mean by
displayed together on the same page. If you have some code that you
are trying to get working, that would also be helpful to post.

If you just want the request params returned, something like this
should get you started:

(defpage [:any "/foo"] {:as params}
(str params))

[Samuel Lê]

Hi Mark,

I gonna elaborate a bit:

First i have this code that generate a page where the user is asked to add a new user:

(defpartial user-fields [{:keys [firstname lastname]}]

  (label "firstname" "First name: ")

  (text-field "firstname" firstname)

  (label "lastname" "Last name: ")

  (text-field "lastname" lastname))

(defpage [:get "/user/add"] {:as user}

  (layout

    (form-to [:post "/user/add"]

            (user-fields user)

            (submit-button "Add user"))))

and this code to show the user just added:

(defpage [:post "/user/add"] {:as user}

    (do (println (reverse (:firstname user)))

        (layout

     [:p (str "User " (:firstname user) " added!")])))

Currently when the submit button is pressed, it generates a new page -whose name is actually the same as the one to add a new user.

What I want is to have the string "User <user firstname> added" shown on the same page as the one containing the field to add a new user, and possibly show the list of the users already added.

Otherwise, what is :any doing? it's plays both roles of post and get?

Thanks,

Sam

[Dương "Yang" ヤン Hà Nguyễn]

Hi Sam,

I think one simple way to achieve it is to use AJAX on client (not
server) side. When the form is submitted, a POST request is sent to
the server, the server then does stuff to add a new user and sends a
response (containing submitted information about the newly added user)
to the client on the same page; finally, JavaScript is used to update
the page with the string "User <user firstname> added" without
reloading the page.

As for me, I make use of jQuery to do this. Take a look at the jQuery
.post[1], ajax[2], and insertAfter[3] methods.

> Otherwise, what is :any doing? it's plays both roles of post and get?
>

Yes, it does.

[1] http://api.jquery.com/jQuery.post/
[2] http://api.jquery.com/jQuery.ajax/
[3] http://api.jquery.com/insertAfter/

Best regards,
Dương "Yang"
--
Dương "Yang" ヤン Hà Nguyễn ("Nguyễn Hà Dương" in Vietnamese, 「グエンヤン」 in Japanese)
Personal page: http://cmpitg.github.com/
Web log: http://cmpitg.wordpress.com/
"Life is a hack"

-----BEGIN GEEK CODE BLOCK-----
Version: 3.12
GIT/C/ED/L d++ s-:-(:) !a C+++(++++) ULU++++>$ P-- L+++>$ E+++
W++>+++ N+ o+ K w--- O- M@ V- PS+ PE++ Y+>++ PGP++ t+ 5 X+ R-
tv+ b+++ DI+++ D++ G+++ e* h* r* y-
-----END GEEK CODE BLOCK-----

[Mark Rathwell]

Hi Sam,

Below is something quick and dirty to get you started. Typically,
though, these days, people are doing these types of things client side
(posting via xhr with a success handler to display the 'User Added'
message), but this should get you started. Also, yes, [:any "/foo"]
handles a request sent via any http method (head, get, put, post,
delete, ...)

(defpartial add-user-form [{:keys [firstname lastname] :as user}]
(form-to [:post "/user/add"]

(label "firstname" "First name: ")
(text-field "firstname" firstname)
(label "lastname" "Last name: ")
(text-field "lastname" lastname)

(submit-button "Add user")))

(defpage [:get "/user/add"] {:as user}
(layout

[:div (add-user-form user)]))

(defpage [:post "/user/add"] {:as user}

(layout
[:p (str "User " (:firstname user) " added!")]

[:div (add-user-form nil)]))

[Samuel Lê]

Mark,

I tested your example, it works fine. Thanks! I will try to have more of the display handled on the client side, most likely try java script and ajax as Dương is suggesting - thanks for the links, they will be helpful as I am quite new to any kind of web development!

Sam