Updated jQuery: "r.getClientRects is not a function"

LEGEND ,
Aug 18, 2020 Aug 18, 2020

Copy link to clipboard

Copied

Hello, all,

 

I'm trying to update from very old versions of jQuery (like 1.3.x through 1.11.x) and I'm using the latest version, which is v.3.5.1.  I'm getting the error message in the console: r.getClientRects is not a function.  I've been Googling this, and coming up with nothing but "include the migration library".  Well, I've included it, and I'm still getting the error.  Could this be due to old jQuery-UI files?  Or something else?

 

V/r,

 

[Moderator moved from Cold Fusion to Dreamweaver at OP's request.]

 

^ _ ^

Views

5.0K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Aug 20, 2020 Aug 20, 2020

I would run a test on one project and see if changing jQuery UI helps you or hurts you. 

 

Likes

Translate

Translate
Adobe Community Professional ,
Aug 19, 2020 Aug 19, 2020

Copy link to clipboard

Copied

What happens if you roll back to jQuery core 2?

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 19, 2020 Aug 19, 2020

Copy link to clipboard

Copied

Hi, Nancy,

 

Unfortunately, we will never know.  Recent scans and external security reports show vulnerabilities in versions of jQuery earlier than v3.5.0, so the USG will not consider rolling back to v2.x.  I'm just trying to find a way to update the code to match with the updated jQuery, but the error messages are not very helpful, even with the uncompressed development migration library.  I keep getting this feeling like it's got to do with the jQuery-UI files, but can't find anything on Google indicating as much.

 

V/r,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 19, 2020 Aug 19, 2020

Copy link to clipboard

Copied

Which jQuery UI build are you using?

https://code.jquery.com/ui/

 

The last jQuery UI (1.12) came out 4 years ago.  

https://jqueryui.com/changelog/1.12.0/

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 19, 2020 Aug 19, 2020

Copy link to clipboard

Copied

Doing a project-wide search for 'jquery' and picking out just ones that include 'ui', I see a wide range of UI includes:

1.9.1.custom
1.8.rc2
1.7
fancybox.1.3.1
1.8.16.custom

.. and others.  Doesn't look like any of them are 1.12.  Could updating all of them help?  idk.. There are 227 instances of the word 'jquery' in the search results.

 

V/r,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 19, 2020 Aug 19, 2020

Copy link to clipboard

Copied

jQuery UI is not the same as jQuery core library.  Fancybox 3 has no dependencies on jQuery UI.  But it absolutely requires a compatible jQuery core.

 

You could try upgrading jQuery UI to the latest and see what happens.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 19, 2020 Aug 19, 2020

Copy link to clipboard

Copied

I'll give that a shot and report back.  Thank you.

 

V/r,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 20, 2020 Aug 20, 2020

Copy link to clipboard

Copied

Nancy,

 

We are not allowed to use CDNs for sources.  If I go to the URL for the 1.12.1 UI and save that as a .js file, will that be enough?

 

V/r,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 20, 2020 Aug 20, 2020

Copy link to clipboard

Copied

Go here:

https://code.jquery.com/ui/1.12.1/jquery-ui.min.js

 

Ctrl + A to select all.

Ctrl + C to copy.

File > New > JavaScript > Create button.

Ctrl + V to paste.

Ctrl + S to save.

Close file.

Open parent document.

Insert > HTML > Script...

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 20, 2020 Aug 20, 2020

Copy link to clipboard

Copied

Thank you for the detailed steps.  But I should have been more specific in my query.

 

Will including a local copy of the .js file be sufficient?  OR, does the UI on the CDN need access to other files on the CDN that I will also need to copy and include locally?

 

V/r,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 20, 2020 Aug 20, 2020

Copy link to clipboard

Copied

The core library doesn't make calls to other scripts.  You need a minified jQuery UI js + whatever theme you're using.

base black-tie blitzer cupertino dark-hive dot-luv eggplant excite-bike flick hot-sneaks humanity le-frog mint-choc overcast pepper-grinder redmond smoothness south-street start sunny swanky-purse trontastic ui-darkness ui-lightness vader

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 20, 2020 Aug 20, 2020

Copy link to clipboard

Copied

Nancy,

 

I just did a site-wide search for script tags that have 'ui' as part of the src attribute.  71 UI files, 27 of which are custom, 44 are no-theme plain-jane UI files.  Each section of the project has a different color scheme.  If I have to update those, how do I determine the settings?  Or is there an easy way?

 

Thank you, for your insight.

 

V/r,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 20, 2020 Aug 20, 2020

Copy link to clipboard

Copied

I would run a test on one project and see if changing jQuery UI helps you or hurts you. 

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 21, 2020 Aug 21, 2020

Copy link to clipboard

Copied

I gave it a shot.. replaced the old customized UI file with a plain-jane 1.12.1 UI.  It did fix one problem, somewhat.  I'll explain.  (Sadly, I cannot provide a link or a screenshot - this is a restricted portal, and only those with a Common Access Card can view the pages.)

 

The main page of the portal, as well as every sub-section, displays a banner the first time the page loads.  It declares to the user that "You are accessing a USG Informatin System that is for authorized use only" and a bunch of bullet points that the user has to agree to in order to continue.  The only reason we first noticed that there was a problem was because the banner didn't appear on a higher z-index than the rest of the page; rather it was pushed to the bottom of the page, below the footer, and clicking the CONTINUE button did nothing.

 

With the 1.12.1 UI, the banner is appearing on a higher z-index than the content, except for the news captions/images slideshow near the top of the screen.  The images show through the banner.  Any suggestions?

 

Thank you, and V/r,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 21, 2020 Aug 21, 2020

Copy link to clipboard

Copied

What's the z-index of your banner?

Does banner have a 100% solid background?

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 24, 2020 Aug 24, 2020

Copy link to clipboard

Copied

Hi, Nancy,

 

I don't know what made me think of it, but I cleared the browser cache and the problem disappeared.  smh

 

So, I created a txt file with links to instructions for clearing the cache of the four bigs (FireFox, Chrome, IE, Edge) and sent it to our SA, just in case there's a bunch of people who flip out on the pre-cleared version; we can get the instructions out, quickly.

 

Don't know _why_ that fixed it.. I've given up, anymore.  But, thank you for your time and wisdom.

 

V/r,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 24, 2020 Aug 24, 2020

Copy link to clipboard

Copied

But, I just realized that this brings me back to a question I asked, earlier.

 

For the custom UI files, with different color schemes, how can I get updated UI to match those?

 

V/r,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 24, 2020 Aug 24, 2020

Copy link to clipboard

Copied

Color themes are CSS, not JavaScript files.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 25, 2020 Aug 25, 2020

Copy link to clipboard

Copied

Clearly I am misunderstanding something.

 

When I find a jQuery file named "jquery-ui-1.9.1.custom.min.js", what exactly is 'custom' about it?

 

V/r,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 25, 2020 Aug 25, 2020

Copy link to clipboard

Copied

It's a custom script build.  Keep in mind that jQuery UI is a bundle of interactive widgets & utilities   ranging from accordions & tabbed panels to sliders, progress bars, draggables, calendar date pickers and more...  

https://jqueryui.com/demos/

 

I guess whoever ran this show thought it was a good idea to divide up jQuery UI & load a separate custom script build for each task instead of using one whole UI instance across your entire site.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 25, 2020 Aug 25, 2020

Copy link to clipboard

Copied

"I guess whoever ran this show thought it was a good idea to divide up jQuery UI & load a separate custom script build for each task instead of using one whole UI instance across your entire site."

 

Yes.  Since each sub-section has it's own application.cfm/cfc, each has it's own jQuery, jQuery UI, etc.  So, am I correct to assume that just replacing all of the UI files with a full UI 1.12.1 build, I should be able to do this without breaking anything?  I hope so.. there are way too many instances in this project.  🙂

 

V/r,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 25, 2020 Aug 25, 2020

Copy link to clipboard

Copied

You'll have to try it one at a time and test it.  I only foresee a hitch if your previous developer made manual changes to the UI scripts.  I can't imagine why anyone would do that but honest to God, stranger things have happened.  Replacing custom scripts would wipe out manual changes.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 25, 2020 Aug 25, 2020

Copy link to clipboard

Copied

It would not surprise me if he did.  He once used CFB to create CFCs for a DSN (five per table), and then proceeded to make manual changes to them.  Nightmare.

 

Thank you, Nancy, for your time.  Greatly appreciated.

 

V/r,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 25, 2020 Aug 25, 2020

Copy link to clipboard

Copied

"...Nightmare."

Yeah, I get the picture.  And after that did they promote him to management?

🙂

 

Hopefully it's not all bad.

Best of luck!

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 26, 2020 Aug 26, 2020

Copy link to clipboard

Copied

LATEST

I am happy to report that I have swapped out the old UI with the new UI on two sections, tested, and they appear to be working.  2 down, 60-some-odd to go.  Thanks!

 

V/r,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines