Skip to content

Horizontal radio buttons, page transition and losing ui-btn-active #5111

Closed
SumoMobi opened this Issue Sep 29, 2012 · 9 comments

3 participants

@SumoMobi

Maybe this is by design, but I have to add the following event handler to my dialogs' page show event so that when the flow returns from another dialog, the original dialog shows the checked radio buttons as checked.

    $("div[data-role='dialog']").each(function ()
    {
        $(this).on('pageshow', function (evt, ui)
        {   //On page transition back to original page/dialog, horizontal radio boxes that are checked, do not look checked.
            $(this).find("input[type='radio']:checked").each(function ()
            {
                if ($(this).closest("fieldset").attr("data-type") == "horizontal")
                {  //A horizontal set of radio buttons.
                    $(this).closest("div").find("label[for]").addClass("ui-btn-active");
                }
            });
        });
    });

I tried class="ui-btn-active ui-state-persist" on the input tag, but that did not help.

@jaspermdegroot
jQuery Foundation member

@SumoMobi

Please provide a simple test page that shows the issue. See our Contributing Guidelines. Thanks!

@SumoMobi
@jaspermdegroot
jQuery Foundation member

@SumoMobi

Hi Jean,

Thank you, but could you please put the code in our JS Bin template (http://jsbin.com/uzaret/1/edit). When you paste the code in a post here on Github without using their flavored markdown it becomes one big mess as you can see.

@SumoMobi
@jaspermdegroot
jQuery Foundation member

@SumoMobi

You don't need to log in. You can just start editing and the url updates to a new version and it auto-saves after each change you make.

No problem, I copied your code in a JS Bin: http://jsbin.com/uzaret/12/edit

@jaspermdegroot
jQuery Foundation member

New test page that contains all form elements that are affected by this issue: http://jsbin.com/enetay/4

The issue is caused by this line in dialog.js. Not only .ui-slider-bg should be excluded, but also .ui-slider-label-a, .ui-radio-on, .ui-checkbox-on, .ui-selectmenu-list .ui-btn.
For performance it would probably be best to not exclude all those classes but narrow the scope first:

$( this ).find( ".ui-btn." + $.mobile.activeBtnClass ).not( ".ui-radio-on, .ui-checkbox-on, .ui-selectmenu-list .ui-btn" ).removeClass( $.mobile.activeBtnClass );

[Updated the code snippet above, because I made a mistake in the original post]

This is not an issue with regular pages. I was wondering why we added code in dialog.js to remove the active button class while we also take care of this in navigation.js. It was added as fix for #1839 (active state isn't removed from cancel/close button). I removed the code from dialog.js and tested, but didn't see that issue.
So an even better solution would be to just remove this code.

@toddparker

Interesting. I'm not sure of the history but this dialog code may have pre-dated the nav code. I thinking we test this thoroughly and there don't seem to be regressions, Id remove it post-1.2

@SumoMobi
@jaspermdegroot
jQuery Foundation member

@toddparker

I mentioned the simple solution (excluding those classes) as well because I was thinking we could land that in 1.1.2 and 1.2.1. For 1.3 we are going to work on nav refactor and active state of buttons so that seems a good moment to see if we can remove this code.

@SumoMobi

Thanks for posting a workaround but let's establish the issue first. I created another test page: http://jsbin.com/enetay/7
This page uses JQM latest JS including the fix I mentioned in my previous comment.
On this test page I set the checked attribute of the checkboxes and radio buttons with JS. I don't see a problem.

@jaspermdegroot jaspermdegroot added a commit that closed this issue Jan 3, 2013
@jaspermdegroot jaspermdegroot Dialog: Removed code that removes active state from buttons on pagehi…
…de. Fixes #5111.

The code was added because close buttons still had active state when you closed and re-opened a dialog (#1839). I tested without the code and that issue doesn't occur anymore (nav takes care of removing active state).
4d60cd2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.