{"id":14972219,"url":"https://github.com/werein/x-editable-rails","last_synced_at":"2025-04-13T00:43:01.774Z","repository":{"id":56898696,"uuid":"7321956","full_name":"werein/x-editable-rails","owner":"werein","description":"Edit fields easily with X-Editable helper","archived":false,"fork":false,"pushed_at":"2018-09-03T18:10:44.000Z","size":434,"stargazers_count":155,"open_issues_count":18,"forks_count":87,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-13T00:42:57.579Z","etag":null,"topics":["bootstrap","bootstrap3","inline-editor","rails","x-editable"],"latest_commit_sha":null,"homepage":"https://wereinhq.com/guides/x-editable-rails","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/werein.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-12-26T01:26:35.000Z","updated_at":"2024-03-17T14:20:19.000Z","dependencies_parsed_at":"2022-08-21T02:20:45.337Z","dependency_job_id":null,"html_url":"https://github.com/werein/x-editable-rails","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/werein%2Fx-editable-rails","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/werein%2Fx-editable-rails/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/werein%2Fx-editable-rails/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/werein%2Fx-editable-rails/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/werein","download_url":"https://codeload.github.com/werein/x-editable-rails/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650417,"owners_count":21139672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap3","inline-editor","rails","x-editable"],"created_at":"2024-09-24T13:46:34.684Z","updated_at":"2025-04-13T00:43:01.750Z","avatar_url":"https://github.com/werein.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# X::Editable::Rails\n\n[![Build Status](https://travis-ci.org/werein/x-editable-rails.svg)](https://travis-ci.org/werein/x-editable-rails)  [![Code Climate](https://codeclimate.com/github/werein/x-editable-rails/badges/gpa.svg)](https://codeclimate.com/github/werein/x-editable-rails) [![Test coverage](https://codeclimate.com/github/werein/x-editable-rails/badges/coverage.svg)](https://codeclimate.com/github/werein/x-editable-rails) [![Version](https://badge.fury.io/rb/x-editable-rails.svg)](https://badge.fury.io/rb/x-editable-rails) [![Dependencies](https://gemnasium.com/werein/x-editable-rails.svg)](https://gemnasium.com/werein/x-editable-rails)\n\nX-editable for Rails\n\n## Live demo\n\nCheckout live demo [here](https://x-editable-rails.herokuapp.com/?denied=true) \n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n    gem 'x-editable-rails'\n\nAnd then execute:\n\n    $ bundle\n\nOr install it yourself as:\n\n    $ gem install x-editable-rails\n\n## Usage\n\n### Assets\n\nChoose between the following javascripts:\n\n* bootstrap-editable\n* bootstrap2-editable\n* jqueryui-editable\n* jquery-editable-poshytip\n\nYou'll also need to include editable/rails in your scripts for this to work.\n\n```coffee\n#= require editable/bootstrap-editable\n#= require editable/rails\n```\n\nChoose the corresponding stylesheets:\n\n* bootstrap-editable\n* bootstrap2-editable\n* jqueryui-editable\n* jquery-editable\n\n```scss\n// as CSS\n*= require editable/bootstrap-editable\n\n// or SCSS\n@import \"editable/bootstrap-editable\";\n```\n\nEnable editing with jQuery:\n\n```coffee\n$('.editable').editable()\n```\n\nFor custom inputs like the Wysihtml5 editor, add these dependencies:\n\n```coffee\n#= require editable/bootstrap-editable\n#= require editable/inputs-ext/wysihtml5\n#= require editable/inputs-ext/bootstrap-wysihtml5\n#= require editable/inputs-ext/wysihtml5-editable\n#= require editable/rails\n```\n\nAnd related stylesheets:\n\n```css\n//= require editable/bootstrap-editable\n//= require editable/inputs-ext/bootstrap-wysihtml5\n//= require editable/inputs-ext/wysiwyg-color\n```\n\n### Making Things Editable\n\n`x-editable-rails` provides a helper method in your view to make your model values editable.\nBy default, you need to specify the model and property that should be editable.\nA `span` element is rendered with `data-*` attributes used by `x-editable`.\n\n```ruby\n# the editable object and the attribute to edit\n%h1= editable @model, :name\n```\n\nYou can customize the tag name and title attribute:\n\n* **tag** - `span` by default.\n* **title** - The model and attribute name are used to create a capitalized title\n\nThe `editable` helper method automatically adds these `data-*` attributes used by [x-editable](http://vitalets.github.io/x-editable/docs.html).\n\n* **url** - Uses the `polymorphic_path(model)` helper method.\n* **source** - Only populated if the value is a boolean to convert `true` or `false` to \"Yes\" and \"No\".\n* **value** - Uses `model.name`. If `model.name` were a boolean value or if a `source` is specified, the `source` text would be displayed rather than the raw value. (Presumably the value is an ID and the source would have the text associated with that value.)\n* **placeholder** - Uses the `title` value by default\n\n```ruby\n# editable object, what_you_want_update, e: exception - when is xeditable? false or can? :edit, object is false\n%h1= editable @model, :name, url: model_path, value: @model.name.upcase\n```\n\nHere are some special features to enhance what's baked into [x-editable](http://vitalets.github.io/x-editable/docs.html):\n\n* **type** - The type of input is automatically detected. By default, if the value is a boolean, the `type` is \"select\" with a built-in `source` that outputs \"Yes\" and \"No\" (unless another `source` is specified).\n* **source** - In addition to hashes or arrays of hashes, you can also use an array of strings for a simpler structure if the name and value are the same:\n\n```ruby\nsource = [ \"Active\", \"Disabled\" ]\neditable @model, :enabled, source: source\n```\n\n* **value** - This option will override the `model.name` value\n* **classes** - This is a custom option for `x-editable-rails` that will change the editable element's CSS class based on the selected value. Use the `source` hash structure to map a CSS class name to a value. (This [functionality](vendor/assets/javascripts/editable/rails/data_classes.js.coffee) is toggled when the value changes and the \"save\" event is triggered.)\n\n```ruby\nsource  = [ \"Active\", \"Disabled\" ]\nclasses = { \"Active\" =\u003e \"label-success\", \"Disabled\" =\u003e \"label-default\" }\neditable @model, :enabled, source: source, classes: classes, class: \"label\"\n```\n\n* **nested** - Name of a nested attributes (such as [globalize](https://github.com/globalize/globalize)'s `translations`)\n* **nid** - ID of the nested attribute\n\n```ruby\n%h1= editable @model, :name, nested: :translations, nid: @model.translation.id\n\n# example of nested resource\n%h1= editable [picture.gallery, picture], :name, nested: :translations, nid: picture.translation.id\n```\n\n### Authorization\n\nAdd a helper method to your controllers to indicate if `x-editable` should be enabled.\n\n```ruby\ndef xeditable? object = nil\n  true # Or something like current_user.xeditable?\nend\n```\n\nYou can use [CanCan](https://github.com/ryanb/cancan) and checks the `:edit` permission for the model being edited.\n\n```ruby\ndef xeditable? object = nil\n  can?(:edit, object) ? true : false\nend\n```\n\n* **e** - Specify a custom (error) message to display if the value isn't editable\n\n### \"Don't Repeat Yourself\" Templates\n\nTo make your views cleaner, you can specify all your options for each class and attribute in a YAML configuration file.\nAttributes where the `title` or `placeholder` are not different except maybe capitalized can be left out because they are automatically capitalized when rendered (see above).\n\nThis example uses the `MailingList` class and its attributes.\nThe attribute value can be a string, which is used as the `title` and `placeholder`.\nIf you want to specify other options, create a hash of options.\n\nInstall configuration file like this: `rails g x_editable_rails:install`, this step is not necessary\n\n```yaml\nclass_options:\n  MailingList:\n    # Specify placeholder text for each attribute or a Hash of options\n    name: Mailing list name\n    enabled:\n      type: select\n      source:\n        - Active\n        - Disabled\n    reply_email:\n      type: email\n      title: Reply-to email\n  User:\n    email:\n      type: email\n    password:\n      type: password\n    mailing_lists:\n      type: select\n      # specify a URL to get source via AJAX (see x-editable docs)\n      source: \u003c%= ::Rails.application.routes.url_helpers.mailing_lists_source_path %\u003e\n```\n\nNow you can specify your editable fields without options because they will be inherited from your YAML config.\n\n```ruby\nmodel = MailingList.new\n\neditable model, :name    # type: \"text\",   title: \"Mailing list name\"\neditable model, :enabled # type: \"select\", title: \"Enabled\", source: [ \"Active\", \"Disabled\" ]\n```\n\n### Examples\n\nGem also contains demo application with integrated x-editable\n\n```\ncd test/dummy\nrake db:migrate\nrake db:seed\nrails g x_editable_rails:install # optional, it generate config example\nrails s\n```\n\n## Contributing\n\n1. Fork it\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create new Pull Request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwerein%2Fx-editable-rails","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwerein%2Fx-editable-rails","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwerein%2Fx-editable-rails/lists"}