How to detect which side a selectmenu will open at? (Solved)
I'm using selectmenu widget. And I'm setting the collision to "flip" because I want to flip the selectmenu to the opposite side when there is not enough space below the trigger. The code is like: $('#my-select').selectmenu({ position : { my: 'left top', at: 'left bottom', collision: 'flip' }, ...... }); And when the selectmenu is flipped to the opposite side, I need to apply a slightly different style on it to make it look well with the trigger. I checked the class names of the selectmenu
Issue with jQuery UI select menu: Uncaught Error: no such method 'instance' for menu widget instance
I have a drop down list(select list) with ID 'TestList'. I want to use this as selectmenu from jQuery UI. This drop down is getting dynamically populated so initially there are no options to this select list. In the scripts section, I am first initializing the select list with select menu as: $("#TestList").selectmenu(); Next, I want to dynamically populate it with data, so I am doing this: for (var i = 0; i < data.length; i++) { $('#TestList').val(data[i]);
Selectmenu Jquery UI change event on pageload
I'm currently using JQuery UI SelectMenu Widget in my application. The options in the selectMenu are filled at runtime based on some values in sql tables. Based on the option selected in the selectedMenu a datatable needs to be filtered on a specific column. .Js snippet $(document).ready(function() { var table = $('.tableContent').DataTable({ "columnDefs" : [ { "className" : "dt-center", "targets" : "_all" } ] }); $("#osFamilySelect1").selectmenu({
jQuery selectmenu dropdown hidden below dialog bottom
How do I keep a selectmenu drop down from hiding beneath the bottom of the dialog? In other words, isn't it customary for a drop down menu to show above the dialog?
jQuery selectmenu val not working
Hello, I have successfully populated a select menu and can navigate the menu in the UI just fine. However, when I go to query either the selectmenu val() or the selected option val(), neither of them reflect what I just selected. It is returning a value, but not the correct one, that I just selected. This seems like a but to me, but I'd like to at least find a workaround if possible. I'm using jQuery UI 1.12.1 against jQuery 1.12.4 in an ASP.NET MVC 5 (AFAIK, V5) web page. Thanks... Michael Powell
Updating title attribute of selectmenu does not work
Hi, Let's say I have some <select> element in html: <select name='selector' id='selector' title='Old title'> <option value='0'>Option 0</option> <option value='1'>Option 1</option> </select> and in the JavaScript code I have: $('#selector').selectmenu(); So far, it works fine, i.e. hovering the mouse over the selectmenu widget shows the text 'Old title'. Now, let's say I want to change the site's language and in this case I execute the code: $('#selector').prop('title','New title'); This executes
jQuery UI Selectmenu / collapsing select-box / options width not taken into account anymore?
Hi All, did anyone also noticed, a selectmenu is collapsing since one of the last jquery-ui versions? Having a select-tag without any width and an option-tag which has a quite long text, now I get rendered a select-box with ellipsis appended to the selected option. In previous versions (and unfortunately currently I'm not able to define the version / not reproducable), the width of the select box was rendered depending on the longest option-entry. So, when opening the menu, its width also matched
JQuery UI Select Box BREAKS Inside Absolutely Positioned Divs?
Anyone know why JQuery UI's Select Box Breaks when put inside a div that's had it's positioning changed from the default static value? https://jsfiddle.net/SkepaWeb/nap04mLa
jwplayer and selectmenu widget
I'm having a problem mixing the selectmenu widget on the same page as jwplayer. It seems to be focus related, when the play button is clicked on the player or the focus changes in some way a blue border either appears or disappears around the player. I've created a simplified static test page which shows the problem. Note that this is a NSFW site, but I've picked a fairly tame video to show the issue and the test page should be OK to view: http://www.mr-s-leather.com/static/video_test_4.html Note
SelectMenu Customized and Refresh
Hi, I try to develop a selectMenu with image? I take exemple on jquery ui site and modify to add possibility to keep picture visible when you selected item with picture. Here My code My problem is on reset. Sometimes I need to put it in initial state. I try refresh, but there is an automatic add of With on Span result and my select change size. I correct it on create event widget.css({ 'width': '' }); But don't Work in select event... and when I click on reset my select become smaller. Then I try
selectMenu() not working on dynamically generated HTML select
So I have a table with a bunch of selects and I apply selectMenu to them and they work great. Then I have an option for the user to dynamically insert an additional row, so I have a javascript function that inserts a new html row with cells and an HTML select inside one of the cells. Then I execute the following javascript to transform the new select into the selectMenu version. $('#dailyblock' + weekdayid + '-' + scheduleid + '-' + childid).selectmenu({ style:'popup',
Selectmenu and screenreaders: Selectmenu works with NVDA and IE8, but not NVDA and IE11
Hi there, I'm using a selectmenu widget on my site, and I need to support screenreaders. I've noticed the selectmenu works fine with NVDA and IE8, but not NVDA and IE11. (Probably the first time I've come across something that works in IE8 and not IE11 - it's usually the other way around.) Is this a known issue? Do jQuery UI widgets in general support screenreaders, or is it not something that's tested? Has anyone else come across problems with selectmenus and screenreaders? If so, is there a way
Width of selectMenu in jqueryui.
Hi, I use several selectMenu to filter a table. I've item option with image and/or text I use this code for this : $("select.TFOlstJquery").TFOiconSelectImg({ create: function (event, ui) { var widget = $(this).TFOiconSelectImg("widget"); var $SpanTxt = widget.children(":last"); var elem = $(this).children(":first"); var styl = elem.data("style"); var HasTxt = ($.trim(elem.text()).length > 0); if (HasTxt && styl) { $SpanTxt.addClass("TFOselectmenu-textDecalTxt")
Use jQuery Mobile for selectmenu only
Can i use jQuery Mobile for selectmenu only? if i intialize whole page - many things go wrong or appear not the way i wanted. I need ONLY select menu replace.
jQuery-UI iconselectmenu Not Working
Hello, i'm trying to use the selector jquery from the website of jquery ui. I use the code but not work on my page. This is my code: <html> <head> <title>EXAMPLE</title> <script type="text/javascript" src=" //code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src=" //code.jquery.com/ui/1.11.2/jquery-ui.js"</script> <link rel="stylesheet" href="//jquery-ui.css" /> <script type="text/javascript"> $(function(){ $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
selectmenu: refresh selectmenu button width
how can i change the selectmenu width (after ajax refresh) dependent on selectbutton text so the text is seen without ellipses .selectmen('refresh') does'nt do that "Hello..." => "Hello selcetmenu"
Keep picture with slectMenu after selected
I use jquery UI - Select Menu to build a List with picture. I follow this link and it's good. But When you select an item, just the text is copying, not the picture. I explain why I want picture. I've a List with no text, just picture, then When you choose an item, you see an empty span ... Someone have an idea? <script type="text/javascript"> $(function () { $.widget("custom.iconselectmenu", $.ui.selectmenu, { _renderItem: function (ul, item) { var li = $("<li>", { html: item.element.html() });
when added selectmenu() to a select, it stopped its event
Hi, I have a dropdown : <div> Enabled/Disabled<br /> <select id="enabledChoice"> <option value="All">All</option> <option value="F">Enabled</option> <option value="T">Disabled</option> </select> </DIV> it filter a table by showing all , or just enabled or just disabled, as soon as I added jquery ui and did : $(function($){ $('select#enabledChoice').selectmenu(); The following code (for filtering displayed
Affecting dropdown menu with button click
Hi, I have the following code which causes the buttonclick "next" to affect the dropdown menu "page_num" and effectively loops to the next option in the dropdown on each button click. I can get it to work using the jquery ui $("#next").button(); however getting the jquery ui dropdown menu to work is proving more difficult. Can anyone offer some assistance in how to integrate the ("#page_num").selectmenu(); into this script please? I've tried various different arrangements and have had no luck so
how to style jquery Selectmenu component
Hello forum I want to be able to style selectmenu as follows: 1) selectmenu will for example have 3 colors ( white, red and black) to choose from. 2) If I select any of these colors, I want the color to show up on the selectmenu as a square, with the name specific to that color, for example: if I choose white: if I choose red: if I choose black: The full dropdown looks like this: I was able to style it but I can't figure out having that color square show up, I'm new to jquery ui and I can't find
Does selectmenu suppert nested groups?
Hi everybody, I've just seen that the new jQuery UI 1.11 is out, and there is a new nice widget! I was skimming through the docs, but I couldn't find this: is the new widget limited as the native select to only one level of subgroup, or does it support multiple nested levels?
Dynamic multiple selectmenu rendering not working solid
Hello, i have a multiple select menu which is filled dynamically. But after a refresh sometimes the rendered result ist ok (in about 10 % of calls), but most the rendered result is bad, because the menue seems to be transparent (without background) in 90%. I can't find out the reason for this non-systematic failure. The failure is available in jquery.mobile-1.4.0 and jquery.mobile-1.4.1 the same way. (jQuery-Version: 2.0.3) HTHML-Code: <div class="ui-field-contain"> <label for="mySelect" class="select">MySelect:</label>
selectmenu page not closing
hi! currently we are using jqm 1.3.0, but we tried it with the newest stable 1.4.1 as well with the same results. from the api documentation: When it has too many options to show on the device's screen, the framework will automatically create a new dialog-style "page" populated with a standard listview for the options.with internet explorer this works almost every time. but it kills our app when we use it in firefox or chrome. the listview is shown but after selecting an item, the items are cleared
JQM 1.4 selectmenu widget overlay not set by data-overlay-theme option... always theme "a"
I created an example at http://jsbin.com/IFolanOW/90/edit using the recommended github template. I'm using the new selectmenu widget in jqm 1.4. The issue appears in firefox, chrome As you can see there are several selectmenu widgets on the page. Two (Instruments and Genres) are long enough that they trigger the behavior where the select menu opens as a dialog. They are styled: data-theme='b' data-overlay-theme='b'.... It appears when I inspect that dialog that the body of the dialog page has a class
JQM 1.4.0: dynamically set disabled="disabled" to option in selectmenu
This attribute disables an option in a selectmenu: disabled="disabled" How to set or unset this option in a JQM not-data-native menu dynamically? This is my fiddle: http://jsfiddle.net/rCFzP/3/ I tried: $("#idSel option[value='c']").prop('disabled', true); This only works when the selectmenu has data-native-menu="true", not when false. What it does, is adding this property: disabled="" Please help! I tried the whole morning to solve this..
Selectmenu doesn't open when inside a Popup widget in Android 2.3
Hi, This had been a issue since the old versions of jQM and still exists. The selectmenu doesn't seem to open (natively), when inside a element (div..etc.) with the position set to absolute. I tried using the selectmenu inside a Popup widget... and it didn't work. I even tried using the DateBox widget inside a dialog page with the combobox enabled (to choose the year/month).... and didn't work. I recently tested jQM 1.2.0 Final selectmenu in Android 2.3 & 4.1 (inside a popup widget), and it seems
onmouseover selectmenu not working
Hi everyone! I want to add onmouseover/hover event to selectmenu, but I'm not able to do it. I think I tried all possible selectors: $(".ui-select"), $("select"), $("div.ui-select"), $(".myselectmenu:parent")..., but without success. Events which I have tried are jquery hover and on({mouseover: function() {...}.., onmouseover in html. Thank you
select menu ... options not working when I bind to pageinit
hello; I am new so please be patient. I have a select menu that I am using jquery mobile to turn into a dropdown. when I do: <select ... data-SOME_OPTION = 'SOME_VALUE' > it behaves as expected. but if I add that same option/value to: $(document).bind('pageinit', function () { $('select').selectmenu({ corners: false });}); it does not work. EDIT: $(document).bind('pageinit', alert('hello') ); does work see it here: jsfiddle thanks, Shannon
Problem using a custom select menu inside a popup
I found a problem using a custom select menu inside a popup. I set the propierty data-native-menu="false" but it works just like it wasn't there. My code: <div data-role="popup" id="editform"> <div data-role="header" data-theme="a" class="ui-corner-top"> <h1>Edit</h1> </div> <div style="padding:10px 20px;"> <label for="producte">Product:</label> <input type="text" name="producte" id="namefield" value="" /> <label for="select-choice-1" class="select">Category:</label> <select name="selectcategory"
SelectMenu and multiple and native menu not working
Hey all, I've tried a select menu like the following: <label for="Desert">Desert</label><select data-close-text="Closetext" data-corners="false" data-native-menu="true" id="Desert" multiple="multiple"><option value="Item1">Item1</option><option value="Item2">Item2</option></select> The box for the value shows up, but clicking it shows not drop down. I assume because in some browsers a multiple select element is sort of always 'expanded' and options are toggle-able? Any way to work around this
Custom select menu options not positioned under select
I am trying to use the custom select menu and finding that the options are displayed in a location far away from the select menu and label. I am using the custom select menu inside a dialog - not sure if that is what is causing the issue or not. I have the following code: <div data-role="fieldcontain"> <label class="ui-input-text">Contact</label> <div class="ui-div-contain"> <select name="user" id="user" data-native-menu="false"
select menu with images
Hi everybody, Im new in this forum and also in jquerymobile world, Im developing an ios app, and i want to use a select menu in the header of the page, i have the select menu with only text, but i want to add an small icon or image next to the text, i try all the examples in the network (github for example) and it didnt work, and im really desperate because the due date of the project is tomorrow night, if somebody could help me i will appreciate it thanks in advance conchitabh and sorry for my bad
Selectmenu (select box) widget still useless... can anyone else verify?
In jQM alpha 2, the selectmenu widget for creating nice select boxes was basically unusable to me because it contained really bad bugs that caused javascript errors with the hashtag page tracking and had a lot of display bugs as well. Specifically the biggest issue was when you had a select box with several option items... it creates a full-sized page that acts as a dialog to display the option menus as opposed to when the list is short and it generates an overlay on the same active page. My original
selectmenu('refresh') when removing items
selectmenu('refresh') when removing items: observed issue in UI In my code I am using jQuery to clear a menu in-place and re-render it. Effectively I run: $('#selectmenu').html(''); $('#selectmenu').append('<li>Item</li>'); $('#selectmenu').selectmenu('refresh'); However, in the UI, upon clicking the menu, the lightbox style list of options still shows old options (Chrome 10.0.648.204 as test browser) even though they are not clickable. Fortunately, only the new options are clickable. FYI to dev
How to set a dynamically created select's selected value to a variable's value
Hello, I have a cookie that contains a select's last selected value. The cookie is well written and assigned to a variable 'myCookie'. I'm populating a select's options using a php script with $.getJSON Once the select is populated, how to set its value to myCookie's value? I thought it was: $('#mySelectID').val(myCookie); But the select does not seem to be updated (or does not show the updated value). Thanks for your help.
Using selectmenus in landscape view seems to break navigation on Android (Alpha 2 & 3)
I noticed that changing a selectmenu's value on a landscape page containing 1 (or more) "selectmenus" seems to break navigation under Android. In Landscape view it seems to try to do an animation to make the selectbox disappear (Reducing it's size quickly until it's gone). This also affects the URL. "&ui-state=dialog" gets added behind the current page hash "#page-config". When I hit the "back" button in the header: the "&ui-state=dialog" disappears, my hash "#page-config" remains, the page turns
Selectmenu val() in IE8
There's always a strong chance that I'm approaching this incorrectly. I have a selectmenu which I'm trying to retrieve the current selected value from, and it is giving me the ole "Object doesn't support this property or method" in IE8. This works correctly in all other browsers I've tried (moz and webkit based). 1.) Is there a better select menu plugin I could be using? 2.) Is there a more proper way to accomplish this? The select menu contains a list of domains, so the line of code looks like