I'm using the bootstrap multiselect plugin and binding the data to it with knockout js. It is in this jsfiddle. The options actually do get data-bound to the multiselect - You can confirm this by right clicking the multiselect element in the jsfiddle output window and inspecting it, and the <option>'s are indeed there. However, clicking the multiselect element does not cause the dropdown to drop down.
The bootstrap multiselect does not seem to know that it has <option>'s in the <select>, this is proven when I use the disableIfEmpty configuration option, it disables the multiselect permanently. Why does the bootstrap multiselect not know that it has options, thus causing it to not open the drop down?
jsfiddle here
You can only instantiate your multiselect widgets after knockout has done its rendering, which is basically after your apply bindings.
To get the idea, check out this forked fiddle: http://jsfiddle.net/r0kbch7u/
I've basically moved the $("#category-select").multiselect() code from your CategorySelect constructor to your document loaded event listener.
Related
I have jQuery UI installed and am currently having an issue with the datepicker widget. I have the calendar displayed when you click on the icon and it is generated. The calendar has a select menu for Month and Year. I am using the jQuery UI custom select menu.
When I go to make a selection for the selectmenus, the option selected closes/discards the entire datepicker.
My assumption is that there is an event being triggered to close the datepicker when you click outside of the main widget. The custom selectmenu is not the standard 'select' menu with 'options', but rather a bunch of 'spans'. The code is simply acknowledging the click on the custom selectmenu options as a field outside of the original widget.
Any suggestions or assistance to prevent this trigger or help me locate where this event is firing from, feel free to help me out. Thanks
Regarding JQuery and JQueryMobile,
Code is in this JSFiddle link: https://jsfiddle.net/nyluje/jg5cgw76/7/
I use a flipswitch to change, if a select object has the attribute multiple or not.
At first the flipswitch is off and the attribute multiple does not apply on the select.
If I use the select, I can choose only one single option (this works fine).
Then I turn the flipswitch to on. Now with the code I implemented in the function setSelectAccordingToFs() the attribute multiple is added to the select and it is then possible to pickup multiple options. But one notices that the pop-up, which is not a native menu one, does not display the multiple select correctly, like on this picture:
It keeps on displaying the single select panel. Which does allow to add up options, but does not provide the possibility to take off some:
Hence I wonder: How to refresh the select panel menu used by a select, depending on the attribute multiple value:'off' or 'on', on that select tag?
Any idea?
Ok I found the solution. I implemented it in this version of my JSFiddle: https://jsfiddle.net/nyluje/jg5cgw76/8/
The trick:
Using the option 'refresh' wasn't enough. To (really) refresh the selectmenu and include the panel in this refresh, the 'destroy' and 'enable' functionnalities have to be used. So at the bottom of my function setSelectAccordingToFs() I added something like that:
targetSelect.selectmenu('destroy');
targetSelect.selectmenu();
targetSelect.selectmenu('enable');
targetSelect.selectmenu('refresh',true);
I use jquery select2 in my project and need to open the select2 all the time.
(link for this plugin: https://select2.github.io/)
I tried $('#select2id').select2("open"), but this keeps focusing on this element. I cannot focus on other inputs in this page. Any other ideas?
Here is the example: http://jsfiddle.net/vff6t9aa/
I'm building a site with a few different jQuery UI elements and I've run into a problem.
I'm trying to use this http://jqueryui.com/button/#radio but rather than having a radio button set that toggles through like a radio select should I just get three buttons that once selected remain selected.
I'm using local copies of the jQuery UI css and js files and I have two different jQuery UIs running side by side.
I'm also using the jQuery Select2 widget http://ivaynberg.github.io/select2/ but removing this and using the jqueryui.com hosted versions of jQuery UI doesn't fix my problem.
Has anybody else had any similar problems? I'd post my code but the jqueryui.com example doesn't even work.
The radio buttons work fine as plain html but don't once I've added the jQuery.
Thanks
To disable a jQuery widget button, you should use :
$(".button").button({ disabled: true });
Also open your console and see if you have errors that can cause problems.
I am trying to disable all text boxes on my form. One of these boxes has a typeahead on it. When I do:
$(#textbox).attr('disabled', true);
It is no longer enabled, but the color does not switch like all of the other text boxes do when they become disabled.
I believe this is due to the twitter typeahead and I am wondering if there is a way around it. Does anyone know how to override the text box background color or remove the typeahead completely when the text box is disabled?
I have tried .unbind() and .addClass("greyBackground") but neither of these seem to do the trick.
If you don't care about maintaining the typeahead.js functionality while the textarea is disabled, you can destroy the typeahead like so:
$('#textbox').typeahead('destroy');
This will reset/remove any attributes/styles typeahead.js may have added. If later on you wanted to add back the typeahead.js functionality, you could reinitialize it with:
$('#textbox').typeahead({ /* configs */ });
Also, typeahead.js doesn't support textarea elements out of the box, so unless you're using a forked version, you shouldn't assume typeahead.js will work as expected.
In Bootstrap 2.2.2 there is no .typeahead('destroy') function, so the following does remove all the listeners it was previously bound to and the DOM element it has created.
$('#textbox').off()
.data('typeahead')
.$menu
.off()
.remove();