Bootstrap v3 is not compatible with jQuery 3.0

[ghost]

jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Released

I have not tested everything but Modals are broken because of this major change:

Major changes

Simplified .show() and .hide() methods

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.

JSBin jQuery v1.11.1 http://jsbin.com/sokiyuzepi/1/edit?html,output
JSBIN jQuery v3.0.0 alpha http://jsbin.com/xuteferejo/1/edit?html,output

[cvrebert]

We should update our docs and package metadata to reflect this incompatibility.
Given that Bootstrap v3 is on the back burner in order to focus on the upcoming Bootstrap v4, it's unlikely that we'd attempt to fix Bootstrap v3's incompatibility at this time.

[ghost]

I think things like this are a good reason to look into issue #15068 again.

[cvrebert]

I think things like this are a good reason to look into issue #15068 again.

We still have absolutely zero plans on that front. 😄

[kkirsche]

In my opinion, it would make more sense to attempt for compatibility with jQuery 3.0 after it is out of the alpha stage and it can confidently be developed against in regards to general API stability. I assume the big pieces are done now (based on what their announcement said) but it sounded to me as though more changes will probably occur prior to beta / GA.

If someone know's it's stable, it probably shouldn't be anything crazy to add compatability. My only initial concern (without looking at what is necessary) that it may require some duplication in areas if there isn't a possible cross version solution and $.fn.jquery must be used to determine what version of jQuery is being used.

[ghost]

My only initial concern (without looking at what is necessary) that it may require some duplication in areas if there isn't a possible cross version solution and $.fn.jquery must be used to determine what version of jQuery is being used.

@kkirsche jQuery 3 is more strict than jQuery 2. It's like XHTML and HTML. Backward compatibility is preserved and code doesn't look like a mess.
If I'm not mistaken, all you need to do is replace show() and hide() functions with .css('display', '') or addClass('hidden') and fix a selector in alert.js (QUnit fails on this line because $('#') is invalid in jQuery 3)

[Studio384]

As jQuery 3.0 is a replacement for both jQuery 1.x and 2.x, I would say that this has to get fixed in Bootstrap 3 and not wait until Bootstrap 4 (Because how long is that going to take? In October 2014, it was said that the first pre-release would land in a couple of weeks, we're now 9 months further).

[kkirsche]

@Studio384 jQuery 3.0 is only alpha still and is not a stable release.

[dmethvin]

Can someone summarize the problems you've encountered with jQuery 3.0 alpha and Bootstrap 3, in the form of a few simple jsbin examples? I'd like to see what it takes to fix this.

[cvrebert]

@dmethvin Modals seem to break due to the .hide()/.show() changes. #16834 (comment) gives a before-and-after example.

[mdo]

@dmethvin We haven't done much other testing—at least I'm sure @fat and I haven't—to know what all would change. We're basically EOL-ing v3 anyway, so we likely won't try testing it out until after we ship our first alphas with v4.

[esko]

jQuery dropped the new .show() and .hide() methods in the latest beta (3.0.0-beta1). Modals and other components seem to work OK with it.

[dmethvin]

The 3.0.0-beta1 still does change the way show/hide work but it tries to force fewer layouts in the process.

[ghost]

@mdo @cvrebert jQuery 3 RC1 is here.

Welcome to the Release Candidate for jQuery 3.0! This is the same code we expect to release as the final version of jQuery 3.0 (pending any major bugs or regressions).

JUnit bootstrap tests with included jQuery 3 RC1 + jQuery Migrate plugin:
http://img.prntscr.com/img?url=http://i.imgur.com/Ll7hSs4.png

I think it's possible to fix the listed issues

And show() and hide() methods are not an issue anymore

jQuery dropped the new .show() and .hide() methods in the latest beta (3.0.0-beta1). Modals and other components seem to work OK with it.

[dmethvin]

The scrollspy failure should be fixed by #19906. That was the only failure I saw in the v4-dev branch. @Maxkorz what branch was used for those tests?

A selector of "#" hasn't ever been valid in CSS, jQuery just used to return an empty set where now it throws an error. You'd need to determine why it's trying to use that selector.

The one with SVG positioning may be related to jquery/jquery#2895? What browser was used for those tests?

[ghost]

@dmethvin I used the master branch.

The scrollspy failure should be fixed by #19906. That was the only failure I saw in the v4-dev branch.

This issue is about Bootstrap v3.

A selector of "#" hasn't ever been valid in CSS

Selector "#" appears in file alert.js:

    var selector = $this.attr('data-target')

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
    }

    var $parent = $(selector)

    if (e) e.preventDefault()

    if (!$parent.length) {
      $parent = $this.closest('.alert')
    }

selector = $this.attr('href')

so simple HTML <a href="#">link</a> leads to an error.

What browser was used for those tests?

I used Chrome 51 to run the tests.

[kkirsche]

I would recommend a new issue instead of reviving this with a clear note whether this is regarding V3, V4 or both.

[dlong500]

Now that jQuery 3.0 is officially released I think this needs to be revisited. Is Bootstrap 3.x going to updated to work with it or not? Given that there appears to be relatively few issues it would be a shame for Bootstrap 3.x users to be stuck with an old jQuery dependency (especially since Bootstrap 4.x is not even past the alpha stage--so who knows when it will actually be released).

[cvrebert]

#20280 and #20278 are the remaining known jQuery 3-related bugs, after going through the migration guide. Although jQuery 3's.show()/.hide() and :visible changes might cause as-yet-unknown grief, they don't seem to have affected any of our unit tests.

[fuhrysteve]

@cvrebert IIRC they pulled the formerly disruptive change in behavior of .show() / .hide() from the final release of jQuery 3.0, so the comments at the top of this thread about those issues may no longer be entirely relevant anymore.

[cvrebert]

@fuhrysteve There are still some breaking changes in the final release, though they're less drastic: http://jquery.com/upgrade-guide/3.0/#breaking-change-show-hide-and-toggle-methods-now-respect-more-stylesheet-changes

[cvrebert]

Both blockers have been fixed. Now we just need to update the package metadata and the version check code.

[niemyjski]

What's the status of this issue?

[CaelanStewart]

@niemyjski, it is done. Bootstrap 3.3.7 now supports jQuery 3+.