simple_update_field

Rails text field helper for inplace-editing of text with keybindings to move between each simple_update_field.

simple_update_field is implemented internally with jquery

Design Goals

Simple_update_field is designed to extend the browsers behaviour in a un-surprising manner.

Callback Guide

You may wish to be able to change the rules around when to, or when not to do an update.

A callback named 'before_update' is provided - you can install it when you invoke SimpleUpdateField.

For example you may wish to have a confirmation dialog:

{{{

var my_confirm_handler = function() {

var input = this
return confirm("Update the database with " + input.value +" ?")

}

$(document).ready(function() {

SimpleUpdateField('.phrase .text'
                  ,{ 
                     before_update:my_confirm_handler
                  })

})

}}}

Styling Guide

Use CSS as you normaly would along with the following classes

{{{ .editable-input { /*

this is the input that will be created 
on click use this class to change it's style

*/ } }}} {{{ .editable-hover { /*

this is the field that has a mouse-over 
use this to tell the user the field is clickable

*/ }

}}}

It is recommended to put a min-width on the element which contains your editable text. For example - if you use a span - if you remove all the text the element will collapse. Simple Update Field will not take responsiblity for lack of styling such an element as you have the power to adjust this via CSS!

Installation Guide for Rails 3+

If you are using a version of rails before JQuery became the default - please integrate the gem 'jquery-rails'

In the installation guide you will see the following terms: phrase, PhrasesController, Phrase, text - my examples assume that I am working with a Phrase resource with a :string field named 'text'. The PhrasesController handles rails rest based resource calls.

{{{

gem "simple_update_field"

}}}

View Side

{{{ <div class='phrase'>

<span editable-resource-attribute="text"
      editable-resource-model="<%=phrase.class.model_name.downcase%>"
      editable-resource-uri="<%=phrase_path(phrase,
                                             :authenticity_token => 
                                              form_authenticity_token)%>"
      class="text">
  <%= phrase.text %>
</span>

</div> }}}

The 3 custom attributes are :

## editable-resource-attribute *** this is the name one of the model attributes that you want to change ie : 'name', 'text', 'phone_number' *** this will be used with the editable-resource-model to name the parameter ## editable-resource-model *** this is a lowercase name of the model class that you are planning on changing *** this will be sent to the server as part of the post-variable ie: model_name_here=VALUE ## editable-resource-uri *** this is the destination to send the post-variable that is described by the above. **** you will need to encode CRSF into this path if you are using typical rails protect_from_forgery

Example of all 3 attributes

{{{

<span editable-resource-attribute="name"
      editable-resource-model="animal"
      editable-resource-uri="<%= animal_path(animal,
                                             :authenticity_token => 
                                              form_authenticity_token)
                              %>"
      class="animal-name">
  <%= animal.name %>
</span>

}}}

Resource Side

## The typical rails resource style tends towards having a the resource payload named by the model and as part of the general request params {{{ class PhrasesController < ApplicationController

def update
  Phrase.
    find(params[:id]).
    update_attributes(params[:phrase])
  head :ok # assume success
end

end }}}

## edit your config/routes.rb file to specify that there is an update action *** in the example there are only two actions : {{{

resources :phrases, :only => [:index,:update]

}}} *** or simply use the default actions : {{{

resources :phrases

}}}

Javascript Integration

There are 2 steps to integration with javascript.

{{{ //= require simple_update_field }}}

** this can be done in application.js aswell or in a new file in the app/assets/javascript directory ** A CSS selector of the jQuery style is assumed. ## For the above Phrase view code this could work : {{{ $(document).ready(function() {

SimpleUpdateField('.phrase .text')

}) }}} ## For the above Animals view code this could work : {{{ $(document).ready(function() {

SimpleUpdateField('.animal-name')

}) }}}

Roadmap

Recent Changes

Contributing to simple_update_field

# Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet. # Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it. # Fork the project. # Start a feature/bugfix branch. # Commit and push until you are happy with your contribution. # Make sure to add tests for it. This is important so I don't break it in a future version unintentionally. # Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.

Authored by Curtis Schofield

Contributors Judy Tuna Hollin Wilkins

Copyright © 2012 Blazing Cloud. See LICENSE.txt for further details.