Ruby on Rails HABTM Multiple Dropdowns with AJAX - ruby-on-rails

I have a typical HABTM relationship between members (actual members of our organization, not all have online accounts) and users (online accounts). I have an edit users page for site administrators where multiple members can be assigned to users.
There are too many members to reasonably use checkboxes or a multi-select dropdown. I have decided to use dropdowns that are added by clicking an "Add Member" button that uses an AJAX function to add a dropdown.
Here's what I have working:
I can add dropdowns and pick any member. On save, the relationships are established.
I can edit that user and add more members, remove members, and change members in the dropdown.
The final piece I am struggling with is having my remove link (next to each member drop down) remove a drop down for a new user. The reason being that the action behind the remove link relies on the id of the div that contains the dropdown. When editing a user, this id is generated based on the selected member. For a new user, I do not know the selected member in the dropdown, so I can't assign it an id that I can know about when the remove link is clicked.
Are dropdowns the way to go? Are there any good tutorials or examples of what I am describing out there? Should I perhaps update the div ID in an onchange event in the dropdown?

I have found that the best way to do this is to use the object_id of member to create a unique div id. My Javascript function is then able to use this to remove the div.

Related

Adding / Removing MVC typed partial view to form on mouse click

first question on stack so please be gentle ;). I have a long MVC form that requires the user to be able to click an 'Add Person' button , which would then create a copy of an 'Add Person' partial view , which is then filled in with the Person details. On form submit, the controller would then need to contain the details of each new added person stored as a Person object in the Person[] array I have in my View Model. so for example:
User clicks 'Add Person' button 3 times
3x ' Add Person' partial views are displayed on screen, one after the other
User fills in the 3 listed forms
User submits form
Model submitted to controller contains an array of 3 Person objects, populated with the values the user has entered.
I've got the EditorFor working when displaying a list of template forms for an already populated Array of Person objects, but not sure how I would go about actually inserting a new 'Person' into the model via mouse click. Each new person will need to be given an ID of Guid type.
Sorry if my question is vague.I'm trying not to be. I cant provide sample code for my exact solution as this is for a government project but can whip up an similar example if required. Thank you for your time
This should give you a general idea of how to do it
var partialView = '#Html.Raw(#Html.Partial("Person", new ViewModel()).ToString().Replace("\r\n", String.Empty).Replace("\n", String.Empty).Replace("\r", String.Empty))';
partialView = partialView.replace('id="1"', 'id=ListName_{0}'.format(newId));
$("#persons").append(partialView);
Firstly I create a variable containing the partial view as a string, next we need to change the ids and the rest of the properties so they follow the convention used for lists when data binding in MVC.
It follows the following convention
<input type="text" name="stocks[0].Key" value="MSFT" />
<input type="text" name="stocks[1].Key" value="AAPL" />
See the following for a description
http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx
Once all ids are correctly created you can post the form as per usual.
You're not going to be able to add a person to the view model from client side code. The view model doesn't exist client side, only server side.
My suggestion is to make sure the partial views are all in the form being submitted and have an array of Person objects as a parameter in the controller action you're posting to. You'll need to make sure you use the correct convention for each name on each input field of each partial view.
So for example the partial view each input field would need to be named like this Person[index].Field. Where index is an integer and Field is the appropriate property from the Person model that this particular input tag represents.

Best Practice, render same partial multiple times, similar id issue

I have a master-detail-master-detail (order header-> order details-> work order header->Work order details) relationship that I want to show on a single page. I have a standard form to start with the order header, then a series of kendo ui tabs, one for each order detail. Within the tab, I display a partial view showing a nested master detail relationship showing the Work Order Header (form) and Work order Details (grid).
The problem with this is that since the partial is being generated multiple times on the same page, you have non-unique element ids.
All in all, it works, except that it violates non-unique Id rules and since I have some kendo widgets in the partial, they don't work because of this.
So just wondering what is the best way to handle this? I suppose you could put a suffix on each Id, and then capture the form submit and strip the suffix off before the form is submitted to the controller...
Are there any other ways?

Person with Multiple Addresses

I'm trying to create a Create page for a slightly complex 'view model'/view setup that I'm looking for.
Imagine I have two entities -
Person
-PersonID
-Name
-Height
-Nationality
And that Person can have multiple Addresses - here's the Address entity:
Address
-PersonID
-AddressDescriptor
-FirstLine
-SecondLine
-City
-ZipCode
Now in my Person Create view I want the user to be able to enter the person details,
and then add as many addresses as they like.
I'm visualizing this as something like a set of text boxes for both the person and the address area. Followed by an add button for the address. When clicked this add button would add the address to a grid of added addresses. The grid would also have options for delete/edit.
Finally there would be a submit button to save the person and address records to the database.
What is my best bet for achieving something like this.
Should I be looking to use partial views for the grid / rendered by AJAX calls back to the controller? If so could someone point me to a modern example of doing this - using Razor if possible?
This runs through the basic principles of what you are trying to achieve:
http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/
You could create an action that accepts AJAX posts to add the user. Just create a jQuery function that will create your form when they click "add address" and on submit, another jquery ajax call to post to your controller action.

Create/Edit Parent and Child Form MVC

I am using C# and MVC3
I have a simple Entity Model
Entities: Orders , OrderItems
Orders have 0 or more Order Items
I want to create a single page to create an order
While on this Page I would fill in the fields that are in the Orders table (Customer, Phone, Order Number...etc)
Then there would be a grid (I am using Telerik MVC grid). I want to add OrderItems to this grid. I was thinking of having s small form above the grid with its own submit button. I can submit using ajax and refresh the grid using ajax.
At the bottom there would be a single submit button that coudl create the order and all the orderitems at once.
I can't seem to piece this enitre solution together.
Short answer: follow this post - how to implement Create action on Order and Order Details on single Create View
Basically, convert your code to partial views in your main view. Also separate order entry form from displaying the order list. Also you may find useful to look at this resource - Empty Model with Partial View

Grails multiple select

I'm implementing a registration form in Grails with a bit of Ajax. My goal is to display a radio group of three options and based on the selection, the relevant domain fields will appear below.
I have three domain objects: an User, Donor and Teacher. A User can be a Donor, Teacher or both, thus the reason for a wrapping object.
All the examples I've seen with multiple selections from a list or radio group deal with different instances of the same domain class. Is it possible to do this with multiple domain objects?
Create 3 templates for each domain class and based on the value of your select or radio button render the correspondent template.
Check this out: AJAX Driven SELECTs in GSP
Maybe can solve your issue

Resources