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.
Related
is there an option or maybe a small custom code to make Gravity Forms radio buttons jump to a field on selection?
In my example, i have a list of 14 options. Using a condition logic when you select one option a custom HTML is revealed right under each and every option. For desktop is super ok, the screen is big and all fit well. The problem is for mobile devices because you select an option but after that, you have to scroll to see the custom HTML.
Is there any option or custom code snippet in Gravity Forms that jumps to that custom HTML when an option is selected?
I found some resources on how to make this using HTML code with ids but this is somehow dynamic though the HTML code is placed in the same position. My first idea was to add the same ID to each and every HTML code so that when a radio button is pressed it scrolls to that ID. Don't know if it makes sense but ...
Can someone help me with some resources or give me some hints? Many thanks.
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.
I am trying to make a product configurator for a website. I'm using MEAN but at this point I just have a problem with AngularJS.
I proceed to explain my program. In the application you have three buttons for the first step of the configuration.
When you click one, AngularJS send back to the web the next three buttons (the values of this buttons depends on the first one you click). And here arrives the problem, this last buttons doesnt seems to work.
After clicking the first button I call the function $scope.getOption2 and it returns this:
htmlsString= '<div><button id="btnS2-1" ng-click= getOption3(1)>1</button></div>'+
'<div><button id="btnS2-2" ng-click= getOption3(2)>2</button></div>'+
'<div><button id="btnS2-3" ng-click= getOption3(3)>3</button></div>';
And this is the way I print it on screen:
$scope.option2 = $sce.trustAsHtml(pruebaHTML);
But the function $scope.getOption3 is never called when I click in one of those buttons.
I have simplified the code, but the essential part is here. I hope somebody can see my problem.
Appending elements like this is not the Angular way, and is frowned upon. Angular does not know of your new buttons, because you cannot manipulate your DOM in this way. You could $compile your elements again, but maybe you should just have the buttons in your template to begin with, you could show them with ngShow. Maybe better yet, see if there is some directive out there that can do what you want - or roll your own.
Look http://docs.angularjs.org/api/ng.$compile for details on $compile.
I have this problem, in a form I have a list of customers that could be more than 300 and, for me, it isn't very simple find over there because I should scroll all results for find a single row!
On the old technology I had a button that opened a pop up where I should research which customer I should select and than I used a javascript for recording the selection on the first form, but It could be a good solution with new technology!
How can I resolve this doubt? What is the best solution for big <select> tag?
You basically want an autocomplete dropdown list. This does not exist in the standard JSF component set and it is also not exactly trivial to implement with JavaScript/jQuery on top of the standard JSF component set because the available values have to be present in the server side's state. You also basically want a dropdown list which is represented by a <div><input><ul><li> instead of a <select><option> because a normal <select> doesn't allow the enduser to type text in. The standard JSF component set does not have a component which renders the desired HTML markup. You'd basically need to create a custom JSF component.
There are 3rd party JSF component libraries which already offer a fullworthy JSF autocomplete dropdown list. It would be easier to use either of them instead of reinventing the wheel by a custom JSF component. Take your pick:
PrimeFaces - the <p:autoComplete> component
RichFaces - the <rich:autocomplete> component
OpenFaces - the <o:suggestionField> component
ICEfaces - the <ice:selectInputText> component
you can try jquery ajax autocomplete
Refer to:
http://docs.jquery.com/Plugins/Autocomplete
http://jqueryui.com/demos/autocomplete/
Yes, the jQuery autocomplete plugin is the best solution for you while you have a large number of items.
By the way, imagine that you would like to select an item with specific letters. While you are using drop down lists, you can point to your wanted items by typing their names from the first letter of each one. But using jQuery autocomplete, you can search a string or a group of letters in everywhere. it does not matter if are your inserted letters located at the first of your item names or in other places.
As ShantanuD said, you can find this plugin in http://jqueryui.com/demos/autocomplete/
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.