For a case where I have models like:
Coutries
States
Cities
Opinions
I'd like to begin with just presenting a user with a dropdown for Coutries.
Once a country is selected, then a States dropdown would appear below Countries.
Once a State is selected, then a Cities dropdown would appear below States.
Once a City is selected, a textboxt appears and the user writes their opinion of the city.
Once text is placed in the textbox, a 'submit' button appears.
Once the user clicks 'submit' I process the form data.
I'd like to populate each dropdown from a corresponding table using the previous selection to limit the dropdown items.
I'd like the same sort of functionality with checkboxes too.
Basically, I'd like to be able to define a cascading form input scheme. I have seen some information on the topic, but nothing that wraps it up tight for Rails 3. For instance:
Rails 3.1 Dependent / Cascading Dropdowns and
Rails 3.1 interdependent select dropdown lists
... seem to offer only partial solutions. I am getting the feeling that I might be missing some fundamental Rails concept and that this (seemingly common) task should be easier. I want to streamline the user input experience. My models have a lot of good default data that I'd like to present to the user as they make their input choices. I just can't seem to get it all on one page.
I don't get the search results I am seeking when I look for "Rails dynamic form input" Searching for "Rails Cascading dropdown" has helped some. "Rails active form" gets me a piece of internet history.
Can someone guide the way?
Thanks!
ADDENDUM
This seems to allude to the trouble I have stumbled upon: http://guides.rubyonrails.org/form_helpers.html#building-complex-forms Perhaps that's my answer?
JQuery is the way to go here I think. Now I am no expert in matters pertaining to JQuery, but I hope I can at least point you in the right direction. To accomplish your cascading list, you could show and hide the select inputs based on the change of the previous one. From there I would look into a JQuery library called jquery-chained. This library would allow you to show in the states select only those states which pertain to the selected country. I do have a couple working examples of the chained library that I could show an example of if you would like, and I am sure there are many examples out there of hiding and showing form elements in JQuery.
Related
There are a bunch of question on this but no answers on how to do it without javascript.
If you have one form that has 2 select boxes. The second select box has different options based on what you choose for the first select box. Here is a js example. Not all users have js enabled so for these users this option would be unavailable.
Can this be achieved solely using CSS3, HTML5 and Ruby? I would show what I've got so far in trying this but I got nothing.
What you are asking is how to manipulate the DOM after it has loaded without a client-side scripting language. This is not possible as far as I am aware; unfortunately that is not what you want to hear.
The proper solution in this case would be to have the user submit the page and generate the second selection box at that time. You will have to rely entirely on server-side logic to handle the problem. So basically something like:
Serve a page with just a single selection box
When the page is posted generate a similar page where the first selection is locked and display a second selection box with the possible options.
Continue the iteration until you have all of the required selections filled out by the user.
Serve the result that the user requested.
I'm new in Rails, I have a Meal model which has many Products. Meals are assign to User (maybe this is important for a concept). In meals/new.html.erb I want to create new Meal as follow:
Click the button "Display Products"
On the same page (meals/new.html.erb) open modal (pop-up) with all products assigned to current user ( I have help method for current-user). It should be displayad like a list or grid with checboxes for example.
Then user can check few products and click "Confirm".
After that in meals/new.html should be appeared list of chosen products with additional input to fill their quantity.
So I have two problem here.
How should I display modal? Is needed any Ajax (I'm not so familiar with this technology)
How can I pass products between view and modal?
Could you help me a little to achieve these goals?
Regarding your first problem, displaying the modal is fairly straight forward. Essentially you will create a div with the proper bootstrap classes to be hidden when the page is loaded, and then create a button that makes it visible. I would recommend either reading over the W3Schools entry on modals, or from the appropriate part of the bootstrap javascript documentation.
Regarding your second question, this depends on exactly what you mean. The modal is part of the view, so if you're only trying to put information that is currently on the modal back onto the "page" behind it, you can do so fairly simply with javascript (copying content out of one element into another, or updating states of inputs). If, on the other hand, you're trying to use the modal to retrieve information from the server (for instance if you wanted to show a list of possible options, and then display detailed information about the selected items from the database) that would require Ajax.
If you have any snippets of code that aren't functioning as you expect, feel free to add your View to the question. In cases like this, usually the best way for us to provide help is for you to take an early crack at this, post the relevant code, and then seek answers for the things that behave unexpectedly.
I hope that helps.
I have created a rails application where users can create and apply for jobs.
As you can imagine many of these jobs come from various countries/cities and have different salaries and industries etc. I would like to create a system that will allow my users to filter through all the options to find what they're most interested in.
I would like to use a combination of radio buttons and a salary slider bar (probably Jquery) in my view to select the results that show. I would then like the page to reload (without refreshing - like AJAX) when the user hits a button called filter results.
A good example of the kind of filtering system I would like to achieve can be seen at WIWT.com if you just click on their top filters button they have an excellent filtering system.
It would be great to know where to get started on this and whether there are any easy to use Gems already out there? Also if anyone could point me in the direction of a thorough tutorial that would be great as much of what I have found has been fairly incomplete and based around has_scope.
Thanks!
I haven't even attempted this yet and am creating this question for advice really.
I have a strongly typed page which receives a form model composed of several components. It is to create a mitigating circumstance (MC) for a student at a university for my final year project. A MC can be composed of the initial problem, assessment extensions, and I use a multi select box to allow the user to select staff retrieved from the database which are able to view the MC once created.
The thing is I feel that a student could be granted many assignment extensions for one problem. I am wander if it is possible to include a button/image on the form which when clicked will create a new assessment extension object, and duplicate the form components to set the values for the object? This would all need to occur without any page refreshes.
Any advice, or links to good tutorials would be appreciated. I have so far been unable to find any suitable examples.
Thanks,
Jon
There are a number of ways to do this, but the fastest is to create a javascript handler which creates the form controls without any sort of server request, all you need to do is keep track of how many items are in your list so you can name the form controls correctly.
Start by making a button that when you click on it creates form controls. Once you get that, work on the naming.
I have done stuff like this before, but I want to figure out the most efficient way of doing this. There is my scenario:
A user can search our site. Depending on that search they have a number of refinements they can make to the data. There are categories for different refinements. Each refinement is represented by a checkbox. The refinements might look like this:
Appliances:
Washer,
Dryer,
Dishwasher,
Microwave
Rooms:
Family,
Dining,
Bedroom,
Game
Each refinement has its own ID. The checkboxes are not ASPX controls. The HTML for the boxes is being built server side. I may want to change that, but not sure if it is going to matter.
When the page is posted back to, I am building the breadcrumbs for it and preselecting (checking) the refinements that were checked. The breadcrumbs are not clickable. However, I need to keep track of what may have been previously checked. So the breadcrumbs should look like this:
Washer, Dryer > Bedroom > Microwave
Each ">" represents a new refinement search. The user can unselect a refinement a remove the item from the breadcrumb list. So let's say they uncheck Dryer and Bedroom:
Washer > Microwave
I need some suggestions on how I should keep track of the refinements and building / rebuilding of the crumbs. TIA!
I don't think breadcrumbs are the right metaphor for this application. Breadcrumbs are a navigational aid, to show the path someone took to get where they are, such as:
Home -> My Account -> Profile -> Edit Preferences -> Change Address
Meaning that the user entered the site via the home page, clicked the My Account link, etc. etc. etc.
This user should be able to get back to the Profile page by clicking "Profile" in the breadcrumb trail.
I think what you really want for this application is a Shopping Basket metaphor, where all refinements are added to a list, and then the list can be displayed at the top of the page in a "My Refinements" area. Bonus points for making the items in the list selectable via CheckBoxes for an add/remove functionality.
Generally, once there's an established metaphor, you shouldn't use it for something else, as users get used to a standard way of doing things. ( I recall coming across sliders being used for a list selector and it was very confusing. Dev. should have stuck with the tried and true Dropdownlist)
I'm making this Community Wiki as I haven't actually answered the question.
Well, i ended up using some hidden input controls to keep track of checkbox states.