I need some reordering functionality so I tried the sortable_element helper. It is giving me trouble though. I have a show view that looks like this (HAML):
%ul#items = render :partial => @menu.items = sortable_element :items, :url => { :action => 'inspect_params' }, :complete => "alert(request.responseText);"
I'm doing two things here: Rendering a partial with a lot of menu items (that should be able to be reordered) and output a piece of Javascript that creates a new Sortable. The output looks like this:
<ul id='items'> <li>Home</li> <li>About</li> <li>Contact</li> </ul> <script type="text/javascript"> //<![CDATA[ Sortable.create("items", {onUpdate:function(){new Ajax.Request('/menus/inspect_params', {asynchronous:true, evalScripts:true, onComplete:function(request){alert(request.responseText);}, parameters:Sortable.serialize("items") + '&authenticity_token=' + encodeURIComponent('75263d21d8d34d59cf1731a1209132c315bbe04f')})}}) //]]> </script>
The inspect_params action in the MenusController looks like this:
render :text => params.inspect
And that's about it. This is every Javascript developer's nightmare: Nothing happens at all. And the nightmare has become true. No alert box, not even a request. If you open Firebug and drag some list items around, nothing happens in the console.
And do you know what the real funny thing is? If you make a link to the same action on the same page, it works fine!
= link_to_remote "Link", :url => {:action => 'inspect_params'}
The request gets sent and returns something like: {"authenticity_token"=>"...", "action"=>"inspect_params", "controller" => "menus"} I've been wondering if it has anything to do with the way I positioned the Javascript: in the bottom of <body>. Is that good?
Can anyone help me out here? This problem has twisted my brain for two days...