Как изображения, используемые в jquery-ui, должны загружаться в админке django? - PullRequest
1 голос
/ 30 октября 2019

Я добавил действие для администратора django, которое требует модального и некоторого взаимодействия с javascript. Я использовал jquery-ui для модала и смог загрузить его, следуя этой инструкции: django admin jQueryUI диалоговое окно

Однако, модал имеет разорванное изображение (кнопка закрытия). Вопрос в том, как я могу сослаться на это изображение, чтобы jquery-ui мог его найти.

Я помещаю изображения из библиотеки jquery-ui в ту же папку, куда я помещаю файлы .js и .css, которые я используюдля действия.

Близкое изображение модала повреждено, пытаясь найти его на http://localhost:8000/static/admin/js/jquery-ui-1.12.1.custom/images/ui-icons_777777_256x240.png

Путь проекта: static/admin/js/jquery-ui-1.12.1.custom/images/ui-icons_777777_256x240.png

update Я переместил изображение на static/admin/images/ui-icons_777777_256x240.png, остановил сервер и запустил python3 manage.py collectstatic, но все еще не работает.

Текущий код для ссылки на ресурсы:

admin.py

   class ReservationBaseAdmin:
    list_display = (..., 'action')
    # some more code (...)


    # Here I reference the jquery-ui library and the js code I wrote for the action
    class Media:
        css = {
            "all": ("admin/css/tables.css", 'admin/js/jquery-ui-1.12.1.custom/jquery-ui.min.css', 'static/admin/js/jquery-ui-1.12.1.custom/jquery-ui.structure.min.css')
        }
        js = (
'admin/js/jquery-ui-1.12.1.custom/jquery-ui.min.js',
'admin/js/jquery-ui-1.12.1.custom/jquery-ui.structure.min.css', 'admin/js/front_iframe.js", "admin/js/force_sync.js'
)

    # some more code (...)

    def action(self, obj):
        front = env('FRONT_URL')
        url = reverse('admin:traveller_traveller_change', args=[obj.traveller.pk])
        edit_button = format_html('<a class="button front_link" data-front="{}" target="_blank" href="{}">Ver Perfil</a>', front, url)
        refresh_button = format_html('<a class="button force_sync" data-confirmation-number="{}" >Forzar sincronización</a>', obj.reservation.confirmation_number)
        return edit_button +  refresh_button
    action.short_description = "Acciones"

static / admin / js / force_sync.js

$(function() {
    const syncService = (confirmationNumber) => {

      //... some code
    };

    const makeDialogs = () => {
      const ok = document.createElement('div');
      const err = document.createElement('div');
      //... some code
      document.body.appendChild(ok);
      document.body.appendChild(err);
      $("#okDialog").dialog({
          autoOpen: false,  
      });
      $("#errorDialog").dialog({
        autoOpen: false,  
    });
    }

    $(document).ready(
      /** Gatilla la syncronización automática para una reserva
       */

      function forceSync () {
        makeDialogs();
        $('.force_sync').click(function () {
          //... some code
          syncService(confirmationNumber)
            .then((res) => {
              $( "#okDialog" ).dialog('open'); //--> Here modal dialog shows and works fine except for the broken image for closing the dialog.
            },      //... some code
            });
         });
    });
});

Я ожидаю, что браузер сможет найти изображение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...