Я добавил действие для администратора 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
});
});
});
});
Я ожидаю, что браузер сможет найти изображение.