Ajax Craziness with Amy
I’m prototyping an internal application for my company, and I’m using Rails to do it (yay!). It’ll probably turn into a Javascript-only application, with some hooks to the server, later on. In the mean time, I get to do such fun stuff as this:
<script type="text/javascript">
Droppables.add('conditional_<%= @id %>',
{hoverclass:'hover',
onDrop:function(element){
new Ajax.Updater('conditional_<%= @id %>',
'/build/1/add_cond?block_id=<%= @id %>',
{asynchronous:true, evalScripts:true,
parameters:'id=' + encodeURIComponent(element.id),
onLoaded: new Ajax.Updater(element.id+'_container',
'/build/1/new_cond', {
asynchronous:true, evalScripts:true,
parameters:'id=' + encodeURIComponent(element.id),
onLoading:Effect.Fade(element.id)})
})
}}
)</script>
Yes, it’s what you think it is…I am, in fact, calling a new Ajax updater (Ajax request) as part of a callback on an Ajax updater. Consequently, as you can see, Droppables work by putting an Ajax updater in the onDrop callback; they only have two actual callbacks, onDrop and onHover. There’s no way to do something crazy like this with the built-in Rails helpers, so I slung this particular bit of Javascript by hand.
Kids, you may try this at home, but don’t expect it to work out very well for you. Stacking Ajax requests like this is, in reality, one major step down the road to misery and bad interaction design. It’s very dirty, but I admit I actually pumped my fist in victory sitting at my desk when I made it work. Sometimes it’s quite delightful to be dirty.
Exciting! Your fade out probably looks a lot nicer than my suggested onMouseUp hide the dom element.
Hope it goes well.
mmm… Tastey!
I was thinking about a new feature for the admin interface for my site and thought I might mention it to you… Instead of choosing the category for a post from a dropdown, which could result in spawning sub-category dropdowns ad-infinitum, I thought it’d be cool if you just typed in the first few letters of the category or sub-category and then just chose it from the Type-Ahead search box. Handy-dandy! Looking forward to your talk at php|works.
you dirty dirty girl! 😉
ajax looks fun 😉 haha… but seriously.. amy your starting to make rails look like a headache 😉
Fortunately, Rails developers never have to look at that!
In fact, the Rails book talks about doing exactly that with ‘exec(request.responseText)’ instead of having to type out the whole Ajax deal.
I’d like to point out that this isn’t making Rails look like a headache, Zachery, it’s doing things that would make more dramatic people cry, "for the love of god, don’t do it!"
I can’t say that I could ever recommend stacking Ajax requests like that. It’s just begging for slowness and loss of continuity.
But, as I said… Sometimes, it’s fun. 🙂
Can I get a page # on that, Geoff?
I believe that’s on page 391 of the PDF:
"If you rely heavily on the server to do client-side updates, and need more flexibility than the :update => ’elementid’ construct provides, callbacks may be the answer. The trick is to have the server send JavaScript to the client as part of an AJAX response…"
Thanks. Updated appropriately…
Not really new.
I’m working!
Well done, nice instructions 🙁
I’m working!
The content of your show is great, I really enjoy it 🙂
I use Firefox in Ubuntu 🙂
Gonna have to give it a try!
Thanks for the write-up…
I thout to do it in my local version!
I think you can afford the craty kind of XHR updates if you’re making an intranet app.
Looks wild. Congrats.
I use Firefox in Ubuntu…
I had and the fix I found 🙁
The content of your show is great, I really enjoy it 🙁
Gonna have to give it a try!
Thanks for taking the time to do it.
Well done, nice instructions 🙁
That is strange…
I think it would be usefull for other users also!