This page needs a newer browser to run its tools. You can still read everything here.

jQuery 4 (legacy code and migration to DOM APIs) Module 6

Platforms, plugins and jQuery UI interview questions

Interview questions on platforms, plugins and jQuery UI: warm-ups, then what each harder question tests and how a good answer starts.

12 questions: 4 warm-ups and 8 with model answers · Levels: Fresher to staff

Warm-up questions

Short questions with short answers, each answered in full.

Fresher to mid

What does define( 'SCRIPT_DEBUG', true ); change for jQuery on a WordPress site?

Answered in the lesson jQuery in WordPress, Drupal, Magento and ASP.NET
Fresher to mid

Why does a jQuery plugin end with return this.each(…)?

Answered in the lesson How jQuery plugins work and how to fix them
Fresher to mid

What does jQuery.uiBackCompat = true do in jQuery UI 1.14?

Answered in the lesson jQuery UI 1.14: maintaining widgets on jQuery 4
Fresher to mid

What does a plugin's declared jQuery range tell you, and what does it not?

Answered in the lesson Auditing and replacing third-party jQuery plugins

Questions with model answers

What each question tests, the first step of a good answer and the follow-ups to expect.

Mid to senior

A theme vendor ships one JavaScript file in both its WordPress theme and its Drupal 11 theme. Customers on WordPress 7.1 report no problems; customers on Drupal 11.4 report that the menu never opens. What do you check first, and how do you make one file work on both?
What it tests

Knowing which jQuery each platform ships and how each hands it to code, which removed APIs fail on jQuery 4, and how to prove that one file behaves the same on both releases.

First step

Compare what the file meets: WordPress 7.1 runs jQuery 3.7.1 with Migrate 3.4.1, which keeps old helpers such as .size() working, and Drupal 11.4 runs jQuery 4.0.0 with no Migrate. So look first for APIs that jQuery 4 removed but that still work on WordPress, where jQuery 3.7.1 keeps them or Migrate 3 restores them, such as $.trim(), .size() or $.isArray().
Follow-ups
- How do you find the failing call on the Drupal site without changing production?
- Should the file attach through Drupal.behaviors on Drupal and a ready handler on WordPress?
- How do you show the client that the fixed file works on both platforms?
From the lesson jQuery in WordPress, Drupal, Magento and ASP.NET
Model answer, Pro. Model answers open with any pass; prices are in the notice on this page.
Opening the model answers with your pass…
Model answers open with any MySmartCoPilot pass.
Pro pass · 1 week₹79$2.99
30 days₹179$5.99
1 year₹1,699$45
One payment; a pass never renews. The price shown is the total you pay: no fees or charges are added at checkout.
Passes can’t be bought right now, so the model answers can’t be opened at the moment. If you have a pass, enter your licence key.
Choose a pass I have a licence key
It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to staff

A team building on the ASP.NET Core 10 MVC template replaced wwwroot/lib/jquery with jQuery 4.0.0. Since then, pressing Register with the e-mail empty shows no message, the page reloads from the server, and the console reports "s.parseJSON is not a function". Explain what happened and what you would ship this week and later.
What it tests

Tracing an error to the library that makes the call, knowing what jQuery 4 removed and what Migrate restores, and planning a bridge and a real fix without weakening the form's checks.

First step

Find the caller: parseJSON is not in the page's own code but in jquery.validate.unobtrusive.min.js 4.0.0, which reads data-valmsg-replace with $.parseJSON(), and jQuery 4 removed $.parseJSON(). So the error fires whenever a message is placed or cleared, and it escapes the submit handler before the handler can hold the form back.
Follow-ups
- Would updating jQuery Validation to 1.22.1 fix it?
- Is the form now open to bad data?
- How do you stop this from happening again with the next library?
From the lesson jQuery in WordPress, Drupal, Magento and ASP.NET
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

