I follow the API instructions, but the form behavior doesn't output what it says it should in the example and example source code.
I installed simpleform and bootstrap.
I did rails g simple_form:install --bootstrap
I see that the files have been generated.
Simpleform says to do code for an element like so
= simple_form_for #park, html: { multipart: true, role: "form", class: "form-horizontal" } do |f|
- if #park.errors.any?
#error_explanation
%h2= "#{pluralize(#park.errors.count, "error")} prohibited this park from being saved:"
%ul
- #park.errors.full_messages.each do |msg|
%li= msg
= f.input :address, label: 'address', autofocus: true, placeholder: "123 Fake Street Irvine, CA 90123", class: "form-control"
The layers of DSLs for simple output of forms is getting kind of ridiculous.
Many things wrong with the output
1) the wrapping classes don't match bootstrap's form-group, and instead it's still controls
2) the form doesn't stretch out 100% width like it should.
3) If an input isn't detected as "required", the label doesn't get wrapped, and it sticks off to the left of the screen.
Why isn't the API working?
The simple form generator command with bootstrap generates config initializers files for bootstrap 2.x
Thus you must modify the initializer files to spit out appropriate classes.
See the answer to this question.
Bootstrap3 and simple form
Related
I tried to implement a form with form framework in the news detail view. The basic way is explained here:
https://docs.typo3.org/c/typo3/cms-form/10.4/en-us/I/Concepts/FrontendRendering/Index.html#render-within-your-own-extbase-extension
Viewhelper:
<formvh:render persistenceIdentifier="EXT:myext/Resources/Private/Forms/myforms.form.yaml"/>
Form definition:
renderingOptions:
controllerAction: detailAction
addQueryString: true
submitButtonLabel: Absenden
fluidAdditionalAttributes:
class: ''
identifier: myForm
label: 'myLabel'
type: Form
prototypeName: myPrototype
The form is displayed. When I submit the form the news detail view is shown again including the form, but it's empty. The form is not processed. Something is missing, but I cannot find it in the manual.
Thanks!
I think the important part is written in the note below the linked paragraph:
In general, you can override each and every form definition with the help of TypoScript (see ‘TypoScript overrides’). This feature is not supported when you are rendering forms via the RenderViewHelper.
Luckily, there is a solution for your problem: use the ‘overrideConfiguration’ parameter instead. This way, you can override the form definition within your template. Provide an according array as shown in the example below.
<formvh:render persistenceIdentifier="EXT:my_site_package/Resources/Private/Forms/MyForm.yaml" overrideConfiguration="{renderables: {0: {renderables: {0: {label: 'My shiny new label'}}}}}"/>
That means you can check for post-variables by TypoScript conditions and adjust the controllerAction (and view) accordingly. The show / detail action is not processing the form usually, so it's logical that another action has to be assigned. I'm not sure in the moment if it does matter if double opt-in or a confirmation page shall be shown, that might depend on the form-extension.
After some hours of experimenting i was able to solve the problem. It ist simply a matter of caching ...
Georg has implemented in news a special caching engine which ignores the config.no_cache = 1 definition in setup. So the detail view of news is always cached even when the whole installation ist set to config.no_cache = 1. So this combination seems to work:
Viewhelper in Detail.html:
<formvh:render persistenceIdentifier="EXT:myext/Resources/Private/Forms/myforms.form.yaml"/>
And this definitions in the yaml file of the form:
renderingOptions:
controllerAction: detail
addQueryString: true
submitButtonLabel: Absenden
additionalParams:
no_cache: 1
identifier: myForm
label: 'myLabel'
type: Form
prototypeName: myPrototype
This renders the whole page without cache which is not optimal. It would be better when only the news entry is rendered without cache. and there is the problem, that in many installations the parameter 'disableNoCacheParameter' is set in the localconfiguration file which disallowes no_cache=1 in urls.
So i looked for an other - better - possibility to work around this problem.
First make a new fluid template anywhere in your resources folder with the modified viewhelper from above:
<formvh:render persistenceIdentifier="{settings.persistenceIdentifier}"/>
Then write a typoscript like this:
lib.embeddedForm = COA_INT
lib.embeddedForm {
10 = FLUIDTEMPLATE
10 {
file = EXT:myext/Resources/Private/Forms/myForm.html
settings {
EXT:myext/Resources/Private/Forms/myforms.form.yaml
}
extbase {
pluginName = Formframework
controllerExtensionName = Form
controllerName = FormFrontend
controllerActionName = perform
}
}
}
And final you can embed the form with
<f:cObject typoscriptObjectPath="lib.embeddedForm" />
as COA_INT in the news template. This disables the caching of the form.
Perhaps it helps ...
I have a model Company that has a type field. There are two subclasses Fleet and Dealer.
I know the inheritance is working so I'm now working towards the views working too. However the views/companies/_form.html.erb is producing this error when I click edit on a specific company object on my webpage:
undefined method `dealer_path' for #<ActionView::Base:0x000000000418c0>
Here is the form_with tag:
<%= form_with(model: company, class: "contents") do |form| %>
*CONTENT*
<%end%>
I want to generate the form based on what company type I am looking at and for all the fields to be populated with their corresponding data.
I found this warning on the ROR site (https://guides.rubyonrails.org/form_helpers.html):
When you're using STI (single-table inheritance) with your models, you can't rely on record identification on a subclass if only their parent class is declared a resource. You will have to specify :url, and :scope (the model name) explicitly.
But I do not understand exactly what this means and I believe it is the key to my solution. I wish there was an example of this situation on that guide.
Any help or suggestions are welcome and appreciated!
UPDATE
I changed the form_with tag to be:
<%= form_with(model: [:company #company], class: "contents") do |form| %>
and from my understanding this now generates the URL companies/:id/edit
This is closer, and now brings me to the companies edit page but I can't update now because the changes don't persist.
My NEW question now is, what routes should I have set up?
If I'm on localhost:3000/companies and I click 'show company', should this take me to /companies/id: or take me to /dealer/id: / /fleet/id: ?
I have managed to route the app so it will take me to /companies/id regardless of the type value of the object. This works well and all CRUD is working well now too.
I didn't log exactly what it was I changed this time as I just reverted to a previous commit and rebuilt from there.
I am using the TinyMCE editor in combination with Web Components or more precisely Angular Elements to produce HTML with placeholder tags. These placeholder tags are later used to instantiate Angular components. Getting TinyMCE to allow custom HTML tags is easy with the custom_elements config parameter. Just to be clear, I do not want Web Components inside the editor itself. I am using the text(HTML) that the editor produces in a later stage, not really relevant for this problem. The editor output is perfect as it is. My problem is related to the behaviour of the editor.
I want this
<custom-container>
<custom-item>Item one</custom-item>
<custom-item>Item two</custom-item>
<custom-item>Item three</custom-item>
</custom-container>
to feel and behave like a regular list.
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
I have tried the following config with some success.
{
custom_elements: 'custom-container,custom-item',
valid_children: 'custom-container[custom-item]',
formats: {
container: { block: 'custom-container', merge_siblings: true, wrapper: true },
},
}
I get stuck within the custom container and can't escape it. I would like <custom-container> to behave like <ul> and <custom-item> to behave like <li>. Someone might suggest using the list that is already implemented and simply changing the tag names. I would if I could, but I need the list... -.- I have a feeling that it is possible to achieve my goal with some keyboard commands or event listening, but I have no idea where to start. Help!
I had the same issue with custom elements. You can try add ~ at the beginning of each element.
This worked for me.
{
custom_elements: '~custom-container,~custom-item',
valid_children: 'custom-container[custom-item]',
formats: {
container: { block: 'custom-container', merge_siblings: true, wrapper: true },
},
}
Is there a way that I can put a green tick or a red cross, and a process bar"Circular" besides a label in my forms? Basically I need to show if user has inputted text or not and if he/she is still inputting text, should I use ajax with zend? if so please give tips I am using Zend. Something like this image at the end of the link
How to put green tick or red cross in winforms?
Thanks.
Zend is handling your server side logic and performs all the HTML generation, filtration, validation, etc. If you want Zend to generate additional code for your elements you will have to create a new form element decorator or layout your form manually using template (display each element separately instead of just <?= $form ?>. You can also look into ZendX project.
I suggest you take a little different route and add client layer for presentation.
For example, when you define the element add certain classes to it...
$elem = new Zend_Form_Element_Text('my_element', array(
'class' => 'required validate-phone ui-icon-phone'
));
On client side add some CSS
input[type=text].ui-icon-phone {
background: url(...);
}
On client side add JS to bind to the classes of elements to do validation. I'd suggest to use jquery validation plugin... you can overload the way messages are displayed and user red X on invalid inputs. Also, look into Masked Input Plugin (see demo).
With such approach your service side code is independent of the client side code.
Can anyone tell me how to easily implement auto-complete in rails 3.1?thanks. p.s. What's the best solution for simple_form to do this??
Besides, I also want to know how to implement meetup's RSVP instant push in rails?
I have the following form, but it didn't work, please advise.
%table
= simple_form_for(#book) do |f|
%th book name
%th
= f.input :name, label: false, placeholder: "add a name", :wrapper_html => { :id => 'autocomplete' }
= f.input :object, autofocus: true, label: false
%th
= f.button :submit, "Yes!"
I built a simple Rails 3.1 app using the jQueryUI autocompletion feature here. You simply add the jQueryUI library to your assets, add a css class or id to the actual text field that shall be autocompleted and put some javascript logic in your application, like:
$(function() {
$('#autocomplete').autocomplete({
source: '/movies/autocomplete'
});
});
with #autocomplete the css id of the text field. '/movies/autocomplete' is the actual route that will HTTp requested with the data that's put into the text field. In the movies#autocomplete action you then use that param to search for data for the autocompletion. Depending in what kind of jQueryUI autocompletion you use, you simply return an array like [{:label => 'FOO', :value => 'foo'}, ...] as JSON. label is the text you get autocompleted, value is the text that is put into the text field when clicking the label. I think and hope the code from the repo is quite understandable. Also, have a look at the JQueryUI library.
Though there shouldn't be a problem with simple_form, since it's just the text field that gets touched.
Best regards
Tobias