Excuse if this is a simple question, but it has been some time since I got stuck into code and/or web GUI's.
I am trying to build an interface for matching of two sets of data. What I had in mind was a list of items from data set 1 in a list in the left hand side and a corresponding list of items from data set 2 on the right hand side. I want the user to be able to choose and item (or items) in the left hand side and then choose the matching item (or items) in the right hand side and then hit a button to match them together (essentially associate those items together).
I can do the association in the back-end. But the HTML element needs to be able to display items from each of the two lists in seperate areas and then when the button is clicked, pass the ID's of the items that have been selected in the left and right lists to the back-end that will then associate them together in the database.
What elements would you suggest I use for something like this (which I assume is fairly trivial).
Thanks
You'll need <input type="checkbox">. That input is used when you need to play with multiple objects at once. Make sure you give it a name="whatever_you_want" attribute too.
If you only wanted to use one selection, you'd use <input type="radio">.
You can also use the following with multiple options inside it:
<select>
<option value="your_value1">Displayed value 1</option>
<option value="your_value2">Displayed value 2</option>
<!-- and so on.... -->
</select>
I don't know why you guys downvoted his question. It was pretty clear when I read it, though maybe he edited it later. I know the question could be broad in some sense, but he said he could do the backend just fine...
Related
I am new to Django. I have a requirement where in based on the TypedChoiceField list selection some part of the form should be changed. Meaning for a particular selection I need some fields to be displayed on the webpage and for other selection I need some other fields to be displayed on the webpage.
If there is already a similar page existing, please point me to that page, it will help me a lot.
What I would do is set up a javascript static file (here's a tutorial) that hides and shows elements using the select method.
For example, if you had categories that each needed a different set of fields, you could put all your categories into a <select> element and then using some simple JS, display the desired fields:
$("#select_object").change(function () {
toggleFields();
});
In that case, #select_object would be that <select> element. Whenever it changes (the user selects something) it shows the fields you want.
My issue is that I have an Angular Search app going, (The one from the Lynda.com course) and when I attempt to add multiple selection boxes they are not cumulative. Meaning that when i have, for instance Cervical in the first box selected, and then attempt to choose Muscle in the second one, it un-populates Cervical. What is it that I need to be doing?
<select ng-model="query">
<option value="Cervical">Cervical</option>
<option value="Thoracic">Thoracic</option>
</select>
<select ng-model="query">
<option value="Muscle">Muscle</option>
<option value="Bone">Bone</option>
<option value="Neural">Neural</option>
<option value="Tendon/Ligament">Tendon/Ligament</option>
</select>
If I also need to add in my code for the .js let me know, but that all seems to be running well. Also, this is utilizing a .json file
-T
Thank you for the above answer. Now my follow-up is that when i change them to query-1 and query-2. I then need to adjust the list's ng-show
<ul class="artistlist" ng-show="query">
<li ng-animate="'animate'" class="artist cf" ng-repeat="item in anatomy | filter: query | orderBy: anatomyOrder:direction">
<a href="#/details/{{anatomy.indexOf(item)}}">
<img ng-src="images/{{item.shortname}}_tn.jpg" alt="Photo of {{item.name}}">
<div class="info">
<h2>{{item.name}}</h2>
<h3>{{item.type}}</h3>
</div>
</a>
</li>
</ul>
However, if I just add a 2nd ng-show="query-2", then what occurs is that the functionality is lost, and the two items i currently have in the JSON file will show up if I have either Thoracic or Cervical selected when they should only show during Cervical.
If I add a completely second UL with its own unique query-2, then by choosing Cervical & Muscle I have two seperate lists appearing instead of a slimming down of the one list that I want.
Thanks for the help
-T
You are using same model for both fields , so one changes, the other also changes but since that value is not in its options so it will show no value
assign different model values like ng-model="query1" and ng-model="query-2"
I created a fiddle for you. Kindly update this and let me know if you want more
https://jsbin.com/buhexo/edit?html,js,output
You have both select boxes bound to the same model. Angular two way data binding is updating both at the same time. However, since you do not have the same options in both lists the first select will "unselect".
Provide a unique name for each model.
You share the model, and since there is 2 way binding when you update the model (i.e. query) all of its references will update as well (i.e. all the select boxes). You need to come up with a scheme where you don't share the model and you keep the first value.
So change to ng-model="query1" and ng-model="query2", then in your controller you will decide how to handle the search parameters.
I have a page where a user can edit a large (~) amount of small items with a very few options, like remove, turn off, turn on and edit name of the item.
I don't know why but the current approach I'm using does not give me the "good code" feeling. I create a form for each action on each item, so I have like 3 forms per item. I feel like forms were meant to submit larger amounts of information.
Fortunately, I found the form* attributes html5 offers (HTML5, yayy!) that kind of allow for this. I created a single delete form on the page and then on each item I added a button, outside of the form.
<button type="submit" form="delete_form" name="item-id" value="1">Delete</button>
Unfortunately that is not the case with the edit-name form. If I add a single form on the page, then have input elements for the name on every item, like
<input name="item-name" type="text" form="update_form"/>
<button type="submit" form="update_form" name="item-id" value="1">Update</button>
...
<input name="item-name" type="text" form="update_form"/>
<button type="submit" form="update_form" name="item-id" value="2">Update</button>
Then on the landing page, item-name will always be the last input's value. I haven't tested this but I am assuming that when submitting the form all input fields pointing to that form with their form attribute are being collected and sent, then on the other side they are all being processed and I'm getting the last one since they all have the same name and are being overwritten.
How, if at all, can I have only a certain input be submitted, depending on which button was clicked, instead of all?
Notice: I can think of hacky ways like including the item id in the input name but it doesn't seem right, also what if there is no id at all.
If a specific button should only post a specific input, then making separate forms sounds like the right way to go.
Your assumption is right, by the way, so another solution would be to put all inputs in the same form, but give them different names, indeed based on an item id. Adding a unique ID or name is the right way to go. After all, how would you know what you are editing if you have no ID? Currently the ID is in the button too, right? You need it.
Anyway, with such a form you can save them all with one click on a submit button.
From a UX perspective, maybe that's a better approach too. Now you would have to do and save each edit separately, which results in a page refresh, which can be annoying and slow.
I would make a form in two versions.
Non-Javascript
The basic form shows all the items to edit, each followed by a group of radio buttons that allow you to update, delete, turn on, or turn off the item.
The form has one big submit button that posts the entire form. All items are updated or their state is changed depending on the radio buttons.
This way, a user can relatively easily edit all items and post their changes without a lot of page refreshes.
JavaScript additions
Using JavaScript/JQuery, you can modify the form. Change the radio buttons to normal buttons and perform the action using AJAX, but only for the item they belong. The big button at the end can be removed, and the form can be altered so it doesn't submit anymore. This way, a user has a rich interaction without the nuisance of the page being constantly reloaded.
What I have in my code right now:
<select>
<option value="...">Dr. Steve 555-222-9393</option>
<option value="...">Jim 333-999-1111</option>
<option value="...">New Emergency Services 0118-999-881-99-9119-7253</option>
</select>
It looks bad, and after a few dozen entries it's very, very hard to read.
What I'd like is to emulate a dropdown by using a table and then displaying just one row of the table at a time (with the currently selected row's value stored in a hidden input).
The question: before I start writing it myself, has someone already done this (in any library)? I've been going through the jquery plugin registry and there are plenty of plugins for converting <ul> to behave like <select> and tons to create fancy multi-selects. (Some of these might even work, if you could disable the multi- part. SE's own Tags input has pretty fancy formatting in its "dropdown".) But if there's one that can turn a <table> (or anything else) into a select-with-columns, it's lost in the noise.
Note: I've found a number of related posts that suggest using monospace fonts and padding to line data up in a plain select tag, but I'd like to think it can be done better, especially after seeing jquery plugins like Chosen.
I wasn't able to find anything that could convert a table to a dropdown with columns but I was able to use SelectBoxIt's data-text attribute to fake it with inline-block:
<select>
<option value="1" data-search="555-555-5555 Bob" data-text="<span style="display:inline-block; min-width:10em; margin-right:1em;">555-555-5555</span><span style="display:inline-block;">Bob</span>"></option>
<option value="2" data-search="444-444-4444 Steve" data-text="<span style="display:inline-block; min-width:10em; margin-right:1em;">444-444-4444</span><span style="display:inline-block;">Steve</span>"></option>
</select>
data-search is required in order for type-to-search to work (otherwise, it appears to expect the user to type the HTML as it appears in data-text). More work would be needed to make the columns line up if someone really entered a phone number like 0118-999-881-99-9119-7253.
I have a form which is used as an interface for CRUD on database records. Some of the elements on the form are interdependent, such that if one field has a value of X, then other fields should be made required and filled out by the user.
A simple example might be something like a personal info section:
<select name="relationship-status">
<option value="single">Single</option>
<option value="married">Married</option>
</select>
<input type="text" name="spouse-first-name" />
<input type="text" name="spouse-last-name" />
...where the fields spouse-first-name and spouse-last-name would be required if relationship-status was set to married, and would be disabled (or hidden) otherwise.
My question is, in this example, when a person goes from married to single and wants to update their data as such, we also want to clear the spouse name values and post this back to the server so that the values are cleared in the database. We can use JavaScript to clear the fields for them when they change to single, but if we disable the form elements so that they can't edit them, then they don't get POSTed when the form is submitted.
I can think of the following solutions:
We could make them readonly instead of disabled, but that method only works for certain form controls (specifically, it does not work for other select elements), so this isn't an option.
We could duplicate each of these fields as a hidden input that would be POSTed with the form, but not editable by the user, but this seems like such a hack.
We could also enable the disabled fields right before submitting, and then re-disable them right afterwards. This is the method I'm using right now, but I feel like I'm missing something, and there has to be a better way.
Is there something I'm not thinking of, or a more sensible way of accomplishing both:
Not allowing the user to edit a field, and
Allowing the field's value to be POSTed with the form, even if blank.
My recommendation is, beside to make the validation in the client side, add in the javascript the function form.submit(), if someone disable the JS won't be able to submit the form, beside that agree with the others comments, add server validation.
I found that the most robust and least kludgy solution is to use the readonly property for all elements except <select>. For <select> elements, I just disable the <option> child elements that aren't currently selected. This effectively prevents the user from changing the value. I then color the <select> as though it were disabled with a gray background to complete the illusion. At this point, all form elements will post with the form, even with no values, and regardless of whether they're "disabled" or not.