Ajax.InPlaceCollectionEditor

Controls > Ajax.InPlaceCollectionEditor

Introduction

This constructor generates a Flickr-style AJAX-based “on-the-fly” fields with a select box instead of Ajax.InPlaceEditor text fields.

Syntax

new Ajax.InPlaceCollectionEditor( element, url, { collection: [array], [moreOptions] } );

The constructor takes three parameters. The first is the element that should support in-place editing. The second is the url to submit the changed value to. The server should respond with the updated value (the server might have post-processed it or validation might have prevented it from changing). The third is a hash of options. Within that hash of options should be a field called collection that is an array of values to place inside your select box.

The server side component gets the new value as the parameter ‘value’ (POST method), and should send the new value as the body of the response.

If the collection parameter (or the result of the loadCollectionURL) is a one-dimensional array, the option tag’s value attribute will be the same as the label. For explicit value attributes, use a two dimensional array for the collection where the second dimension is a key value pair such as [['key', 'value'], ['key', 'value']].

Options

The Ajax.InplaceCollectionEditor takes all the options as Ajax.InPlaceEditor plus:

Name	since	default	Description
`collection`	V??	none	Array of static elements to be displayed as options (in JSON format)
`loadCollectionURL`	V1.5	null	Loads values and tag texts for the `<option>` tags
`loadingCollectionText`	V??	null	Text to be displayed while the collection is loading
`loadingClassName`	V??	null	Class applied to form while the collection is loading

Static Collection

The values for the collection of options are specified as an array when you invoke the Ajax.InPlaceCollectionEditor. Each element in the array will be rendered as an <option> in a <select> element for the user to choose from.


new Ajax.InPlaceCollectionEditor( element_1, '/url_to_validate_and_save_selection/', { 
  collection: ['value one', 'value two', 'value three'] 
});

new Ajax.InPlaceCollectionEditor( element_2, '/url_to_validate_and_save_selection/', { 
  collection: [['key_1', 'value one'], ['key_2', 'value two'], ['key_3', 'value three']] 
});

Dynamic Collection

The collection is loaded in the same format but is loaded as the response from a URL in the loadCollectionURL parameter. The response from that URL should be an array in JSON format.

In Rails, it can be done like this:

/url_to_load_collection /
def my_collection
@collection = SomeModel.all
respond_to do |format|
format.json { render :json => @collection.map{ |c| [c.id, c.title] } }
end
end


new Ajax.InPlaceCollectionEditor( element_3, '/url_to_validate_and_save_selection/', { 
  loadCollectionURL: '/url_to_load_collection/' 
});

Demo


<p id="editme">Click me, click me!</p>
<script type="text/javascript">
 new Ajax.InPlaceCollectionEditor(
   'editme', 
   '/demoajaxreturn.html', 
   { collection: ['one','two','three'],
     ajaxOptions: {method: 'get'} }
  );
</script>

three

(should autoselect “three”)

Examples

You may want to send the Ajax request directly to update method in Rails to be RESTful. You can do it like this, using the callback option:


<script>
new Ajax.InPlaceCollectionEditor(
  '<%= dom_id(person) %>_role_title',
  '<%= person_path(person, :authenticity_token => form_authenticity_token) %>',
  { loadCollectionURL: '<%= formatted_roles_people_path(:json,  
                            :authenticity_token => form_authenticity_token) %>',
    callback: function(form, value) {
      return 'value=' + encodeURIComponent(value) +
             '&person[role_id]=' + encodeURIComponent(value) +
             '&_method=PUT' // Fix the HTTP METHOD for the update action!!!
    },
    ajaxOptions: { method: 'post' } 
  }
);
</script>

script.aculo.us