Skip to content
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

JavaScript issue with autocomplete_fields and Semantic UI #271

Open
dellsystem opened this issue Dec 24, 2024 · 0 comments
Open

JavaScript issue with autocomplete_fields and Semantic UI #271

dellsystem opened this issue Dec 24, 2024 · 0 comments

Comments

@dellsystem
Copy link

dellsystem commented Dec 24, 2024

Related to issue #100, but slightly different - the latest version may have fixed the bug when Bootstrap is used, but there's a Javascript issue that arises when Semantic is used. I suspect this is due to a namespacing issue with the Select2 widget. When autocomplete_fields are defined on a ModelAdmin, the select2 Javascript gets included in the <head>. This is the order:

<script src="/static/admin/js/vendor/select2/select2.full.js"></script>
<script src="/static/plugins/js/semantic.min.js"></script>
... [other stuff]
<script src="/static/martor/js/martor.semantic.min.js"></script> [at the very bottom]

The error I get in console looks like this:

Uncaught TypeError: o.find(...).dropdown is not a function
    at HTMLDivElement.<anonymous> (martor.semantic.min.js:9:12540)
    at Function.each (jquery.js:383:19)
    at jQuery.fn.init.each (jquery.js:205:17)
    at fn.martor (martor.semantic.min.js:9:344)
    at HTMLDocument.<anonymous> (martor.semantic.min.js:9:14373)
    at mightThrow (jquery.js:3489:29)
    at process (jquery.js:3557:12)

Which is triggered by the use of $().dropdown() and $().tab() in martor.semantic.js:

            // Handle tabs.
            mainMartor.find('.ui.martor-toolbar .ui.dropdown').dropdown();
            mainMartor.find('.ui.tab-martor-menu .item').tab();

And here's a screenshot of how it looks:
image

Steps to reproduce

To reproduce in the demo app, in settings.py change MARTOR_THEME = 'bootstrap' to MARTOR_THEME = 'semantic' and then navigate to /admin/app/post/add/. Django version 5.1.4, Martor version 1.6.45, and Chrome 131.0.6778.139.

Possible solutions: to change MARTOR_THEME back to bootstrap (which might work for the demo app, but doesn't really work if I already have Semantic for my project) or to turn off autocomplete. I also tried merely removing the corresponding 2 offending lines from martor.semantic.min.js but it breaks the functionality of the Editor/Preview tabs.

I've also tried installing django-semantic-admin, which seems to automatically turn manytomany fields into Semantic UI dropdown widgets (bypassing select2) without the need to list autocomplete_fields. So far it seems to work, but it would be nice to be able to use Martor and autocomplete_fields together without having to install a different app.

(Thanks for all your work on this @agusmakmun! It's such a useful app.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant