django-admin-interface icon indicating copy to clipboard operation
django-admin-interface copied to clipboard

Modal window doesn't close correctly after save: `Cannot read properties of undefined (reading 'pathname')`

Open kfirufk opened this issue 2 years ago • 8 comments

Python version 3.9.13

Django version 4.1

Package version 0.20.0

in the admin page i'm trying to add a row to the table MaintenanceServiceSupplierContact that has a foreign key connection to a different table. this is the model for that table:

class MaintenanceServiceSupplierContact(models.Model):
    service_supplier = models.ForeignKey(MaintenanceServiceSupplier, on_delete=models.PROTECT)
    name = MyCITextField(verbose_name=_('Name'),  blank=True, max_length=200)
    phone1 = PhoneNumberField(blank=True, null=True)
    phone2 = PhoneNumberField(blank=True, null=True)

    def __str__(self):
        return '%s - %s' % (self.name, (self.phone1 or self.phone2))

here i click the + sign to add a new service supplier, this is the model for MaintenanceServiceSupplier

class MaintenanceServiceSupplier(models.Model):
    type = models.ManyToManyField(MaintenanceServiceSupplierType)
    name = MyCITextField(verbose_name=_('Company Name'), unique=True, max_length=200)

    def __str__(self):
        return self.name

    @property
    def support_types(self):
        return '%s' % ', '.join(list(self.type.values_list('name', flat=True)))

    @property
    def contacts(self):
        names = list(self.maintenanceservicesuppliercontact_set.values_list('name'))
        if not names:
            return None
        names_filtered = [list(filter(None, lst)) for lst in names]
        full_list = []
        for i in range(len(names_filtered)):
            full_list.append('[' + ', '.join(names_filtered[i]) + ']')
        return '%s' % ' '.join(full_list)

so after I clicked the + button to add another item on that foreign table and then click save, i get the following javascript error:

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
    at updateRelatedSelectsOptions (RelatedObjectLookups.js:95:35)
    at dismissAddRelatedObjectPopup (RelatedObjectLookups.js:126:17)
    at popup_response.js:40:27
    at popup_response.js:49:3

kfirufk avatar Aug 29 '22 15:08 kfirufk

@kfirufk thank you for reporting this.

  • If you disable the related modal functionality, the problem is solved?
  • Could you paste the whole html of the button that when clicked open the modal window please?

fabiocaccamo avatar Aug 29 '22 17:08 fabiocaccamo

If you disable the related modal functionality, the problem is solved?

i couldn't quite understand the question, you mean not clicking plus inside a table and adding the row? in this scenario the problem not occur.

i was able to reproduce the problem in any foreign key that i have. whenever i don't select something and click + to add a new item and try to save, i get this exact error.

Could you paste the whole html of the button that when clicked open the modal window please?

sure..

<a class="related-widget-wrapper-link add-related" id="add_id_service_supplier" data-popup="yes" href="/en/admin/goods/maintenanceservicesupplier/add/?_to_field=id&amp;_popup=1" title="Add another maintenance service supplier"><img src="/static/admin/img/icon-addlink.svg" alt="Add"></a>

btw i noticed that the save works, the only problem is that it doesn't close the modal dialog window. once i click the save button, i see a loading icon running at the dialog window and i still have close button and the top right corner, if i click it, the modal is closed and the new item i added is selected, so in general the only problem that i'm experiencing is the javascript error and that this modal dialog window is not closed.

i'm also adding my installed apps list in settings.py, just in case, maybe it can help:

INSTALLED_APPS = [
    'debug_toolbar',
    "modeltranslation",
    "admin_interface",
    "colorfield",
    'adminactions',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'smart_selects',
    'places',
    'djmoney',
    'nested_admin',
    'djmoney.contrib.exchange',
    'phonenumber_field',
    ## from here it's my apps
    'generic_utils',
    'users',
    'goods',
    'contacts',
    'prospects'
]

btw updated python in my project to 3.10, results are the same.

kfirufk avatar Aug 29 '22 21:08 kfirufk

Related modal is a setting to use modal (window section shown on top with CSS) when creating / editing a related object in an admin form, instead of a popup (full separate window controlled by the browser or OS, bad user experience):

admin modal

related

merwok avatar Aug 29 '22 22:08 merwok

ah sorry i'm new to django this is my first project, you meant to edit the theme and disable "Related Modal" there did that, it's back to it's old self with a popup window and it works properly.

kfirufk avatar Aug 30 '22 00:08 kfirufk

I created a new project simply for this cause and the problem is reproduced easily, the only extra plugin that is installed it's the django-admin-interface, i created one app, this is the model:

from django.db import models


class TestType(models.Model):
    name = models.CharField(max_length=200, unique=True)


class TestSomething(models.Model):
    blah = models.CharField(max_length=200,blank=True)
    type = models.ForeignKey(TestType, on_delete=models.PROTECT)

this is the admin:

from django.contrib import admin

from .models import TestType, TestSomething


@admin.register(TestType)
class TestSomethingAdmin(admin.ModelAdmin):
    list_display = ('name',)


@admin.register(TestSomething)
class TestSomethingAdmin(admin.ModelAdmin):
    list_display = ('blah', 'type',)

I tried testing it in safari on mac, and chrome on mac and linux, tried running the app on mac and on linux, all provide the same results.

kfirufk avatar Aug 30 '22 06:08 kfirufk

Thank you again, maybe it's a django 4.1 issue, I will test it as soon as I can.

fabiocaccamo avatar Aug 30 '22 09:08 fabiocaccamo

@kfirufk could you try do to the same test with django 3.2 please?

fabiocaccamo avatar Aug 30 '22 12:08 fabiocaccamo

it works with django 3.2

kfirufk avatar Aug 30 '22 15:08 kfirufk

Same issue with Django 4.1
Uncaught TypeError: Cannot read properties of null (reading 'dismissAddRelatedObjectPopup') at popup_response.js:13:16 Pop up is not closing after save

nedinfra avatar Sep 22 '22 12:09 nedinfra

@nedinfra this is a django >= 4.0 issue.

fabiocaccamo avatar Sep 22 '22 12:09 fabiocaccamo

@kfirufk @nedinfra fixed in 0.21.0 version.

fabiocaccamo avatar Oct 06 '22 15:10 fabiocaccamo

Hi @fabiocaccamo ,

Thanks it worked ! Do not forget to collectstatic when updating to 0.21.0 ( popup_response.js need to be update)

nedinfra avatar Oct 07 '22 11:10 nedinfra