Removing jquery-ui from the admin template broke modeltranslation

[Remiz]

I updated a project with the newest version of Mezzanine and I noticed in the admin interface that the translated fields toggle stopped working properly. I think it's because jquery-ui is no longer included in the admin template, resulting in tabbed_translation_fields.js not properly loading:

VM246 jquery.js:4055 Uncaught TypeError: tabsContainer.tabs is not a function
    at Object.<anonymous> (VM250 tabbed_translation_fields.js:166)
    at Function.each (VM246 jquery.js:387)
    at createTabs (VM250 tabbed_translation_fields.js:136)
    at HTMLDocument.<anonymous> (VM250 tabbed_translation_fields.js:326)
    at mightThrow (VM246 jquery.js:3762)
    at process (VM246 jquery.js:3830)

Anyone else has the same issue with a multilingual admin interface?

[jerivas]

Just pushed a new commit restoring jQuery UI, please give it a try

[Remiz]

I just tried and I have the same error. I double checked and jquery-ui is properly imported, so it looks like I was wrong in the first place, sorry about that. I suspect it has to do with the tabbed_translation_field.js file not being compatible with jquery 3.4, but I could be wrong again. I'll try to override my admin template to make it work and let you know.
EDIT: The error is actually different once jquery-ui is included:

VM564 jquery-3.4.1.js:3850 Uncaught TypeError: tabsContainer.tabs is not a function
    at Object.<anonymous> (VM572 tabbed_translation_fields.js:166)
    at Function.each (VM564 jquery-3.4.1.js:373)
    at createTabs (VM572 tabbed_translation_fields.js:136)
    at HTMLDocument.<anonymous> (VM572 tabbed_translation_fields.js:326)
    at mightThrow (VM564 jquery-3.4.1.js:3557)
    at process (VM564 jquery-3.4.1.js:3625)

[Remiz]

So a bit more about my attempts at fixing the issue:

I'm pretty sure that the fact jquery-ui doesn't load is because there is a conflict about which version of jquery to use. I see it imported 3 times in my page source. I manage to have it partially fixed by forcing tabbed_translation_fields.js to use django.jQuery, by replacing this line

var jQuery = window.jQuery || $ || django.jQuery;

with

var jQuery = django.jQuery;

Doing so, I got it to work but for some reason the translation switch buttons are duplicated (the first one behaving weirdly and just hiding the field). I'll keep looking into it, but I think it would be helpful if someone with a simpler project could confirm that the error is not just on my end.

[dekomote]

This PR #1982 fixes your issue. Hopefully it'll be merged soon.

[Remiz]

I confirm that PR #1982 fixes the issue. Thanks @dekomote!

[github-actions]

🎉 This issue has been resolved in version 5.0.0-rc.1 🎉

The release is available on:

• GitHub release
• v5.0.0-rc.1

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 5.0.0 🎉

The release is available on:

• GitHub release
• v5.0.0

Your semantic-release bot 📦🚀