I have a UserType form that's used to edit User entities. Each User has a collection of Permission's which is managed through a CollectionType with
[ 'entry_type'=>'PermissionType', 'allow_add'=>true, 'prototype'=>true ]
When a User object is loaded from Doctrine, the permissions are correct and they are displayed correctly when the view is rendered. When i render the permissions seperately as so:
{%for R in form.permissions%}
{{form_widget(R)}}{{form_label(R)}}{{form_errors(R)}}
{%endfor%}
The data-attribute tag of my containing element is rendered as so:
data-prototype="{{form_widget(form.permissions.vars.prototype)|e}}"
But then the prototype only contains an empty div (but correctly named id).
data-prototype="<div id="user_permissions___name__"></div>"
The documentation states this:
If you render your whole "tags" sub-form at once (e.g.
form_row(form.tags)), then the prototype is automatically available on
the outer div as the data-prototype attribute, similar to what you see
above.
So i tried this approach too, and then the data-prototype attribute of the generated div contains a label as well:
data-prototype="<div><label class="required">__name__label__</label><div id="user_permissions___name__"></div></div>"
The three PermissionTypes which are generated for my test case generate perfect output otherwise.
So my question is: what could be the cause for my prototype not being rendered correctly? Did i uncover a bug perhaps? I also tried the case of rendering the complete form at once, same as the second case.
I found it, I made a mistake. I was adding certain input elements to the form in a PRE_SET_DATA FormEvent, because I wanted to change the label to reflect some of the data. But, when Symfony generates the data-prototype, it calls buildForm but it doesn't set any data. So the resulting empty div was actually quite correct. Building the form directly in buildForm resolved it.
Related
In rails, I have a UserOffer model, that has_many Steps.
When I create a new UserOffer instance, I want that form to include a dropdown that says “select number of steps of that UserOffer”. Based on the number of steps selected (n), I want the form to expand, and include n extra fields, called “step 1 title”, “step 2 title” … “step n title”.
I figured I need to use nested attributed to do this, but I wanted to know how the form would look like, preferably without using JS or Ajax (just with RoR).
I would appreciate any help
If you want to do that, at the same form without refreshing the page, you will need to use an ajax request to the server, in order to add the steps to the UserOffer model. Remember that RoR only let you do things on the render step of the DOM, in other words, if you had rendered the form you will not be able to do another changes on the page without use javascript.
So, I'm trying to select a polymer custom element(using paper_elements) in my view with querySelector. I'm able to select regular html elements just fine. In particular, I'm trying to select a specific paper-input element. I want to be able to query it's input element which is buried in it's second shadowroot.
I've tried the following:
querySelector('#my-paper-input::shadow #input')
querySelector('paper-input::shadow input')
and a bunch of other variations. However, no matter what I do, the query always returns null. It's driving me mad because I can style it in css. What do?
As far as I know you have to use several steps
querySelector('#my-paper-input').shadowRoot.querySelector('input');
but you should also be able to access the value using the attribute of the outer element like
querySelector('#my-paper-input').attributes['value'] or
querySelector('#my-paper-input').attributes['inputValue']
you could also use http://pub.dartlang.org/packages/angular_node_bind
but I wasn't able using Angular with paper-elements recently (see https://github.com/angular/angular.dart/issues/1227)
I need to render a <select> with some values.
Those values correspond to a model that the rendered view's model belongs_to - e.g. Foo has_many Bar, I'm rendering Bar, and its form should include Foo's ids and names in the <select>.
That is no problem - right now I'm using simple_form for that.
But in addition to a fixed set of values, the user should be able to insert a new Foo aynchronously (in some popup / whatever), updating the <select> in the browser with the newly-generated id, and the given name.
That is no problem to implement by hand, but is there a Rails feature (like UJS) or plugin (like simple_form) which provides exactly that?
You can try selectize-rails
Examples can be found here. http://brianreavis.github.io/selectize.js/
I'm trying to set a set of fields to be dynamically displayed on demand. In the model, I've the fields:
attr_accessible ... :instruct1, :instruct2, ... :instruct30
I would like the form to display just instruct1 with a button to add 1 more field until instruct30 is hit and a button to remove one until instruct 1 is hit. All should happen without refreshing page which i think would include some use of AJAX but I couldn't find anything that is similar.
I've searched for something similar but only able to come up with nested form which is not what im looking for as my model is fixed.
The majority of your work is going to be on the client side.
To add and remove form fields dynamically, you have to use javascript.
Check out the HTML that Rails generates for the first field, replicate that and add the additional fields using for example jQuery.
A crude example:
$("#button").click(function() {
$("#theForm")
.append('<input id="instruct2" name="object[instruct2]" type="text">');
});
You'd have to keep track of how many fields you've added or removed.
The best public example that I can think of off the top of my head would be the amazon shopping cart. Where you have a page that displays multiple distinct records that can have multiple distinct fields updated.
I can't put each one in a form tag because the user may modify more than one record and then submit.
I can't just update all the records that I get back because:
1. Performance
2. Auditing
3. If someone changed the record that the user 'didn't change' when they were viewing the page and then the user submits those changes would be overwritten.
So how to best handle getting the data back and then getting which records where changed out of that?
Is that clear?
Use binding! Don't be iterating the form collection in your actions.
Steve Sanderson wrote a blog post about how to do it. I wrote a blog post on how to do it with MvcContrib.FluentHtml. Both posts are very detailed and include downloadable code.
Generate your form in a repeater, and append an ID to the form elements that increments with each new form. Save the number of repeated form elements in a hidden field. Then in your controller, read the value of this hidden field - that'll be the number of forms to read. Then, in a loop, retrieve each form's fields by specifying the name of the field, plus the loop index appended to the name, as the key.
You can use some javascript logic to detect when a form's value changes, and update a hidden field in that form's section if that occurs; or you can hide the original values inside a hidden field with each form section (although I don't recommend this as too many fields / forms will bloat your page).
one (but not necessarily the best) approach is to store which items are changed in a js-variable or something on the client side as they are changed, and then only send the data that is actually different from what the user recieved.
and as Erik stated, you could use hidden form elements to make sure that it works without js as well.