New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Buttons not disabled in internet explorer #3558

Closed
simonvane opened this Issue Feb 9, 2012 · 18 comments

Comments

Projects
None yet
6 participants
@simonvane

simonvane commented Feb 9, 2012

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

This comment has been minimized.

Show comment
Hide comment
@simonvane

simonvane Feb 21, 2012

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?

simonvane commented Feb 21, 2012

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?

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 22, 2012

Contributor

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

Contributor

toddparker commented Feb 22, 2012

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

@simonvane

This comment has been minimized.

Show comment
Hide comment
@simonvane

simonvane Feb 22, 2012

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.

simonvane commented Feb 22, 2012

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.

Wilto added a commit that referenced this issue Feb 22, 2012

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.
@sgrebnov

This comment has been minimized.

Show comment
Hide comment
@sgrebnov

sgrebnov Feb 28, 2012

Contributor

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.

Contributor

sgrebnov commented Feb 28, 2012

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.

@Wilto

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Feb 28, 2012

Contributor

@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.

Contributor

Wilto commented Feb 28, 2012

@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.

@sgrebnov

This comment has been minimized.

Show comment
Hide comment
@sgrebnov

sgrebnov Feb 29, 2012

Contributor

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

Contributor

sgrebnov commented Feb 29, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@simonvane

simonvane Feb 29, 2012

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 commented Feb 29, 2012

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

This comment has been minimized.

Show comment
Hide comment
@simonvane

simonvane Mar 5, 2012

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 commented Mar 5, 2012

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

This comment has been minimized.

Show comment
Hide comment
@simonvane

simonvane Mar 7, 2012

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

simonvane commented Mar 7, 2012

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

@ghost ghost assigned gseguin Mar 8, 2012

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Mar 8, 2012

Contributor

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

Contributor

toddparker commented Mar 8, 2012

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

@simonvane

This comment has been minimized.

Show comment
Hide comment
@simonvane

simonvane Mar 9, 2012

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

simonvane commented Mar 9, 2012

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

@simonvane

This comment has been minimized.

Show comment
Hide comment
@simonvane

simonvane Apr 11, 2012

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.

simonvane commented Apr 11, 2012

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.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 11, 2012

Contributor

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.

Contributor

toddparker commented Apr 11, 2012

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

This comment has been minimized.

Show comment
Hide comment
@simonvane

simonvane Apr 11, 2012

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?

simonvane commented Apr 11, 2012

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?

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 19, 2012

Member

@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"?

Member

jaspermdegroot commented Jun 19, 2012

@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"?

@gseguin

This comment has been minimized.

Show comment
Hide comment
@gseguin

gseguin Jun 19, 2012

Member

No I haven't. I can look into it next if you'd like.
On Jun 19, 2012 5:40 AM, "Jasper de Groot" <
reply@reply.github.com>
wrote:

@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"?


Reply to this email directly or view it on GitHub:
#3558 (comment)

Member

gseguin commented Jun 19, 2012

No I haven't. I can look into it next if you'd like.
On Jun 19, 2012 5:40 AM, "Jasper de Groot" <
reply@reply.github.com>
wrote:

@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"?


Reply to this email directly or view it on GitHub:
#3558 (comment)

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jun 20, 2012

Contributor

Yes please.

On Jun 19, 2012, at 9:25 AM, "Ghislain Seguin" reply@reply.github.com wrote:

No I haven't. I can look into it next if you'd like.
On Jun 19, 2012 5:40 AM, "Jasper de Groot" <
reply@reply.github.com>
wrote:

@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"?


Reply to this email directly or view it on GitHub:
#3558 (comment)


Reply to this email directly or view it on GitHub:
#3558 (comment)

Contributor

toddparker commented Jun 20, 2012

Yes please.

On Jun 19, 2012, at 9:25 AM, "Ghislain Seguin" reply@reply.github.com wrote:

No I haven't. I can look into it next if you'd like.
On Jun 19, 2012 5:40 AM, "Jasper de Groot" <
reply@reply.github.com>
wrote:

@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"?


Reply to this email directly or view it on GitHub:
#3558 (comment)


Reply to this email directly or view it on GitHub:
#3558 (comment)

@gseguin gseguin closed this in 8c5b9a7 Jun 20, 2012

@gseguin gseguin reopened this Jun 20, 2012

@gseguin

This comment has been minimized.

Show comment
Hide comment
@gseguin

gseguin Jun 20, 2012

Member

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

Member

gseguin commented Jun 20, 2012

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

@gseguin gseguin closed this in 75fcd80 Jun 20, 2012

gseguin added a commit to gseguin/jquery-mobile that referenced this issue Jun 27, 2012

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment