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.
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.
What I try to do is very simple.
I have some fields in a form that are optional to fill. To make the form look cleaner, I'd like to show simple links as Add field and display the optional fields below via js unobstructedly.
If the field is present, it will be saved into the database. The field would also have a delete link. When this delete link is clicked, the field will be removed and also its value from the database when saved.
Seems pretty simple, yet I haven't found a simple approach to this. The whole solution involves many aspects such as passing hidden data to the controller to see if the record was hidden in order to delete its data from the database.
I would prefer a gem already optimized for this purpose but I couldn't found any. What I found is intended for associated records but this is not the case. These are not associations, just optional attributes from the same model.
nested_form_fields gem its also not suitable since it needs a checkbox or radio button to be triggered and not Add field/Remove field links which I believe look cleaner.
Is there such thing as a gem to accomplish this simple thing?
Instead of trying to send hidden data etc. Why don't you just load all the form fields but display:none. When a user clicks the 'show' button you display the field. If the click the hide button, just set the field to null and hide it.
When your form reaches the controller it will save the null value to the db for the hidden fields (same as if you deleted the value).
I want to create several instances of same model form a single form. And more importantly, the number of instances aren't known before form rendering.
I've seen several tutorials of this kind, but unfortunately those didn't suit my need. I've seen Ryan bate's nested form tutorial. But I'm not creating nested form. I've also seen some tutorials, which do create multiple objects, but the number of object's are all known in those cases. One of the tutorial is here - http://archive.railsforum.com/viewtopic.php?id=717
User will click a button and a new set of fields for a new object will be inserted just like the nested form demo from ryanb.
Here is a mockup of what I want. It's basically a very small form fit into a single line.
As i understand you need cocoon gem it allows to add form fields
It sounds like you may need to reach beyond Rails views and utilize javascript to dynamically render more "partials" when the user decides to add more fields. Something like this: Adding input elements dynamically to form
If you want to keep your view rendering logic in rails, you could make an AJAX request to your application, have it return just a partial's worth of html back, and insert the response html into your dom.
I'm using ExpressionEngine and SafeCracker along with Ajax (plugin: jquery.form.js - http://jquery.malsup.com/form/).
Best I can tell, SafeCracker will only allow for updating a single entry at a time. However, the UI / UX necessitates that a list be displayed. I've proof of concept'ed an entry by entry on-demand form. That is, click a particular edit link next to each entry and a snippet of jquery creates a form along with displaying a submit button. Click submit and that single entry updates. The inputs don't exist until the Update link is clicked
What I would prefer to do, if possible, is to create the non-form and form versions of each entry as the page is renbered and use some sort of toggle to display one or the other. Again, doable. Then, when I click the Edit link I'd add the necessary attributes to the input so that entry's form elements will be read but the other (display: none) elements for the other entries will be ignored. I'm thinking (out loud) that if I add the attr("name", some-value) that would work. That is, an input with no name will be ignored.
Yes, I can test this and I will. However, even if it works I'm not sure if it's a best practice and/or there's a more ideal way of accomplishing my ends. I'm here looking for validation and/or additional expertise and input.
Thanks in advance.
Just set disabled property to inputs and they will excluded from Form submission, whatever input fields are hidden or visible. Different jQuery methods, like submit() and serialize() follow specification of HTML 4 and exclude all disabled controls of a forms. So one way is to set
$('your_input').prop('disabled', true);
or ,
$('your_input').attr('disabled', 'disabled');
Check following link:
http://www.w3.org/TR/html401/interact/forms.html#successful-controls
Also, you may use a general button instead of a submit, as result you can handle click event on it and within that event you can make exclusion, validation, manipulation on values and what ever you like.
You can put a disabled attribute on them server side or set the property via jQuery:
$(".hidden input").prop("disabled", true);
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.