Skip to content
This repository

Buttons not disabled in internet explorer #3558

Closed
simonvane opened this Issue · 18 comments

6 participants

simonvane Ghislain Seguin Mat Marquis Jasper de Groot Todd Parker Sergey Grebnov
simonvane

I am trying to disable links with data-role="button".

The documentation states "Note that you can disable buttons created from button or input-based markup, but not links with a role of button. Links don't have a parallel disabled feature in HTML, but if you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect." in http://jquerymobile.com/test/docs/forms/docs-forms.html.

I have tried this in the html below:

<a href="http://www.bbc.co.uk" data-role="button" class="ui-disabled">BBC</a>

The problems I have are:
1) In IE 7 to 9 the pointer is a hand rather than the default.
2) In IE9 the button has the appearance of being disabled but clicking on the button still goes to the uri.
3) In IE 7 and 8 the button does not display as disabled and can be clicked on.
4) In opera mobile browser the link can be clicked on.

Styling issues aside I think the main issue is that "pointer-events: none;" in the ui-disabled style is not standard on anchor tags. My understanding is that it is for use with svg though I may be wrong about that.

I have worked around the issue with the following javascript:
$(document).ready(function () {
$('a.ui-disabled').click(function (event) {
event.preventDefault()
});
});

and the following styles only included if the browser is IE:
/* Fix to ensure cursor is correct for disabled anchor buttons in IE 7 - 9. */
.ui-disabled
{
cursor: default !important;
}

/* IE 8 - Fix to make buttons opaque for disabled /
.ui-disabled
{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /
IE 8 */
}

/* IE 7 - Fix to make buttons opaque for disabled */
*:first-child+html .ui-disabled
{
filter: alpha(opacity=30);
height:1%;
}

Am I doing something wrong in the first place and if not is this a suitable fix?

Is it something you'd be able to incorporate into the core product?

Thanks a lot.

P.S. I have tried with the latest version and I believe it is still an issue.

simonvane

Correction - the javascript to prevent the click is as follows:

$(document).ready(function () {
$('a.ui-disabled').click(function () {
return false;
});
});

Anybody have an opinion on this? Will this be fixed?

Todd Parker

I think we do need to improve how we disable elements for IE. Flagged for 1.2.

simonvane

That's great to hear, thanks. I just wondered if there was any chance of getting the fixes into 1.1 so I don't have to include these workarounds? 1.1 is likely to be released before we release our next version but 1.2 I don't think will be.
Thanks.

Mat Marquis Wilto referenced this issue from a commit
Mat Marquis Partial fix for #3558 - Appropriately styles buttonMarkup elements us…
…ing `.ui-disabled` in IE. This commit contains two instances of IE’s `filter`, and one !important. We’ve all done things we’re not proud of.
f60c322
Sergey Grebnov

Hi @toddparker, @Wilto,

I have some additional idea how to disable link button in IE. We can render link buttons in ‘buttons’ plugin instead of ‘buttonmarkup’ plugin. In this case we can use disable() and enable() functions for link buttons the same way as for general buttons. All we need is to add [data-role=’button’] to ‘buttons’ plugin initSelector and remove ‘:jqmData(role='button')’ from ‘buttonmarkup’ plugin initSelectior. It works for IE8/9. In this case we will have 'disabled' attribute and also 'ui-disabled' css class. 'disabled' attribute will make the trick to make link unclickable for IE8/9. Unfortunately I found out that this approach doesn’t work for IE7 because it ignores ‘disabled’ attribute and link stays clickable. As a possible workaround we can temporary rename ‘href’ attribute in disabled() func to ‘hrefTemp’ and set it again in enable() func.

Mat Marquis

@sgrebnov Oh, I think we’re mostly squared-up on this now, including IE. The only thing we have left to do for the sake of browsers that don’t support the CSS pointer events property is call preventDefault() (possibly return false) on link-based buttons that have the ui-disabled class attached.

Sergey Grebnov

@Wilto I see now, suppose we only need to add small change to buttonMarkup.js to handle click event specially for element with 'ui-disabled' class (preventing the call). I can add this change if you want (and if my understanding is correct)

simonvane

Thanks for giving your attention to this issue. Very much appreciated. Is this likely to make it into 1.1?

We have another issue at the moment in Opera Mini. When we load the page first time (in the opera emulator) the button is displayed as disabled but you can still click. If I Ctrl+F5 then the button is properly disabled. Close the emulator and return and this issue is the same again. This is with all of the above fixes in place including the return false in the javascript.

If you could check this out that would be greatly appreciated.

Thanks again.

simonvane

Realised what the issue was with the javascript. I was using document ready when I should have been using live i.e:

$("[data-role=page]").live("pageinit", function () {
$('a.ui-disabled').click(function () {
return false;
});
});

simonvane

Are you aware that this issue is not fixed in 1.1 RC1? Will it be fixed for 1.1 RTM?
Thanks.

Todd Parker

@gseguin will work with jQ core to find a way to disable events and deal with 1.6 vs. 1.7 differences.

simonvane

Thanks, FYI, I was using jQuery 1.7.1.
Cheers.

simonvane

This has not been fixed in RC2. I got the impression that it was your intention to fix it. Is this supposed to be fixed?
Thanks.

Todd Parker

We added some styles to make it look more disabled, but we decided that actually managing events to make this truly disabled on IE would require a lot of effort, testing and changes for this stage. Look for this in 1.1.1.

simonvane

Thanks for the update Todd. I know that you have had a great deal to do for RC2 but this is somewhat disappointing though considering the statement regarding 1.1 "Our philosophy in 1.1 was to really focus on making the current feature set we had as close to perfect as we could, without sacrificing compatibility." when this is clearly a bug.

Are you able to give any indication as to the intended release date of 1.1.1?

Jasper de Groot
Owner

@gseguin - Have you been able to look into a way to disable buttons via JS for browsers that don't support CSS property "pointer-events"?

Ghislain Seguin
Collaborator
Todd Parker
Ghislain Seguin gseguin referenced this issue from a commit in gseguin/jquery-mobile
Ghislain Seguin Added a live handler to kill clicks on elements with class ui-disable…
…d. Fixes #3558
8c5b9a7
Ghislain Seguin gseguin closed this in 8c5b9a7
Ghislain Seguin gseguin reopened this
Ghislain Seguin
Collaborator

Reopening as it seems like the fix failed. Looking into it.

Ghislain Seguin gseguin closed this issue from a commit
Ghislain Seguin Conditionally add a live handler to kill clicks on .ui-disabled eleme…
…nts when CSS pointer-events property is not supported. Fixes #3558
75fcd80
Ghislain Seguin gseguin closed this in 75fcd80
Ghislain Seguin gseguin referenced this issue from a commit in gseguin/jquery-mobile
Ghislain Seguin Conditionally add a live handler to kill clicks on .ui-disabled eleme…
…nts when CSS pointer-events property is not supported. Fixes #3558

Conflicts:

	js/jquery.mobile.init.js
5ed6ae3
Elliot Smith townxelliot referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
Elliot Smith townxelliot referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
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.