2

I am working on upgrading big application to latest jQuery 3.0 from pretty ancient 1.11.2. I found pretty subtle change that broke some of our functionality:

when we instantiate some complex widgets, we initially hide some of the elements using css (display none). Then we use show/hide to display the element.

But call to show/hide can happen before widget is attached to DOM. Show/hide used to work fine in 1.11.2 when element was not attached, but does not work in 3.0.0.

Demo: 

.tabCompositeSearchWidget-ClearButton
{
    /* Clear button is initially hidden */
    display: none;
}

var e = document.createElement('div');
$(e).addClass('tabCompositeSearchWidget-ClearButton');
$(e).text('blah');
$(e).show();
$('#root').append($(e));
alert($(e).is(":visible"));

In the old version element will be visible and alert will say true, in the most recent it won't be visible and alert will say false

It is hard to find all of such usages and I am interested in the best way of fixing that: what can be the best fix here? Manually modifying jquery.js file to behave it the old way? (I don't really want to do that)

Upd: fixing one-off case is easy. But have potentially tens of such calls and finding & fixing all of them needs huge effort and is not effective.

vmg
  • 9,920
  • 13
  • 61
  • 90
  • 1
    lack of research? this change is noted in the release notice. You already seem to know that to fix it you'd either have to do a find/replace in your code or replace the existing method with functionality from the old. What exactly are you wanting? – Kevin B Jul 11 '16 at 22:02
  • _"But have potentially tens of such calls and finding & fixing all of them needs huge effort"_ Yes effort would be involved, though probably not a "huge" effort. _"and is not effective."_ Why would approach not be effective? Another alternative would be to use version of jQuery which returns expected result. What is purpose of using version 3.0? SO still uses version 1.7.1 – guest271314 Jul 11 '16 at 22:04
  • @KevinB you are correct, my bad. it states that in 3.0 upgrade guide – vmg Jul 11 '16 at 22:09
  • @KevinB By noting that stackoverflow still uses version 1.7.1, was attempting to illustrate that using an older version of jQuery is an option. Not certain why OP is attempting to use version 3+ when version 1.11.2 returns expected result? That is, which features does version 3+ provide relevant to the current Quest that 1.11.2 does not? – guest271314 Jul 11 '16 at 22:11

2 Answers2

4

Here's the relevant section from the jquery blog:

"If you have elements in a stylesheet that are set to display: none, the .show() method will no longer override that. So the most important rule for moving to jQuery 3.0 is this: Don’t use a stylesheet to set the default of display: none and then try to use .show() – or any method that shows elements, such as .slideDown() and .fadeIn() – to make it visible.

If you need an element to be hidden by default, the best way is to add a class name like “hidden” to the element and define that class to be display: none in a stylesheet. Then you can add or remove that class using jQuery’s .addClass() and .removeClass() methods to control visibility. Alternately, you can have a .ready() handler call .hide() on the elements before they are displayed on the page. Or, if you really must retain the stylesheet default, you can use .css("display", "block") (or the appropriate display value) to override the stylesheet."

https://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/

Cameron
  • 694
  • 4
  • 16
-2

try $('div') instead var e = document.createElement('div');

mute
  • 1
  • 1