This held up my pursuit of AJAX for a few frustrating hours. Nobody's
fault but mine; however, I'm posting about it in case the following
can be useful in anyone else's learning process.
The following may sound like it's written for idiots if you are well
versed in AJAX or at least Javascript. But In my case, I left the
industry in 1992 and returned just recently, so I'm catching up on the
whole JS paradigm, didn't even know much about HTML or the DOM until
recently.
Wondering why there is no h.button_to_remote in the webhelpers? Let
me guess. Perhaps you want something similar to this: a <div>
containing a button which, when clicked, disappears and an input form
appears in its place... and later, when the form is submitted, you
want the form to disappear and the button to reappear again.
So, you're thinking, "OK, we have link_to_remote, which is what I've
already used successfully to get one of my controllers to send back
some text into my <div>, AJAX-style. Therefore why no
button_to_remote? Why can I only do this with a plain text link and
not with a stylish button?"
Instead, try the following train of thought. It is not necessary to
go to the controller for the simple act of changing the <div> contents
from a button to a form; this can be done right inside the template
using h.update_element_function. That way the controller doesn't have
to be bothered until the form is actually submitted. See, the
button_to_remote you were looking for would be sending something to
the controller, but that is not necessary at all.
Do this instead: (using Mako in this example)
<div id="blatz">
${h.button_to_function("click here for blatz form",
h.update_element_function("blatz",
action="update",
content=blatz_form))}
</p>
Elsewhere in the template, define "blatz_form" as everything that
should go in and replace the button. Now here is the crucial step
that closes the loop and allows you to click back and forth from
button to form, seeing one replace the other as many times as you
wish. The form that you define in blatz_form uses h.form_remote_tag,
of course, so that it will submit without reloading the page. But
most importantly, supply the "complete" option to form_remote_tag, as
h.evaluate_remote_response().
blatz_form = ("Here's the form... enter some values"
+ h.form_remote_tag(url=h.url(action="some_controller_method",
some_other_variable=42),
complete=h.evaluate_remote_response(),
method="GET")
+ "enter something: " + h.text_field(name="value_1")
+ "and something else:: " + h.text_field(name="value_2")
+ h.submit(value="OK", name="commit")
+ h.end_form()))
That's it. So the original state of your div shows the button. Click
the button, and courtesy of update_element_function, it is replaced
with your form. Submit the form, and the values are sent off to the
controller method along with some_other_variable and any other fixed
values you might want to put in the tag. Now the controller method
does things you might want it to do, like save the values in your db,
etc. And for its result, it does not redirect, it does not re-render
the original template. Instead it returns an update_element_function
which sets the contents of your div right back to its original state.
If you need to update another div in the same template as a result of
the controller (for example, part of the template shows a list of
existing values for value_1 and value_2 and you want to update them
now without reloading the page) then instead of a single
update_element_function you can send back two. This does not mean you
have to do a lot of scripting in the controller; it can simply set up
c.some_helper_variables and then return render( some auxiliary
template that contains the update_element_function()s ).
The above still a beginner approach that repeats itself a lot, but it
works. Unlike my first ten tries at doing the same thing some other
way after reading the webhelpers documentation with great confusion.
For a more advanced approach: using Mako defs, calls, and/or
namespaces, all repetition can be eliminated and the whole idea can be
packaged up into a portable, reusable "div that swaps between a button
and a form with N fields" widget, or whatever variations you can dream
up. I'm not up to that yet, but I can see that it's possible.
Viva Pylons!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"pylons-discuss" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/pylons-discuss?hl=en
-~----------~----~----~----~------~----~------~--~---
