I'm trying to figure out the rails way to use formtastic to build out a couple of dropdown boxes and then based on those values make some ajax calls. For example:
At the top level my model is a PostOffice with a location_id
User selects dropdown #1 which is a list of states.
When dropdown #1 is changed dropdown #2 is populated with cities via an ajax call
When dropdown #2 is changed dropdown #3 is populated with addresses via an ajax call
User clicks 'get info' and the form submit happens.
Do I need to build out multiple semantic_form_for calls in my view to populate subsequent dropdown boxes? I can get this to work using a bunch of jquery but it's resulting in some unmaintainable code. Seems like I need to have it setup so that when I change dropdown #1 I need to make a request that generates a partial for dropdown #2.
Related
I have two dropdowns and a submit button on a rails form HAML page. I would like dropdown 2's content be populated dynamically based on dropdown 1 selection, and submit the form based on both of two dropdown's selected values.
I know how to do the submit part, but I'm a bit lost on the dynamic rendering for dropdowns. I can let dropdown 1 to call a controller method to update db (used by dropdown 2) and redirect to the form. This doesn't seem to perform well. Any suggestions on how to write the two dropdowns?
I'm improving RoR application. In this app there is a page where user can crete or edit items. This page contains form. In that form there are 11 tabs (implemented with javascript, we use bootsrap's tabbable here). Form controls are divided between 11 tabs.
There is a problem: After user submits form with wrong data in 2nd or 3rd tab, the same form is shown, and first tab is activated.
I need to solve this problem. I want not to use client side validation. All validation should be done in rails. Also I don't want to use AJAX.
So if user submits form that have wrong data in 5th tab, then 5th tab must be shown after submit, and form error messages should be placed into 5th tab. How can I do that?
I think the problem is a Javascript one - how to load up validation errors in the correct tabs?
From my perspective, it seems Rails is handling the data you send, and returns the original page your request was sent from. The problem is this does not load the correct tabs, which is JS' responsibility (front-end)
Recommendation
I would personally create an anonymous function to load up the tabs which have errors. You need to remember tabs are all HTML elements, and Rails append field_with_error wrapper around fields with errors
I don't have any experience with Bootstrap tabs, but you could do something like this:
#app/assets/javascripts/application.js
$(function() {
$('#myTab .div_with_errors:first').tab('show')
});
Questions on Rails 3.0.7, and JQuery 1.5.1
Overview
I'm trying to do the following thing. I have a web page with a form on one side that lets me create a category, and a list of items on the other side, with a checkbox for each item. I would like to be able to check the check box, for each item, so that when I submit the form to create the category, the newly created category also creates a has_many through association with each item.
So the association part works almost, I can submit a list of checked checkboxes, and Rails creates the association on the backend if I send the list of checked items.
Problem:
Here's what doesn't work:
I am trying to submit the form via Ajax, so I wanted to bind an event handle to the rails.js 'ajax:beforeSend' event, so that it would scan through my list of checked checkboxes and at the checked ids to a hidden form field.
The problem is: I try to get a list of all the checked boxes, and add them to the hidden field when the user clicks the Submit button. Therefore, I figured I'd place the code to do so in the ajax:beforeSend event handler. What I "THINK" I'm noticing however, is that rails.js has somehow already processed the form fields, and constructed the HTTP query before this handler fires. I notice this through the following behavior:
Observed Behavior
1) I can reload a fresh page, click the button to submit the form, the alert boxes from my handler pop up saying that no boxes are checked, and the created category in my db has no associated items (CORRECT BEHAVIOR)
2) I then click 1 checkbox, the alert boxes pop up showing which boxes are checked (CORRECT). But then when I submit thee form, the category in the DB still has no associate items. And I can see through firebug and the server logs that and HTTP query was sent containing the old parameter list, not the newer one. (WRONG)
3) I then submit the same form again, changing nothing, and it shows me the correct number of items.
So I get the impression that the parameter construction is lagging. I hope this wasn't too long, an someone can help me figure out what is going on.
My Question:
What event do I need to bind to, so that the form gets submitted with the correct parameters? Or is there another way to go about it completely?
Thanks
Here's my code below.
Thanks,
$('#my_form')
/* Now we need to configure the checkboxes to create an association between
* the items, and the interaction that is being created. First we will bind a
* function to the click event, and if the box is then checked, we will add
* the item id to the list of interaction items. If it is unchecked, we will
* remove the item from the list of interaction items.
*/
.live('ajax:beforeSend', function(event){
// First get a list of all the checked Items
var checked_items = new Array();
$('#items input[type="checkbox"]:checked').each(function(){
checked_items.push(this.getAttribute('data-item-id'));
});
// Then add this list of items to the new_interaction form to be submitted
$('#interaction_new_items').val(checked_items);
alert(checked_items);
alert($('#interaction_new_items').val());
})
Bind to the click event on the submit button itself. The click event will be processed before your ajax beforeSend event.
$('#my_form .submit').click(function() {
// rest of your code here
});
A more flexible solution (say, in case you wanted to submit the form with something other than a click) would be to bind to the form's submit event.
$('#my_form').submit(function() {
// Tweak your form data here
})
I've got a list of products in an admin section of my website. I have the product title and then an icon for delete and an icon for set visible/set invisible. I have both icons wrapped in their own form elements so they fire seperate Actions. I now one to add some checkboxes to each line so I can do a bulk delete. Following this:
How to handle checkboxes in ASP.NET MVC forms?
I'd need to wrap the whole list in a form tag to return the checkbox values, but then I have the icons on each row wrapped in form tags. I'm not sure what to do or how to handle this so it all works. How can I maintain the line form tags but still get bulk update functionality?
It's probably going to require some JavaScript. I would create a form outside of the table with a hidden element. When a box is checked, update the hidden element to contain a comma-separated list of all the IDs for rows that have the checkboxes checked (this would be pretty straightforward with jQuery). When that form is submitted, parse the values of the hidden element and delete accordingly.
Another option is to wrap the whole thing in one form and make the names of the delete buttons unique, then check for that when the form is submitted. When doing a bulk delete, you'll have all the checkbox values submitted like normal and you'll know it's a bulk delete based on which button they pressed to submit the form.
I've got a page that creates a ticket in our help desk system. It acts as a wizard with the following steps:
Step 1
User selects the customer from a dropdown list. There is a jquery onchange event that fires and generates the list for step 2 and hides the step1 div and shows the step2 div.
Step 2
User selects the location from a dropdown list. This is generated based on the customer selected in step 1. There is a jquery onchange event that fires and generates the list for step 3 and hides the step2 div and shows the step3 div.
Step 3
User selects the type from a dropdown list and enters text into 3 different text boxes. If the user fails to enter text or enters invalid text my controller changes the model state to invalid and returns the view.
How can I get all the dropdowns to repopulate again with the correct selection the user chose and get the page to redisplay on Step 3?
My first thought was to use ajax and when the user clicks the Create button, I could create the ticket from there and if successful send them to the ticket detail. If unsuccessful, well just display an error message and i'm still on the page so no big deal. Now that I write it out I think this is best. Are there any major issues using ajax? It seems most sites use some type of javascript or ajax these days.
Second thought is to not use ajax at all and submit all the pages to the server.
What do you suggest?
The 3 steps display completely different markup.
There is possibly not much you can gain by an AJAX-version, except the avoided page flicker when you change the steps.
If you go the non-AJAX way you gain:
nice bookmarkable links ( www.ticketsystem.com/Customer -> www.ticketsystem.com/Customer/Microsoft/ -> www.ticketsystem.com/Customer/Microsoft/Location -> www.ticketsystem.com/Customer/Microsoft/Location/Redmond )
browser history works
easier testing
To redisplay the lists after step 3 you would load all of them and set the selected item according to the parameter in the URL.
I agree with you. Use AJAX to submit the ticket.