jquery deployment

[Mike Dewhirst]

I just encountered a weird UI glitch[1] in the Admin after upgrading to
Django 2.2.1

I checked and found the version of jquery I'm using is 1.4.1 and figured
that has to be contributing to the problem.

The 2.1 release note says "jQuery is upgraded from version 2.2.3 to
3.3.1." so I dug deeper in the docs to find how it is upgraded. Can't
find anything so far. I saw that there are Django Admin javascript
customisations. So that might complicate matters.

Is there a best practice for ensuring I keep my projects up to date?

Thanks

Mike

[1] With a m2m (self) adding another instance clicking on the {SHOW}
link just relocates to the top of the page. Has to be a jQuery thing
doesn't it?

[Mike Dewhirst]

All versions of Django from 1.11 to 2.1 are working fine with py3.6 and
py3.7. Only 2.2 barfs.

I now suspect my Stripe integration which is somewhat behind the wave
front at rev 2.0.3. It too uses js heavily. That is where I'm looking at
the moment.

I still hate js and hope someone can offer advice on managing js deployment.

Thanks

Mike

[Mike Dewhirst]

On 30/05/2019 8:22 pm, Mike Dewhirst wrote:

> I just encountered a weird UI glitch[1] in the Admin after upgrading
> to Django 2.2.1
>
> I checked and found the version of jquery I'm using is 1.4.1 and
> figured that has to be contributing to the problem.
>
> The 2.1 release note says "jQuery is upgraded from version 2.2.3 to
> 3.3.1." so I dug deeper in the docs to find how it is upgraded. Can't
> find anything so far. I saw that there are Django Admin javascript
> customisations. So that might complicate matters.

OK - years ago I added my own jQuery to the project and forgot it. On
reading https://docs.djangoproject.com/en/2.2/ref/contrib/admin/#jquery
I just deleted mine. Nothing changed so I assume I originally installed
it incorrectly.

I have now discovered the problem described earlier is more generic as
follows:

1. For any ForeignKey or ManyToManyField in the Admin, if you click
(SHOW) and there is already an existing related record it will open up
nicely. No sign of any bug.

2. For any such related item if you "Add another <whatever>" and click
(SHOW) the Admin will reposition to the top of the page instead of
opening the collapsed fields.

3. I have disabled all my own css

4. There is no js in any of my static dirs - relying entirely on
Django's js.

5. I haven't changed the Admin  fieldsets 'classes': ('collapse',),

6. The problem goes away if I downgrade to Django 2.1.8

What code would be interesting in this case?

Any hints?

Thanks

Mike

[Mike Dewhirst]

On 31/05/2019 6:04 pm, Mike Dewhirst wrote:
> On 30/05/2019 8:22 pm, Mike Dewhirst wrote:
>> I just encountered a weird UI glitch[1] in the Admin after upgrading
>> to Django 2.2.1
>>

<snipped to cut to the chase>

> I have now discovered the problem described earlier is more generic as
> follows:
>

> 1. For *any *ForeignKey or ManyToManyField in the Admin, if you click

> (SHOW) and there is already an existing related record it will open up
> nicely. No sign of any bug.
>
> 2. For any such related item if you "Add another <whatever>" and click
> (SHOW) the Admin will reposition to the top of the page instead of
> opening the collapsed fields.
>
> 3. I have disabled all my own css
>
> 4. There is no js in any of my static dirs - relying entirely on
> Django's js.
>
> 5. I haven't changed the Admin fieldsets 'classes': ('collapse',),
>
> 6. The problem goes away if I downgrade to Django 2.1.8

Back in 2.2.1 ...

7. Results are identical in both Chrome and Firefox

8. Commenting out lines 48, 49 and 50 in
contrib/admin/static/admin/js/collapse.js [2] causes the same problem
for 1 above.  I really don't know javascript but it seems to me
toggleFunc isn't toggling Hide / Show correctly *when there is an
unsaved empty related record*. See toggleFunc from collapse.js [3]

[2]

48        for (i = 0; i < toggles.length; i++) {

49            toggles[i].addEventListener('click', toggleFunc);

50        }

( I did try line 48 as ... for (var i = 0; i < toggles.length; i++) {
... but no cigar)

[3]

33        // Add toggle to anchor tag

34        var toggles = document.querySelectorAll('fieldset.collapse a.collapse-toggle');

35        var toggleFunc = function(ev) {

36            ev.preventDefault();

37            var fieldset = closestElem(this, 'fieldset');

38            if (fieldset.classList.contains('collapsed')) {

39                // Show

40                this.textContent = gettext('Hide');

41                fieldset.classList.remove('collapsed');

42            } else {

43                // Hide

44                this.textContent = gettext('Show');

45                fieldset.classList.add('collapsed');

46            }

47        };


Should I start a new project and try and demonstrate it there?

Thanks

Mike