CODEWITHSUNDEEP
jqueryjquery-mobile
Steve Price
Steve Price

Reputation: 600

Drop downs greyed out instead of hidden when using jQuery-mobile

I have some code that is used to hide text entry fields and drop downs under certain circumstances and all works fine on a normal browser, i.e. the label names and fields are hidden as required. This is my code segment:

function ShowHideLabels(val) {
if (val == 'show') {
    $('#card-holder').hide().attr('disabled', 'disabled');;
    $('#card-type').hide().attr('disabled', 'disabled');;
    $('#card-number').hide().attr('disabled', 'disabled');; 
    $('#card-expiry-month').hide().attr('disabled', 'disabled');;
    $('#card-expiry-year').hide().attr('disabled', 'disabled');; 
    $('#card-start-month').hide().attr('disabled', 'disabled');; 
    $('#card-start-year').hide().attr('disabled', 'disabled');;
    $('#card-issue-number').hide().attr('disabled', 'disabled');;
    $('#register-token').hide().attr('disabled', 'disabled');;
    $('div.ccinfo').find('label').each(function() {
        if ($(this).html()== '$card_holder' || $(this).html()=='$card_type' || $(this).html()=='$card_number' || $(this).html()=='$card_cv2_not_present' || $(this).html()=='$card_expiry_date' || $(this).html()=='$card_issue_number' || $(this).html()=='$card_start_number' || $('.tokenTooltip' , this).length) {
            $(this).addClass('CardsDisabledLabel');
            $(this).prev('br').addClass('CardsDisabledLabel');
        }
    });
} else {
    $('#card-holder').removeAttr('disabled').show();
    $('#card-type').removeAttr('disabled').show();
    $('#card-number').removeAttr('disabled').show();
    $('#card-expiry-month').removeAttr('disabled').show();
    $('#card-expiry-year').removeAttr('disabled').show();
    $('#card-start-month').removeAttr('disabled').show();
    $('#card-start-year').removeAttr('disabled').show();
    $('#card-issue-number').removeAttr('disabled').show();
    $('#register-token').removeAttr('disabled').show();
    $('.CardsDisabledLabel').removeClass('CardsDisabledLabel');
}

} });

The problem appears when viewing the site using a mobile template based on jQuery-mobile.

The labels get hidden and so does the text entry field, but the drop downs are still visible, just greyed out so they don't function.

I'm assuming this is because of the fact that the drop downs are given a class of "ui-select" when viewed through mobile because if i temporarily add display:none to the class they disappear. I've tried and failed to edit the show/hide code to also include the "ui-select" class. I was looking at appending something such as "selectHide" to the "ui-select" class but i can't get it to work.

Can you give me any suggestions or pointers on how you stop drop downs from displaying under jQuery-mobile?

Upvotes: 0

Views: 77

Answers (1)

Sga
Sga

Reputation: 3658

When select menus are enhanced by jQuery Mobile a <div> (and other stuff) is added. You have to target that element to hide the select.

To do that, just append -button to the id of your select in the selector (tested on jQM 1.4.2):

$("#my_select_id-button").hide();

...I have also a suggestion for your ShowHideLabels function: do not refer to each element separately to show/hide them, it's a method prone to error. Add a common class (cardElement) to each element, and work with a jQuery selector: $(".cardElement").hide();

Upvotes: 1

Related Questions