Multi-Level Nested Object Forms in Rails (with jQuery)

Ruby on Rails 3 Comments »

Complex forms were the focus of Railscasts 73, 74 and 75 and the latter episode outlined the rather involved way to get a single nested model to work correctly with form elements generated on the client via javascript.

Nested model forms built into Rails became the most requested feature and release 2.3 finally delivered with the accepts_nested_attributes_for function. Still, challenges remained, especially when trying to generate form elements on the client.

A suggested solution was an altered form builder pre-populated with the nested models, which was published in the complex forms sample application. This solution was ported to support jQuery, but an extension to multi-level nesting (> 2 levels) was still lacking.

Now a fork of the complex forms examples show off a solution with any level of nesting that is extremely easy to implement.

As ryanb states in his answer to this question on stackoverflow, proceed like so:

git clone git://github.com/ryanb/complex-form-examples.git
cd complex-form-examples
git checkout -b deep origin/deep
rake db:migrate
script/server

What about jQuery? Very easy. Simply replace the two functions in application.js with

function insert_fields(link, method, content) {
    var new_id = new Date().getTime();
    var regexp = new RegExp(”new_” + method, “g”)
    $(link).before(content.replace(regexp, new_id));
}

function remove_fields(link) {
    var hidden_field = $(link).prev(”input[type=hidden]“);
    if (hidden_field) {
        hidden_field.val(’1′);
    }
    $(link).closest(”.fields”).hide();
    } 

Complex forms with multiple levels of nesting is finally upon us. And super easy to implement.

Update: As jQuery won’t be able to see the newly added elements (because binding took place at $(document).ready()), check out jQuery live and the livequery plugin. The latter supports more events, including the onchange of a select and also works with jQuery < 1.3.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Adjust Screen Brightness in Ubuntu via xrandr

Computing No Comments »

Certain issues with screen brightness adjustment in Ubuntu for a variety Intel graphics chips (945GM, GL40) which will be fixed in the upcoming Ubuntu Karmic. For now, if you have problems getting your screen brightness adjusted via fn keys (I had this issue on a new Acer notebook), you might try this command:

xrandr –output LVDS –set BACKLIGHT_CONTROL combination

The screen will flicker when you run this but your function keys might just start working. You might add this command to your startup scripts. YMMV.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Rails Auto Complete with jQuery/jRails

Ruby on Rails, jQuery 1 Comment »

Having long used jRails in place of of scriptaculous/prototype with my Rails projects, I found that the latter won’t work with the original auto_complete plugin for Rails.

So I tried a few solutions such as this which uses the auto_complete_jquery plugin,  as well as more involved solutions such as this and this one which uses HAML. However, I didn’t want to write javascript and also have all the helpers of the original plugin, to implement the solution presented in Railscast 102, with a RESTful call to the correct controller (the original plug-in doesn’t work RESTfully in its default configuration).

I ended up using the jrails_auto_complete plugin and it works fine so far. Be sure though to include all js files included with project. Aside from some minor styling issues it seems to work just like the original auto_complete plugin with the same helpers and the code used in the Railscast.

Here’s a sample text_field_with_auto_complete tag using the auto_update_element/afterUpdateElement callback which fires when the selection is made:

    <%= text_field_with_auto_complete :hotel_search,
      :destination_code, {:size => 30 },
      {:url => (destinations_path(:format => :js)),
      :method => :get,
      :param_name => ’search’,
    :after_update_element => “function(element,value){alert(’You have chosen ‘ +
      $(\”#hotel_search_destination_code\”).val());}”
    } %>

 Of course this cries out for being extracted into a helper but it can be hard to get the syntax right, especially for the callback.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]
WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in