jQuery UI buttons set checked radio by another function - javascript

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?

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

jQuery UI radio button remaining selected

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.

How to preserve "expanded" state of additional form fields with JavaScript when clicking the back button in IE?

I have a form that has two radio buttons. When one of the radio buttons is clicked, JavaScript is used to set a group of sub-fields using display: block.
How can I make it so the selected radio button and sub-fields will expand when clicking the back button in IE? This issue does not occur in Webkit or Firefox.
It needs to work with plain JavaScript, so no jQuery!
One popular methods is to use a URL-hash to represent the UI state. As the UI changes, you build up a hash:
document.location.hash = "R1=true;R2=false"
When you re-load the page, look at the hash and use JavaScript to set the relevant UI elements. How you represent your elements is up to you.

jQuery UI select menu - How to prevent standard select rendering at page load

I'm using jQuery UI Selectmenu to style my selects, but I have a little glitch with the initial transition after page loads, when the standard select control is replaced by the jquery UI version.
Is there a good technique to make this ugly transition not visible at all?
I think, you can wrap your select with some invisible element and show it only after page is loaded.
Also appearing will be more nice if you will use something like this:
$("selectWrapper").show(1000);

Categories