I need to implement a drop-down which has a delete 'X' option next to each option item. Somewhat like the image shown below.
The drop-down is populated dynamically and I need a way that does not inlvolve using list as an alternative.
EDIT: The icons next to each dropdown item refers to 'Edit'/'Delete'
You cannot put a checkbox into the usual <select> or multi-select HTML element.
However, here is another question where several good options are discussed.
This looks like the most useful and best suited to your purpose:
https://stackoverflow.com/a/27547021/1447509
And here is an example of how to change the default checkmark to an X:
https://stackoverflow.com/a/40123793/1447509
Sources:
How to use Checkbox inside Select Option
After selecting check box Instead of Tick symbol need X in html
UPDATE:
Given that you need both the HTML markup and the javascript to make it do what you want, you have two (possibly 3) steps to do:
This answer provides a good example of how to create the custom-rolled <select> control.
This answer shows you how to replace the checkbox created in step 1 with an icon/image of your choosing.
The javascript to remove the x'd <option> is very simple:
$(this).closest('option').remove();
IF you also need to save these results, then you also need to learn:
4a. Server-side SESSIONS (so that each user's customizations are saved for them)
4b. A login system, so you know for which user to save the current customizations.
4c. Just the basics of how to use a back-end database, such as MySQL/MariaDB, in which to store the user customizations.
4d. AJAX - so you can schlep info to the back-end for insertion into the database without refreshing (or navigating away from) the current page. AJAX replaces the ancient and no-longer-used <form> construct. Frankly, once you've used AJAX a couple of times, you'll never go back. Totally easy.
If you are in a bind and need someone to create the whole thing for you, I refer you to one of these websites - I have used such services myself and can recommend them.
Related
is there any ready widget like that?
If not, can I combine the dijit filteringSelect with dojox multichecked?
if not, is it easy to create one of my own or has any one started doing this? it's so necessary for my project.
There is no widget like that as far as I know (the multichecked widget itself is not even a standard widget, since it's a part from DojoX).
About your question of combining both. I don't think that will be easy, because the dijit/form/FilteringSelect does not use a <select> as widget and I don't think they're made to be ran together.
And the answer to your last question: it all depends on what functionality you exactly need. A dijit/form/FilteringSelect only allows you to select 1 value (it's a textbox with a dropdown in fact, and a textbox can only have 1 value).
If you want to create a variant with radio buttons, then that is possible, but it is not an easy job. The multichecked is working with a simple DOM node, however, the dijit/form/FilteringSelect offers a lot more things like autocomplete, stores, ... . To make your widget work, you need to listen to all these events and adapt yuur radio buttons to it.
I made a simple example that is only displaying radio buttons for each item in the filtering select, the code can be seen at JSFiddle. However, it does not react to changes, that's a part that you will have to implement.
I have a web application for tagging data and viewing data by tag, so my UI is a list of checkboxes for each tag, a list of checkboxes for each data item, a "Tag" button, which adds the checked tags to the checked data, and a "Filter" button, which ignores the checked data and just displays only the data items with the given tag.
My problem is that the former operation (tagging data) is "obviously" a POST operation, whereas the latter operation (viewing data according to a tag) is "obviously" a GET operation. But the method attribute is attached to the form, not the submit button, so I have to choose one or other for both buttons.
I don't want to make two forms, since as far as I can tell this would force me to duplicate the entire tag list. Is there any way I can choose my method based on the choice of submit button?
A JavaScript solution is permissible, but one without would be preferred.
(I am going to post an answer to this question, but I don't particularly like it, so I would welcome alternatives).
In principle, you could use the formmethod attribute in a submit button, as per HTML5. However, it is not recognized by IE, even in IE 9. The existence of the feature in HTML5 indirectly proves that previous versions of HTML lack a feature for this.
On the other hand, the POST method can be used even for simple viewing that does not cause any changes in the outside world, and in many situations it has to be used for technical reasons (e.g., too much data). So I think the method issue is not very relevant; just use POST.
I would honestly go with a javascript solution, in the onsubmit of the form fire a method which a) checks the submit button that was pressed and b) based on this changes the method of the form.
One possible solution would be to use POST, and then have the server give a 303 See Other header to change it into a GET request. This involves making two requests to serve the purpose of one, which is unfortunate, but at least means that the URL will change so people can link to a specific tag selection.
I agree with javascript solution, proposed by Jon Taylor, the problem is not if your form's method is GET or POST, but how do you filter/validate/sanitize user input. If your concern is related to the fact, that the user can manipulate the form's method, then you should implement solution to that matter on server side.
We are porting our MFC based client to Dojo. Is there any widget similar to listbox control. At present I am using DataGrid, but that seems heavy and overkill for our purposes. Alternatively what is best widget to replace listbox.
Update: I have already looked at dijit.form.multiselect, and I dont think that meets my requirement. MFC Listbox typically looks like this. I dont see (or rather dont know) how to replicate this with multiselect. It is possible that DataGrid is best fit for the control.
If you use dojo 1.7, take a look at the new DGrid.
For an example looking like yours, go to the tests page and pickup the Selector.html example.
Here are some options depending on which part of the ListBox you want to create:
dijit.Dialog to create a basic dialog box.
dijit.form.FilteringSelect to create a drop-down with your options (single select only).
You could also use radio buttons or checkboxes for your options depending on whether multiple selections are allowed.
I have an HTML table with rows (20 rows).
Every row has a listbox of countries (about 250 countries) that are filled using a single dataset from the database.
Loading time is quick enough, but rendering time is really a mess.
Is there any way I can speed the rendering of those listboxes?
You could load it only once, and then copy the DOM element everywhere you need it...
I'm not sure if this would improve a lot since it would rely more on the user's computer, but I guess it's worth trying if it's too slow the way it is right now.
edit: here's how I'd do it. Use with caution, I haven't tested it and there is most likely tons of errors with this code, it's just to give you an idea of what I was saying.
<mylistbox id="listboxtemplate"> ... </>
<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>
on document ready, using jquery:
jQuery(".thisPlaceNeedsAListbox").append( jQuery("#listboxtemplate").clone() )
You could try to add next select box only after user has selected previous one (using JavaScript).
I'm quite sure that you can rethink the form or the process, but I can't suggest anything specific since you haven't given enough information. For example depending on situation you could use multi-select or some fancy JavaScript widget.
EDIT based on your comment:
Then how about serving the table without selects. And if user double clicks on a country field you change the text element to select element using javascript. And once user has selected the country you can change back to text element. You can submit results back to server using Ajax (after user has selected the country) or using hidden fields a submit button. This way DOM will never contain more then 1 select element.
You can pass countries to javascript using inline JSON object/array (in script tags). To make things even more faster after user has edited the first element, just hide (css: display: none;) the first build select element and clone/move it around each time user wants to edit a row.
As you can see there are a lot of paths you can take using this approach, it all depends how much you want to optimize/work on it.
which tag to use if i want to select an option from dropdown as wel as i can insert my own option.
using jsp can i do it? i m able to fetch the complete list to serve as option but i want to insert my own option as wel. what is the convenient technique using jsp? i mean like the way we insert into text box. i have seen in some sites that they provide options to choose and in one of the option you can fill ur own value plz help
I think I understand this question.
You are saying you have a select populated from server side JSP, but once the list is populated you would like to be able to add more options manually, by typing them in, almost like a combo-box?
There is a Microsoft Active X control that does this, but I would avoid this at ALL costs, simply because its not cross browser compatible.
You could try roll your own control, or look at the following:
Pay special attention to that last link, it uses jQuery so should be easy enough to implement. Ofc you're going to have to use some custom JSP to populate the control, but it should give you the desired effect.
http://steveorr.net/articles/combobox.aspx
http://www.codeproject.com/KB/custom-controls/combobox.aspx
http://www.thunderguy.com/semicolon/2009/07/16/simple-combo-box-jquery-plugin/