I have a standard <select>..</select> element with which I have a slider created by selectToUISlider()
The problem is that when the slider moves the option in the dropdown does not change. Additionally it sets selected="selected" on each element as the slider is moved so that when the form is submitted multiple values are POSTed emulating a multiple select option.
I've spent ages trying to get to the bottom of this but no luck. Does anyone have any ideas?
I came across the same problem when trying to achieve similar functionality as mentioned by you.
The problem is whenever a slider is moved it keeps setting the "selected" attribute of the select list without clearing up previously selected item. I have added a script to clear previously selected option items before setting the new one as selected.
Look/search for the text at line number 92(..ish) of the jquery script file.
//control original select menu
var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]);
currSelect.find('option').eq(ui.value).attr('selected', 'selected');
and insert this code between 2 lines...
currSelect.find('option[selected]').removeAttr('selected');
so final code should look like this...
//control original select menu
var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]);
currSelect.find('option[selected]').removeAttr('selected');
currSelect.find('option').eq(ui.value).attr('selected', 'selected');
I hope it helps.
Feel free to ask any further question.
I know this is quite old but I recently stuggled with this and maybe my solution helps someone. I had this same problem when using more recent versions of jQuery (>jQuery 1.6.1) and JQueryUI and trying to use selectToUISlider with them.
I found my solution (using properties insted of attributes) just replacing in the selectToUISlider.js script, in line 98
This
currSelect.find('option').eq(ui.value).attr('selected', 'selected');
for this
currSelect.find('option').eq(ui.value).prop('selected', true);
You can find the "Why" on this answer, which helped me to find this solution:
https://stackoverflow.com/a/5876747/2285806
You can read also the jQuery API entry for prop() to find more information and read important notes on browser backwards compatibility:
http://api.jquery.com/prop/
Related
driver.findElement(By.xpath("//*[#id=\"ember558\"]")).click();
I am doing testing for linkedin post. I entered this code for POST button but that does not work. Can you please suggest about this?
It seems that #id attribute value is dynamic so, it will not be able to interact with the Element. You can try with dynamic X-path techniques. Generally, a set of data keeps on changing and rest data remains same.
e.g. <button "id":"emns1233">
here starting part of id will remain same every time but last part that is 1233 will change (may be each time). So, one can try to write X-path as
driver.findElement(By.xpath("//button[starts-with(#id,'emn')])).
Hope it helps. Thanks
I use listbox with one frozen column. it's working fine but if i hide last (only last) column , i'll get problem with listbox's content. Header scrolls normaly but all rows of listbox appear.
ZK-8.5.2.1-Eval
I use olde frozen - listbox.setAttribute("org.zkoss.zul.frozen.smooth", false);
I'd suggest to try the latest version ZK 8.6.0.1 first? The release notes (8.6.0 / 8.6.0.1) indicate errors being fixed regarding frozen and listheaders maybe the problem doesn't happen anymore with the latest version.
It the problem still exists it would help if you can provide a reproducing/runnable example e.g. on zkfiddle.org Please, save and post the link or url-path here.
With Vaadin 8 you could set a tooltip for a Grid cell. This feature is not available in Vaadin Flow (currently using v 11.0.0). Is there an alternative?
There is no built-in feature yet. The easiest way is probably to set "title" attribute of the element. One example is to use TemplateRenderer, and there is example of that here
https://vaadin.com/components/vaadin-grid/java-examples/using-templates
Copying the relevant part of the code from the example above
grid.addColumn(TemplateRenderer.<Person> of(
"<div title='[[item.name]]'>[[item.name]]<br><small>[[item.yearsOld]]</small></div>")
.withProperty("name", Person::getName).withProperty("yearsOld",
person -> person.getAge() > 1
? person.getAge() + " years old"
: person.getAge() + " year old"))
.setHeader("Person");
Thanks to #Tatu-Lund's answer I got the idea, but since the link is not referring to a valid location anymore, and also the example code with div can bring other complexities into the game I decided to post another answer.
Using div as the wrapper element to have the title attribute would work, but it will prevent the columns to be resized. So using span would be a good replacement.
Also, setting the title would help with a normal tooltip to show up, but it is not enough for accessibility support. Setting the aria-label in addition to the title would make it smoother:
grid.addColumn(TemplateRenderer.<Person> of(
"<span title='[[item.name]]' aria-label='[[item.name]]'>[[item.name]]</span>")
.withProperty("name", Person::getName)
.setHeader("Person");
However, this is not a complete workaround as this would not help to browse the web app on touch devices. Please refer to the following issue for more information: https://github.com/vaadin/flow/issues/4169
I need help in hiding/unhiding neighboring spans. I'm building a series of FAQs using an accordion structure. I need to have each question truncated by default, but when clicked, the question must then appear in full. Finally, when the open FAQ (or another one) is clicked, the question should return to its truncated form.
My markup is of this form - where I have placed a truncated version of the question in one span and the untruncated version in a neighboring span:
> <div class="accord"><h4><span class="shortver">What steps do I need to
> take to ...</span><span class="longver hide">What steps do I need to
> take to install a constructed wetland?</span></h4><div
> class="faqcontent">Answer goes here</div>...</div>
The following function controls the FAQ:
function fnSetUpPageFAQAccordion(){
$(".accord > div").hide();
$(".accord > h4").click(function(){
$(this).find('span.shortver').addClass("hide").next('span.longver').removeClass('hide');
$(this).toggleClass("close").siblings("h4.close").removeClass("close");
$(this).next("div").slideToggle("1500").siblings("div:visible").slideUp("1000");return;
}); };
This code closes the truncated version of the question and opens the full version when the FAQ is clicked. What I can't figure out is how to reverse that sequence when the FAQ is clicked again (or another FAQ on the page is clicked).
Any suggestions - perhaps there is a better approach altogether?
Thanks/Bruce
Here's a slightly different approach, and a solution.
I think you could simplify this. Instead of having 1 span with the short version and 1 with the long version, put the beginning of the explanation in the first (let's call it class="questionStart")and the rest of it in the second (class="questionEnd"). That way you can leave the beginning always visible and only worry about toggling the class on the second. This is simpler but you'd need to remove the '...' which may not be worth it for the readability loss.
To address your issue of hiding the element when clicking something else, try adding an onClick event that first adds the hide class to all of the "questionEnd" spans, then toggles it on for just the one you've clicked on. I haven't tried it but I think you could make that work pretty easily either with your original approach or with mine.
The auto_complete_for dealio from script.aculo.us is great an all, but is there a way for me to selectively disable the fact that it always auto-selects the first item in the list?
The problem is that, if I want to type my own entry that is new, and novel, I don't want the first item in the list to be auto-selected. The reason is because when I TAB out of the field, it selects, and fills the text box with that first item.
I got around that, somewhat, by making the first item in the list the same as what I'm typing, but that's not perfect either, because the auto_complete list doesn't always update with every keystroke, depending on how fast I type. I've tried setting the list refresh rate to the lowest value (1 millisecond) but no go.
What I really want is an option in "auto_complete_for" that doesn't select that first item at all - the same way that Google Instant doesn't automatically select the first suggested search phrase - you have to arrow-down to select one.
Maybe I can do this via an HTML option that I'm missing?
Looking at the source, there doesn't appear to be an option for that, but I bet if you changed line 284 of controls.js to this.index = -1; it would do what you want.
Otherwise, it might be time to look for a different autocomplete widget.
If your requirements are too far away from the available plugin, then I guess there is no point in tinkering around. Its best to write your own JS code.
You might want to consider this: https://github.com/laktek/jQuery-Smart-Auto-Complete
or this : https://github.com/reinh/jquery-autocomplete
I'll add another alternative that works great with Rails 3:
http://github.com/crowdint/rails3-jquery-autocomplete
I recently implemented auto complete for more than a field for Rails 2.0.2.
The plugin I used is:- https://github.com/david-kerins/auto_complete . Not sure if it supports Rails 3.
I have also encountered issues on implementing the above scenario and have posted questions( Implementing auto complete for more than one field in Rails ; Implementing a OnClick kind of functionality and formatting wrt Rails Partial-Views ) on stackoverflow for the same, I have been lucky on getting things working for me based on my requirement.
Kindly refer to these questions, they might have relevance to your requirement.