Django - Problems of Updating from 1.0.0-alpha to 1.0.0-beta1

[Trochonovitz]

Discussed in #1420

^{Originally posted by SergejGleithmann February 25, 2023}
Hey everyone,

I have some problems with updating my code in order for it to work with the new version. I use Django and the previous TW-Elements version worked perfectly fine (I stored my index.min.js in the static-folder together with the tailwind CSS). However after upgrading and trying to translate to the new syntax some things do not wok properly and some do not entirely.

1. As for now I am not able to get the tooltip to work, even in the minimal working example of the tutorial the tooltip is not working.
2. The accordion however is only partly working. It folds and unfolds as expected, but the arrow does not turn when doing so. In the minimal example of the tutorial however it works, even with the same HTML.
3. The carousel turns, however one arrow is black and the buttons are not working.
4. The tabs are not working at all. Every container is always visible, no interactivity at all.

With the exception of the tooltip everything works fine in the tutorial setting (see picture for broken tooltip). In my setting however the above problems occur even when copying the html from the Components site.

I know that this description is very vague, but maybe someone can give me a reason, why with some components only part of the features are working, becouse I have no idea for an entrypoint of debugging. Are this maybe the parts that do not rely on js that are currently working?

I'm rather certain that the problem lies on my end, but I have no clue on where to start debugging. Can someone give me a hint?

Thanks in advance!

[parko65]

Also dropdown not showing items from unordered list element.

[SergejGleithmann]

Hey I updated the discussion (see #1420). Was that incorrect? Should I update the issue instead of the discussion? Sorry I'm new.
I added the following:

Hey, I have new insights.

First of all: it is not a Django Problem. I did not set up my config file correctly. It contained of a mixture of old and new tailwind syntax (content/purge for example), which did not produce errors beforehand. I also updated Tailwind from 2.7. to 3.7 and now it works mostly (remember to run npm install after all version changes, I know most of you will know this, but I am stupid apparently).

As of now I managed to get the accordion and the carousel to work as intended.
The tooltip however only works if i add

var tooltipTriggerList = [].slice.call(
    document.querySelectorAll('[data-te-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
     return new te.Tooltip(tooltipTriggerEl);
});

and not via the data attributes. (I guess this is related in parts to this discussion.)

The tabs and also the checkboxes did not yet work properly, but i'll keep on trying.

[Trochonovitz]

Hi, we just have launched bunch of integration tutorials - both with CSR and SSR frameworks. If you have more questions about integration or you still got some problems with particular components, let us know by adding new issue / topic in discussions section (if there are some unclear informations or just want let us know about something).

Django integration tutorial.