JSF has autocomplete functionality with enablemanualInput but whenever I try to input a new value which is not present in the dropdown list it turns red and dropdown keeps open to show that no such entry is available. I want to replicate combobox functionality currently present in html/JQUERY UI. Is there any way to do so.
Related
In a Vaadin 14 application I wanted to exchange this standard icon at a combobox:
for another icon (and achieved the goal, but I think that my way is not the best / nicest).
My full use case is assembling a list, some buttons and a combobox to create this sortable multi-select-list:
The user can add a new value to the list by selecting the new value in the combobox below.
To exchange the standard icon for the combobox (--lumo-icons-dropdown = \ea18, an arrow showing down) for a plus-icon, I used this code: combobox.getElement().getStyle().set("--lumo-icons-dropdown", "\"\\ea23\""); (yes, all the quotes and backslashes are as shown)
This works fine (as you can see in the screenshot), but it feels incorrect to overwrite an icon.
Is there another (better) way to exchange the standard dropdown icon at a Vaadin combobox for another icon?
When I use this setting I have one in a form in a dialog, and one in a form that is in a popup. The dropdowns look different.
When data-native-menu="false" the dropdown in the dialog appears in another dialog, which actually looks quite nice. I assume this will allow a more consistent look and feel accross devices.
However when I use this setting data-native-menu="false" on a Select in a popup it does not show the standard select, not the dialog.
Thanks
There's a good reason for this.
As you can see there are 2 kinds of select widget. First one uses native looking select box (one showed with data-native-menu="true"). Other one still uses native select box but it hides it and shows custom jQuery Mobile select box widget (one showed with data-native-menu="false"). This jQuery Mobile widget is shown as popup. This is important point.
Second, mentioned problem is unsolvable, at least from the point of current jQuery Mobile framework, and here's why. In few words, when working with jQuery Mobile popups, one popup can't open another popup. Two popups can exist in the same time. Thou you can always close one popup before opening another one, but this is not usable in your case. Because jQuery Mobile select widget is popup it can't be used inside classic popup widget.
If you don' believe me you can find it in official documentation here, just search for text: "Chaining of popups not allowed". And you will see this text:
The framework does not currently support chaining of popups so it's not possible to embed a link from one popup to another popup. All links with a data-rel="popup" inside a popup will not do anything at all.
On the other hand, dialog is a variation of a classic jQuery Mobile page, just with large margin and semi transparent overlay. It can be used to show popup, just like normal jQUery Mobile page.
SO I have a select box that I fill dynamically. I discovered that once the SELECT gets longer than the page, it automatically becomes a dialog listview.... which is TERRIBLE!
When this happens, the page refreshes when the dialog is closed and my whole page starts over....
Has anyone experienced that and do you know how to shut it off?
Thanks!
Todd
You could use the native look and feel?
http://jquerymobile.com/demos/1.0.1/docs/forms/forms-all-native.html
Native form elements & buttons Although the framework automatically enhances form elements and buttons into touch input
optimized controls to streamline development, it's easy to tell jQuery
Mobile to leave these elements alone so the standard, native control
can be used instead.
Adding the data-role="none" attribute to any form or button element
tells the framework to not apply any enhanced styles or scripting. The
examples below all have this attribute in place to demonstrate the
effect. You may need to write custom styles to lay out your form
controls because we try to leave all the default styling intact.
I have a dropdown listbox on my main page with a button on the same page that launches a pop-up dialog box, also having a dropdown list box. I need the selected index of the 1st listbox control to be synched with the pop-up dialog dropdown listbox.
I have added code to my Controller that sets the index in the ViewData object to be retrieved by the popup and it works on the initial launch of the App. My problem is any subsequent launches of the pop-up dialog won't hit its corresponding code to set the index using the ViewData. The code that needs to be executed is:
<%= Html.Telerik().DropDownList()
.Name("DataStoreTypeId")
.BindTo(new SelectList(Model.DataStoreTypes, "DataTypeId", "Name",Model.DataTypeSelectedId))
.HtmlAttributes(new { style="width:205px })
.SelectedIndex((int)ViewData["SelectedIndex"])
%>
Coming from an ASP.NET background, I am accustomed to having postbacks as mechanisms to handle these types of actions, but MVC has trimmed the postback events which is great for performance but what are my options to force code execution now?
Should I be using other alternatives?
First time it works because its value is set on server side. once its rendered in the browser there is no server side left. you have to manually change the selected value of your telerik dropdown list on button click event next to your first drop down list (is first DD also telerik dropdown or html one). For client events of telerik dropdown have a look at Telerik Demos for asp.net mvc
I want to use a autocomplete combobox http://jqueryui.com/demos/autocomplete/#combobox within a modal dialog. However whenever I click on the down arrow (of the combobox) it causes a refresh that results in my modal window closing.
How do I stop the refresh from occuring? (I am still new to jQuery)
I am using UI 1.8 and jQuery 1.4.1.
The problem is discussed on the jQuery forum here:
http://forum.jquery.com/topic/autocomplete-combobox-problem-when-it-is-placed-inside-a-form-tag
They suggest several different ways of adjusting the source code of the autocomplete combo to fix it. The simplest one seems to be this:
Change the line that says
$("<button> </button>")
to
$("<button type=\"button\"> </button>")
this prevents the type="submit" from being inserted into the final button.
Ok I fixed my own problem by removing the form tag from around the combobox