A shop reloads its filter panel with Ajax and sets up a dropdown plugin on it after every reload. After twenty filters, one click on the page runs the plugin's document handler twenty times, and memory keeps growing. Explain what is happening and how you would fix the plugin and the page.
What it tests

Knowing what jQuery cleans up when it replaces elements and what it leaves on the document, and giving a plugin a lifecycle: namespaced handlers, destroy, and a page that calls it.

First step

Count the handlers with jQuery._data(document, 'events') after each reload. jQuery's .html() cleans the handlers and data of the elements it replaces, but a handler the plugin put on the document stays, and each setup adds another, so the count grows by one per reload and every old one keeps its removed panel alive.
Follow-ups
- The plugin is a vendor's and has no destroy method. What can the page do?
- Would rewriting the plugin with jQuery UI's widget factory help?
- How do you prove in a test that the leak is gone?
From the lesson How jQuery plugins work and how to fix them
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to staff

A tooltip plugin under the MIT licence, with no release in years, stops the page on jQuery 4 with "$.isFunction is not a function". Your manager says: fork it and rewrite it properly. What do you do instead, step by step, and what do you ship?
What it tests

Choosing the cheapest fix that holds, writing a small patch that respects the licence, and proving with checks on both releases that the patch changes nothing else.

First step

First look for a maintained release or a fork the community keeps that runs on jQuery 4. If there is none, run the page on jQuery 4.0.0 with the development build of Migrate 4.0.2: its WARN list names every removed call the plugin makes, which is the list the patch has to fix.
Follow-ups
- Migrate restores $.isFunction(). Why not ship with Migrate?
- How do you keep the patch when someone updates the plugin later?
- When would you agree to the rewrite?
From the lesson How jQuery plugins work and how to fix them
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

After a site moved from jQuery UI 1.13.3 to 1.14.2, its confirmation dialogs lost their red header and its tooltips their dark style. Nothing appears in the console, and the same theme still works on the WordPress site of the same client. What happened, and how do you fix it properly?
What it tests

Recognising a silent API change, knowing what jQuery.uiBackCompat restores and where it is set, and replacing the 1.11 options with the classes option, with a test that would have caught it.

First step

Inspect a dialog's wrapper: the theme's class is not on it. The code sets dialogClass and tooltipClass, options of the 1.11 API, which 1.14 reads only when jQuery.uiBackCompat is true. WordPress 7.1 sets that flag before jQuery UI loads, which is why the WordPress site still has the classes.
Follow-ups
- Why not set the flag on this site as well?
- Which other options have the same problem?
- What test would have caught it before the release?
From the lesson jQuery UI 1.14: maintaining widgets on jQuery 4
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to staff

A security scan lists four advisories for a shop's jQuery UI 1.12.1. The shop uses its datepicker, a dialog and autocomplete, and runs jQuery 3.7.1. The owner asks how bad it is and what the plan is. What do you answer?
What it tests

Reading advisories by affected range and by the option each needs, separating a release's exposure from the site's use of it, and planning an upgrade that fixes them without breaking the widgets.

First step

Name the four: the datepicker's altField and *Text options and the of option of .position(), fixed in 1.13.0, and the checkboxradio refresh, fixed in 1.13.2. Each needs untrusted text in that option or label, so check where the shop's code sets those options and whether any value comes from a visitor or a URL.
Follow-ups
- The shop's code sets every option from fixed values. Can it stay on 1.12.1?
- Which breaking changes of 1.14 matter for these three widgets?
- The shop also plans jQuery 4. In which order do you move?
From the lesson jQuery UI 1.14: maintaining widgets on jQuery 4
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

Before a move to jQuery 4, a site runs Bootstrap 4.6.2's JavaScript, Owl Carousel 2.3.4 and bootstrap-datepicker 1.10.1. The team wants one rule: replace everything older than jQuery 4. What do you decide for each of the three, and why is their rule wrong?
What it tests

Turning published facts and a real run into a decision per plugin, telling a declared range from behaviour, and defending keep against replace with evidence.

First step

Run each one on jQuery 4.0.0 alone and with Migrate before deciding. Bootstrap 4.6.2 throws its own version error either way; Owl Carousel 2.3.4 throws on $.camelCase alone and runs with Migrate; bootstrap-datepicker 1.10.1 runs on 4.0.0 alone although its range stops below 4.0.0.
Follow-ups
- Bootstrap 5 is a big move. What do you do in the meantime?
- npm installs a second jQuery for the datepicker. Is that a problem?
- How do you keep the decisions current after the move?
From the lesson Auditing and replacing third-party jQuery plugins
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to staff

A shop's 20 page templates call $.cookie() from jquery.cookie 1.4.1, which throws on jQuery 4. Some of the cookies are written by the PHP back end. How do you replace the plugin on the live site without logging anyone out or losing a basket?
What it tests

Pinning old behaviour with checks before a change, knowing where a successor's defaults differ, and switching behind a flag with a way back.

First step

Search for every $.cookie( and $.removeCookie( call and list what the pages rely on. Then write checks against jquery.cookie on jQuery 3.7.1 for exactly those behaviours, including how it reads values the back end wrote, such as a + for a space, before writing any replacement.
Follow-ups
- Why not ask every template to call js-cookie directly?
- The checks pass, but one page logs people out after the switch. Where do you look?
- When do you delete the old plugin and the flag?
From the lesson Auditing and replacing third-party jQuery plugins
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes

The lessons of this module

jQuery in WordPress, Drupal, Magento and ASP.NET Free lesson, Pro answers: 15 minutes
How jQuery plugins work and how to fix them Free lesson, Pro answers: 15 minutes
jQuery UI 1.14: maintaining widgets on jQuery 4 Free lesson, Pro answers: 15 minutes
Auditing and replacing third-party jQuery plugins Free lesson, Pro answers: 15 minutes

All jQuery 4 (legacy code and migration to DOM APIs) interview questions · The jQuery 4 (legacy code and migration to DOM APIs) track

Warm-up questions

What does define( 'SCRIPT_DEBUG', true ); change for jQuery on a WordPress site?

Why does a jQuery plugin end with return this.each(…)?

What does jQuery.uiBackCompat = true do in jQuery UI 1.14?

What does a plugin's declared jQuery range tell you, and what does it not?

Questions with model answers

A theme vendor ships one JavaScript file in both its WordPress theme and its Drupal 11 theme. Customers on WordPress 7.1 report no problems; customers on Drupal 11.4 report that the menu never opens. What do you check first, and how do you make one file work on both?

A shop reloads its filter panel with Ajax and sets up a dropdown plugin on it after every reload. After twenty filters, one click on the page runs the plugin's document handler twenty times, and memory keeps growing. Explain what is happening and how you would fix the plugin and the page.

A tooltip plugin under the MIT licence, with no release in years, stops the page on jQuery 4 with "$.isFunction is not a function". Your manager says: fork it and rewrite it properly. What do you do instead, step by step, and what do you ship?

After a site moved from jQuery UI 1.13.3 to 1.14.2, its confirmation dialogs lost their red header and its tooltips their dark style. Nothing appears in the console, and the same theme still works on the WordPress site of the same client. What happened, and how do you fix it properly?

A security scan lists four advisories for a shop's jQuery UI 1.12.1. The shop uses its datepicker, a dialog and autocomplete, and runs jQuery 3.7.1. The owner asks how bad it is and what the plan is. What do you answer?

Before a move to jQuery 4, a site runs Bootstrap 4.6.2's JavaScript, Owl Carousel 2.3.4 and bootstrap-datepicker 1.10.1. The team wants one rule: replace everything older than jQuery 4. What do you decide for each of the three, and why is their rule wrong?

A shop's 20 page templates call $.cookie() from jquery.cookie 1.4.1, which throws on jQuery 4. Some of the cookies are written by the PHP back end. How do you replace the plugin on the live site without logging anyone out or losing a basket?