afeld / jeditable-rails Goto Github PK

a gem to add in-place-editable fields to your Rails project

License: MIT License

Ruby 78.13% JavaScript 21.87%

jeditable-rails's Introduction

jeditable-rails

A gem to add in-place-editable fields to your Rails project. It is a wrapper for the Jeditable jQuery plugin, so most options for $.editable() can be passed through the options parameter of the helpers.

Requirements

jQuery 1.2.6+ - see jquery-rails for easy integration with your Rails project
Jeditable

Usage

Assuming a Rails 3 project, in your Gemfile, add:

gem 'jeditable-rails'

Suppose you have a User model with a #zip_code attribute.

<%# app/views/users/show.html.erb %>
<h1>View/Edit your profile</h1>
...
<b>Zip Code:</b>
<%= editable_field @user, :zip_code %>

The helpers can be used in any view you like. The field appears as normal text to the user, but when clicked, turns into a form field that will then be submitted back to the server. By default, jeditable-rails requires an update action when a PUT is done to url_for(object), which is generated by default for Rails scaffolds.

Jeditable also requires the server to respond with the new value. For a simple update action, the code will look something like this:

# app/controllers/users_controller.rb
def update
  # update your model
  @user = User.find(params[:id])
  @user.update_attributes!(params[:user])

  format.html {
    if request.xhr?
      # *** repond with the new value ***
      render :text => params[:user].values.first
    else
      redirect_to(@user, :notice => 'User was successfully updated.')
    end
  }
end

Copyright

jeditable-rails's People

Contributors

Stargazers

Watchers

Forkers

johnrees yannski iruby duffyjp thebunyip manishdas augustf pjmorse kazarin bitcababy stderr jmuhlfel rovetz xonico

jeditable-rails's Issues

callback option doesn't work

The callback jeditable option doesn't work. Looks like it's due to the fact the function passed is a string from resulting args.to_json.

Cheers

Editing has_many objects

Any example code for how to edit an object that has many objects. Example:

Document has_many sections

Sections are displayed as @document.sections

Degrading possible?

Hello,

When using jeditable-rails, is there a fairly easy way to degrade properly in the case where Javascript isn't available? In other words, if JS isn't available, simply go back to a standard form / submit button for editing?

Thanks!

Ryan

select list

could you provide an example of how to hook up select list data? for example, I have:

<%= f.select :state, options_for_select( [[ "Select a State", "" ]] + State::NAMES )%>

in my form view for selecting states. How would I replicate this with the gem? The jeditable documentation shows how to load a url of that data, which I suppose I could do, but, I'm assuming it is possible to pull in something similar to what I have above.

Thanks in advance.

strange uncaught reference error jQuery

All dependencies are loading properly and in the proper order, I can't trace the issue.

<script type="text/javascript">
        (function( $ ){
          $(function(){
            var args = {data: function(value, settings) {
              // Unescape HTML
              var retval = value
                .replace(/&amp;/gi, '&')
                .replace(/&gt;/gi, '>')
                .replace(/&lt;/gi, '<')
                .replace(/&quot;/gi, "\"");
              return retval;
            }};
            $.extend(args, {"method":"PUT","name":"document[document_name]"});
            $(".editable[data-id='4ff002ed0bdb82105a0000a4'][data-name='document[document_name]']").editable("/documents/4ff002ed0bdb82105a0000a4", args);
          });
        })( jQuery );
Uncaught ReferenceError: jQuery is not defined
      </script>

Plugin is vulnerable to xss

The value from the object is marked as html_safe. I think it should be escaped by default and make the plugin output raw values when this is selected in the options.

Write jeditable includer

Should use the .min in production, regular JS file otherwise. See here for example:

https://github.com/indirect/jquery-rails/blob/master/lib/jquery-rails.rb

Request as HTML

When following the usage doc's, the responses are coming back using html, not js.
Per the logs:

Processing by ObservationsController#update as HTML

Looking for maintainers

I haven't used this project in a long time...would be great to get a maintainer that has it in one of their projects!

Use with a not yet saved object

I'm trying to use the editable_field method with a new object. I've setup my controller/routes to handle it, and it works fine except for one gotcha. I'm using "Tagging.new" for the object passed to editable_field, and since it doesn't have an id, the "data-id" in the span and jquery line is blank. So when I list a bunch of editable_fields on the same page, only the first one is POSTed to. The new Tagging object I'm using isn't actually saved, so I thought throwing some other value into it's id would be a work around, but you can't actually do that, as it's restricted.

Could the "data-id" be something available in the options hash, akin to the :update_url? My understanding is that it doesn't actually matter what the data-id is, so long as it's unique to the object on the page.

I'll play around with it myself, but I thought I'd throw that out there to see what you think. Maybe the data-id does more than I realize.

For the sake of example, here is my call to editable_field:

editable_field Tagging.new, :tag_id, :type => 'select', :data => @tags_json, :update_url => person_taggings_path(person), :method => 'POST', :onblur => 'submit'

My controller then creates a new Tagging with the person_id and tag_id sent.

editable_field @user, :zip_code, :data => [['visa', 'Visa'], ['mastercard', 'Mastercard'], ['amex', 'American Express']]