{"id":16688013,"url":"https://github.com/danielpclark/dynaspan","last_synced_at":"2025-12-29T23:05:07.622Z","repository":{"id":24143895,"uuid":"27533331","full_name":"danielpclark/dynaspan","owner":"danielpclark","description":"In place text editing for Rails with AJAX substituting text to input field.","archived":false,"fork":false,"pushed_at":"2018-06-03T18:34:54.000Z","size":45,"stargazers_count":26,"open_issues_count":6,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-24T00:27:32.869Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/danielpclark.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-04T09:33:21.000Z","updated_at":"2019-11-03T17:29:27.000Z","dependencies_parsed_at":"2022-08-22T12:10:14.409Z","dependency_job_id":null,"html_url":"https://github.com/danielpclark/dynaspan","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielpclark%2Fdynaspan","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielpclark%2Fdynaspan/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielpclark%2Fdynaspan/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielpclark%2Fdynaspan/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danielpclark","download_url":"https://codeload.github.com/danielpclark/dynaspan/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243447642,"owners_count":20292455,"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":[],"created_at":"2024-10-12T15:26:27.452Z","updated_at":"2025-12-29T23:05:07.580Z","avatar_url":"https://github.com/danielpclark.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Dynaspan\n[![Gem Version](https://badge.fury.io/rb/dynaspan.svg)](http://badge.fury.io/rb/dynaspan)\n[![Code Climate](https://codeclimate.com/github/danielpclark/dynaspan/badges/gpa.svg)](https://codeclimate.com/github/danielpclark/dynaspan)\n##### [JSFiddle Demo](http://jsfiddle.net/680v09y8/)\n\nDynaspan is an AJAX tool for Rails to update one field of any object without interfering with your website experience.  The user will see the web page as normal text.  Where ever you've placed a Dynaspan field people can click on the text and it transforms into text entry.  As soon as the person moves away from that entry it sends the update to the server.\n\nDynaspan also accepts updating an attribute for a nested object, but only 1 level deep.\n\n### Installation\n\n - [ ] Add `gem 'dynaspan'` to your Gemfile\n - [ ] Run `bundle`\n - [ ] Next add `include Dynaspan::ApplicationHelper` inside your **ApplicationHelper** module\n - [ ] Add `//= require dynaspan/dynaspan` to your **application.js** file\n\nAnd it's installed!\n\n### Usage\n\nSimple example:\n```ruby\ndynaspan_text_field(user, :name)\n```\nAnd that's it.  As long as you have a User object with a name field, this will update through\nthe UserController's update method.  **user** is an User Object instance eg: `user = User.first`.\n\n---\n\nPolymorphic/Nested Example #1:\n```ruby\ndynaspan_text_field(@article, comment, :note, '[edit]')\n```\nPolymorphic/Nested Example #2:\n```ruby\ndynaspan_text_field(profile, profile.websites, :url, '[edit]',\n                     {\n                       hidden_fields: {page_name: 'page2'},\n                       callback_on_update: \"alert('Awesome!');\"\n                     }\n                   )\n```\nThis will show the value of note in the comment object as plain text.  It can be clicked on to instantly become a text field input.  And once unselected the `@article` object will update with its nested attribute object `comment` and its new value in the `note` attribute.\n\nYou can use either `dynaspan_text_field` or `dynaspan_text_area` in any of your views.  There are two mandatory parameters.  The first is a the main Object model instance you will be updating.  And the other mandatory field is the symbol of the attribute to update.  There are two optional fields.  The first is the nested attribute object which will have its field updated.  And the last is the optional text for `[edit]`-ing (clicking on to edit which is useful for blank fields).\n```ruby\ndynaspan_text_field(Object,OptionalNestedObject,SymField,OptionalEditText,OptionalOptionsHash)\ndynaspan_text_area(Object,OptionalNestedObject,SymField,OptionalEditText,OptionalOptionsHash)\ndynaspan_select(Object,OptionalNestedObject,SymField,OptionalEditText,OptionsHash)\n```\nThe order is important.  And yes it does NOT change even if you just do:\n```ruby\ndynaspan_text_field(Object,SymField)\n```\nIt is unconventional but the order remains the same despite the optional fields.\n\n### Parameters\n\nThe **first** parameter will always be the Object that will have its update method called.  It must be an instance of the Object.\nFor example current_user being an instance of User.\n\nThe **second** parameter can be a symbol of the field you want to update on the main Object from the first parameter.\n\nThe **second** field can also be a has_one or has_many subset of the first argument moving the symbol to modify to the **third** argument.\nFor example **dynaspan_text_field(author, author.stories, :title)**.  This works as a nested attribute so it includes Polymorphic Objects.\n\nThe last two parameters can be edit text, and then additional options (in that order).  Both are optional.  The edit text\nis a way to be able to click somewhere to open up the input to initially enter text.\n\nThe options Hash currently has these options.\n\n - **:hidden_fields** will put in as many hidden fields as you include in a Hash with key-\u003evalue matching to name-\u003evalue\n - **:callback_on_update** is a no frills callback.  It runs whatever command you give it whenever Dynaspan submits an update to the server\n - **:callback_with_values** will allow you to put a JavaScript command you want called on update and include as many parameters as you'd like.  It will dynamically append a last parameter which is a Hash of two values.  The first is the CSS selector id of the Dynaspan block that just performed the action, the second value is the actual text that was entered.  The keys in this Hash are **ds_selector** and **ds_input**\n - **:unique_id** allows custom ID labelling.  This is no longer recommended to be used as the in-built method is thorough in its uniqeness.\n - **:form_for** allows adding or over-writing any form_for parameter (besides the object being written to). This takes a Hash of parameters just like you would give in a view for your form_for form.  If you have a namespaced object to update use the **url:** option in the hash for the path to use in updating your object.\n - **:html_options** add your own html options to the input field.  Includes ability to add additional classes with `html_options: {class: \"example\"}`.  **:id**, **:onfocus**, and **:onblur** are reserved.\n - **:choices** used for **dynaspan_select** for the choices of the select box.\n - **:options** used for **dynaspan_select** for the options of the select box; such as **:disabled**, **:prompt**, or **:include_blank**.\n - **\u0026block** used only with **dynaspan_select** for passing a block to Rails' form select method.\n\n### How it updates\n\nThe AJAX call will call the update method on your first Object parameter via PATCH.  The optional nested attribute\nand the symbol for the field are all part of the main Object being updated.  There is no expected AJAX reply.  It's\na silent set it and forget it method.  If you don't have your update method configured with a `.js` response then it\nwill successfully perform the update on the object, and then send a complaint about a response but no one will notice\n(unless maybe you look at the server logs).  In other words the client experience is only good, and the server\nwon't hiccup over it.\n\n### It's too easy!\n\n**You're welcome!**\n\n-- Daniel P. Clark\n\n### Styles\n\nAs of version 0.0.6 a class will be dynamically added/removed to a div tag containing the class \"dyna-span\".\nThat class is \"ds-content-present\".  The purpose of this class is to allow CSS content styles depending on\nwhether your text exists or not.  The '[edit]' text you can use as a parameter normally drops below the input\nbox.  If you don't want it to drop you can style it with the proper CSS selector for content present.  E.G.\n`.ds-content-present \u003e dyna-span-edit-text { margin-top:-18px; }` You can set the height to whatever your input\nfield height is to maintain the position of the edit text.\n\nIn version 0.0.7 I've added a class to the parent div object for when the text field dialog is open.  The class\nis \"ds-dialog-open\". This is also to use in CSS styles.  This feature was added since CSS doesn't support\ncalling parents with selectors.  Example usage:\n\n```css\n.ds-content-present \u003e .dyna-span-edit-text {\n  margin-top:-18px;\n}\n\n.ds-dialog-open \u003e .dyna-span-edit-text {\n  margin-top:-24px;\n}\n```\n\n### What's New\n\n\n#### Version 0.1.4 \u0026 0.1.5\n\nUse display name rather than value from option.  And enum behavior may be prone to change so added safeguard scenario.\n\n#### Version 0.1.3\n\nChanged **:unique_id** to work based on the object being rendered and some additional random characters in case the same object will be used more than once.\n\nAdded **:html_options** add your own html options to the input field.  Includes ability to add additional classes with `html_options: {class: \"example\"}`.  **:id**, **:onfocus**, and **:onblur** are reserved.\n\nAdded **dynaspan_select** for having a select box dynamically appear.\n - Added **:choices** used for **dynaspan_select** for the choices of the select box.\n - Added **:options** used for **dynaspan_select** for the options of the select box; such as **:disabled**, **:prompt**, or **:include_blank**.\n - Added **\u0026block** used only with **dynaspan_select** for passing a block to Rails' form select method.\n\n\n\n#### Version 0.1.2\n\nAdded **unique_id** parameter to the options Hash allowing custom ID labelling which is ideal for JavaScript generated usage.\n\nAdded **form_for** parameter to allow adding or over-writing any form_for parameter (besides the object being written to).\nIf you have a namespaced object to update use the **url:** option in the hash for the path to use in updating your object.\n\n#### Version 0.1.1\n\nAdded a JavaScript callback that will **append** a Hash/Dictionary of the updated Dynaspan Object to the end of your\nfunctions parameters.  The method is named **callback_with_values**.\n```ruby\n{\n  callback_with_values: \"console.log();\"\n}\n```\nThis will be called everytime the Dynaspan field submits and it will **inject** the following result **as the last parameter**:\n```ruby\n{\n  ds_selector: \"dyna_span_unique_label\u003c#\u003e\",\n  ds_input:    \"the entered text from the input field\"\n}\n```\n#### Version 0.1.0\n\nAdded the same hidden_fields from version 0.0.8 to support non-nested Objects.  You can use them now on anything.\n\n#### Version 0.0.9\n\nJavaScript callback option now available.  Whenever the Dynaspan field is submitted you can have Dynaspan call\nyour own JavaScript method.\n```ruby\n{\n  callback_on_update: \"someMethod('some-relative-instance-value');\"\n}\n```\n#### Version 0.0.8\n\nYou can now provide an option hash as a last parameter.  Current\nvalid options only include:\n```ruby\n{\n  hidden_fields: { label: \"value\" }\n}\n```\nYou can add as many hidden fields to your Dynaspan objects as you'd like.\n\n\u003eNOTE: In this version hidden fields only applies to nested attributes.\n\nAlso the id parameter will only be passed to the server if it exists.  (No more empty\nstring for id.)  This allows you to create \"new\" polymorphic child objects with Dynaspan.\n\n### License\n\nThe MIT License (MIT)\n\nCopyright (C) 2014-2016 by Daniel P. Clark\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielpclark%2Fdynaspan","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielpclark%2Fdynaspan","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielpclark%2Fdynaspan/lists"}