jQuery UI radio button remaining selected - javascript

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.

Related

JQuery Mobile selectmenu() multiple option true/false -> not refreshing the displaying of choices

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);

JQuery Mobile destroyed my layout: how to disable autostyling?

I'm develping a website and I made all the design and the styling upon bootstrap and it is working fine. Then I wanted to add a panel for the mobile menu.
the panel is the one on the right of this example:jQuery Mobile panels, click on the plus sign
I took the panel that comes out clicking on the plus, and I worked to add it to my website (with my menu instead of the form inside the panel).
It works fine, but adding the jQuery Mobile JS completely destroyed my layout, adding lot of ui-* classes around my code and the styles attached to them.
I've tried those things:
disabling the css whole (but the panel does not work anymore)
renaming selectively only the classes that makes more mess, but it is
way too much work, just to fix a checkbox I had to rename several ui
classes.
fiddling with the js (the panel stopped working)
I just need the panel. I don't need all the creepy styling on the forms or other unwanted stuff.
Now I don't know what to do. There is another way to get this panel working withour all the mess? Why they did this js so intrusive?
You can use :
data-role="none"
If you also want to disable mobile use in mobileinit event:
$.mobile.autoInitializePage = false;
If you have several elements use a function on start load page:
$(document).on('pagebeforecreate', function( event ) {
// add the data-role="none" to desired elements...
$( "input, select", event.target ).attr( "data-role", "none" );
});

Bootstrap 3 Radio Buttons Double Toggling

I am trying to use Bootstrap 3 radio buttons. Things seem to be working fine, other than the input elements are never selected.
I found that the click.bs.button.data-api event is triggered once, and that calls $btn.button('toggle') only once. However, $.fn.button is somehow triggered twice. As a result, Button.prototype.toggle correctly sets the input to its selected state and then deselects it.
Why may $.fn.button be run twice?
After I tried to reproduce the issue on JS Fiddle, I was able to identify the source of the issue.
This was an application that I was updating from Bootstrap 2 to Bootstrap 3. There was a big JS libraries file that contained Bootstrap 2. Running that one along with Bootstrap 3 caused the toggle method to be run twice, thus invalidating the selection.
The error went away after removing all of the Bootstrap 2 code.

Multiple selection in Bootstrap typeahead

I'm looking for a proper way to implement the jquery mobile filter list in bootstrap typeahead component.
The functionality that I needed is here in the following link. Please scroll down to the bottom. http://jquerymobile.com/demos/1.2.1/docs/lists/lists-inset.html
In the filtering list, I want to add checkboxes for each list items and the user should be able to check multiple value. They don't have to be added to the textfield. As that's the only function I need, its no use of adding the whole jquery mobile library to the project.
I found couple of options in the following link which goes near my requirement.
http://fusiongrokker.com/post/heavily-customizing-a-bootstrap-typeahead
But, the multiple selection by clicking checkboxes didn't work with bootstrap typeahead.
Can anyone give me a good solution for this.
Thanks
If you looking for bootstrap, this plugin can be used in your project
https://sliptree.github.io/bootstrap-tokenfield/
I saw following has been suggested in many places:
http://ivaynberg.github.io/select2/
(If you use the multi-value version.)

jQuery UI buttons set checked radio by another function

I'm using jquery ui's $(input).button() to good effect, all I want to be able to do is set one of 2 radios to "checked" by something else and have the graphics update in the ui.
I'm using $("#radio1").attr("checked",true); $("radio2").attr("checked",false); which works fine without the jquery ui, but when .button() is applied, there is no appearance update (only attribute).
Is there a way of doing this?

Categories