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 error in Admin site, mapboxgl not loaded when using admin.StackedInline or admin.TabularInline #31

Open
h3x4git opened this issue Nov 16, 2021 · 2 comments

Comments

@h3x4git
Copy link
Contributor

h3x4git commented Nov 16, 2021

I'm using django-mapbox-location-field 1.7.3 on Django 3.2.8, I enabled the app by adding it to the INSTALLED_APPS list of settings.py, I added a location field to a model and ran python manage.py collectstatic.

Here's my model definition:
class SedeStudio(models.Model): annuncio = models.ForeignKey(Annuncio, on_delete=models.CASCADE, related_name="sede_studio") pos_marker = LocationField(map_attrs={"center": [51.21992, 10.58072], "marker_color": "blue"}) address = AddressAutoHiddenField()
Here's my admin.py:

from django.contrib import admin
from .models import Annuncio, ImmaginiStudio, SedeStudio
from mapbox_location_field.admin import MapAdmin


class ImmaginiStudioAdmin(admin.TabularInline):
    model = ImmaginiStudio
    extra = 3

class SedeStudioAdmin(admin.StackedInline):
    model = SedeStudio
    extra = 3

class AnnuncioAdmin(admin.ModelAdmin):
    inlines = [
        ImmaginiStudioAdmin, SedeStudioAdmin
    ]

admin.site.register(Annuncio, AnnuncioAdmin)

EDIT: I also used the MapAdmin as a mixin but Django would throw an error and if used in admin.site.register(Annuncio, MapAdmin) it would work but just ignore the StackedInline model that uses the Mapbox field
The resulting admin site pages output throw this error in the javascript console:

Uncaught ReferenceError: mapboxgl is not defined <anonymous> https://www.mydomain.com/static/mapbox_location_field/js/map_input.js:1
Uncaught ReferenceError: mapboxgl is not defined <anonymous> https://www.mydomain.com/admin/myapp/mymodel/1/change/:781
Uncaught ReferenceError: mapboxgl is not defined <anonymous> https://www.mydomain.com/admin/myapp/mymodel/1/change/:865
Uncaught ReferenceError: mapboxgl is not defined <anonymous> https://www.mydomain.com/admin/myapp/mymodel/1/change/:949
Uncaught ReferenceError: mapboxgl is not defined <anonymous> https://www.mydomain.com/admin/myapp/mymodel/1/change/:1033

however, I do not get any 404 error other than the favicon.ico that is missing, all the files that that the page is requesting from the web server are actually downloaded without a problem.

I get the map and address fields appearing, and according to the DOM inspector the <div id="map-map-mapbox-location-field" class="location-field-map"></div> is regularly created, I understand that's where the map is supposed to be rendered.

I also tried to limit the number of instances on the same field to 1, in case the map <div> could not be duplicated for javascript addressing, but it seems to not really affect the situation.

I then tried to not associate the model to the admin page of another model in a StackedInline format and that's when this error disappears. In my case I need to associate more than one location to a single object, so this is not the ideal solution. I would like to inform of this issue

@h3x4git
Copy link
Contributor Author

h3x4git commented Nov 17, 2021

class AnnuncioAdmin(MapAdmin, admin.ModelAdmin):
    inlines = [
        ImmaginiStudioAdmin, SedeStudioAdmin
    ]

admin.site.register(Annuncio, AnnuncioAdmin)

worked, but only for one of the extra instances, the two others have an empty map (so I can't save not even the first one because it throws an error on the extra instances)

@h3x4git
Copy link
Contributor Author

h3x4git commented Nov 27, 2021

I kindly ask to add support for TabularInline and StackedInline

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