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

Update to jQuery UI 1.12 #3836

Merged
merged 4 commits into from Sep 13, 2018

Conversation

Projects
None yet
2 participants
@cmd-ntrf
Contributor

cmd-ntrf commented Aug 8, 2018

Context

Jupyter Lmod is a notebook server extension that allows users to interact with environment modules before launching kernels. It adds a tab that includes a search bar that uses jQuery UI autocomplete.

Issue

PR #3655 updated the jQuery version to 3.3 and left jQuery UI version to 1.10. There are compatibility issues between these two versions that manifest in jupyter-lmod. The results proposed by autocomplete appears at the top of the page instead of under the search bar.

The following figure illustrates the bug.
buggy

This is the stacktrace generated by jquery in the javascript console.

Uncaught TypeError: r.getClientRects is not a function
    at w.fn.init.offset (jquery.min.js:2)
    at Object.getWithinInfo (jquery-ui.min.js:6)
    at w.fn.init.t.fn.position (jquery-ui.min.js:6)
    at t.(anonymous function).(anonymous function)._suggest (http://localhost:8888/static/components/jquery-ui/ui/minified/jquery-ui.min.js:6:33686)
    at t.(anonymous function).(anonymous function)._suggest (http://localhost:8888/static/components/jquery-ui/ui/minified/jquery-ui.min.js:6:5029)
    at t.(anonymous function).(anonymous function).__response (http://localhost:8888/static/components/jquery-ui/ui/minified/jquery-ui.min.js:6:33003)
    at t.(anonymous function).(anonymous function).__response (http://localhost:8888/static/components/jquery-ui/ui/minified/jquery-ui.min.js:6:5029)
    at t.(anonymous function).(anonymous function).e (http://localhost:8888/static/components/jquery-ui/ui/minified/jquery-ui.min.js:6:4913)
    at t.(anonymous function).(anonymous function).__response (http://localhost:8888/static/components/jquery-ui/ui/minified/jquery-ui.min.js:6:35170)
    at t.(anonymous function).(anonymous function).__response (http://localhost:8888/static/components/jquery-ui/ui/minified/jquery-ui.min.js:6:5029)

The following figure corresponds to the expected result using jQuery UI 1.12 with Jupyter notebook 5.6, or using previous version of Jupyter notebook.
correct

Proposed solution

Update jquery-ui to 1.12 in bower.json.

Disclaimer

I could not find the exact reason why jQuery UI 1.10 autocomplete does not work with jQuery 3.3. I came to the conclusion that jquery-ui had to be updated after reading the following answer on StackOverflow https://stackoverflow.com/a/50016548. I wish I had a better source.

@minrk minrk merged commit 9c60369 into jupyter:master Sep 13, 2018

4 checks passed

codecov/patch Coverage not affected when comparing b94cc44...c9bd0fa
Details
codecov/project 73.77% remains the same compared to b94cc44
Details
continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@minrk minrk added this to the 5.7 milestone Sep 13, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment