Upgrading v2 to v3/v4 with multiple instances as requirement

[Piralein]

I'm currently attempting to upgrade an old v2.4.1 to the newest v3.1.1.
According to issue #6 it is not possible to use multiple instances in v3.

The currently existing use case is:
Multiple independent captcha instances on one page, some are loaded with ajax (after the first captcha init).

should I wait for the v4 release or is there any workaround to the problem someone can share?
If waiting for the new version is the better option, could I get an estimate of the current progress until it is ready for release?
Thank you.

[fabianwennink]

Hi @Piralein! If you were to switch to the latest version v3.1.1, your use case wouldn't work with said version. As I stated in my latest comment on #6, I wasn't able to fix this at that time for v3 without breaking backwards compatibility (and thus breaking semantic versioning). However, I recently pushed a commit to the develop branch for v4 (289609b), which corrected this issue, and should also technically work with v3 with some changes - although I haven't tested that.

I'll see if I can merge that specific commit with the v3 branch and release a new version in the next few days. Otherwise, development of v4 is in it's final stage and almost ready. I'll update this discussion if I manage to (or not) merge that commit with v3

[fabianwennink]

Hi @Piralein. I've now merged the specific commit into the 3.x branch (not yet merged to master). Could you perhaps try out this change and let me know if this works for your use case?

[Piralein]

Thank you very much! I had to adjust some small things, but it works without a problem now. I tested some of our most used use cases with 2 independent captcha's in 2 different selectors, 1 loaded with ajax after the other was already initialized.

the changes I did:

• line 881 return IconCaptcha.$init(instances, this.selector, options);, I'm not really this familiar with the structure of jquery objects, but the property doesn't exist. I changed it to a parameter of the IconCaptcha() function.
• line 218, I don't know if this is necessary, I changed the const _captchaId = id + 1; to the generateWidgetId() function contained in the development branch.
• line 318, One of the captcha's is loaded via ajax and has an autogenerates url with parameters. iconsHolder.style.backgroundImage = url(${options.general.validationPath}?payload=${imageRequestPayload}); results in an invalid call because it adds a new param with ?.

[fabianwennink]

After looking at the commit history of the 3.x branch, I noticed it is somehow a few commits behind master. This is most likely why these issues you've pointed out (at least the last one) are happening. My bad 😅. I'll fix the commit history of the 3.x branch and push it later today.

EDIT: You're right, the code this.selector appears to have been removed in jQuery 3. I wasn't aware of that. I'll adjust the code and add a fix to the 3.x branch before merging it with master.

EDIT: I've updated the 3.x branch. The commit history has been corrected, so the issue with the validation path has been fixed. Regarding the widget ID, I've changed the way the IDs are assigned. The generateWidgetId from the development branch won't work with the PHP v3 back-end, as this function generates a UUIDv4 - which is a string, but the server expects an integer. So for now, I've made an alternative function which just generates a random larger number. Of course there is the slightest change that the same number is generated for more than 1 captcha instance, however this implementation is still way better than using the captcha init index.

[fabianwennink]

Hi @Piralein! The latest release 3.1.2 made it possible to initialize IconCaptcha more than once on a single page.