Как активировать django form.media javascript в загруженной форме ajax?

У меня есть небольшая проблема здесь:
У меня есть форма, содержащая некоторые медиа из-за его виджетов.
Все работает, как и ожидалось, когда форма является частью страницы, но если я хочу загрузить эту форму с помощью вызова ajax, например, в модальном режиме, даже если сценарий js включен в форму, он не работает. CSS работает отлично с другой стороны.

Я думаю, это как-то связано с тем, что JavaScript не может обнаружить новый тег скрипта.

Что мне нужно сделать, чтобы запустить этот JS?

Пример кода:

шаблон модальной формы:

{{form.media}}
{% crispy form %}
<a class="close-reveal-modal">&#215;</a>

шаблон отображается внутри модального:

<div id="level-modal" class="reveal-modal" data-reveal="">
  <link href="/static/ajax_upload/css/ajax-upload-widget.css" type="text/css" media="all" rel="stylesheet">
  <script type="text/javascript" src="/static/ajax_upload/js/jquery.iframe-transport.js"></script>
  <script type="text/javascript" src="/static/ajax_upload/js/ajax-upload-widget.js"></script>
  <form id="level-form" class="foundation-form" method="post" enctype="multipart/form-data"></form>
  <a class="close-reveal-modal">×</a>
</div>

1 ответ

Решение

После некоторых исследований я наконец нашел правильный способ включить загруженные файлы JavaScript.
Обратите внимание, что JQuery требуется.
Это просто $.ajax({{dataType: "script", cache: true, url: "url/file.js"}})

Как я говорил о form.media, вы можете извлечь все скрипты, необходимые для формы, выполнив это:

files_url = []
for js in form.media._js: # for all the scripts used by the form
    files_url.append(form.media.absolute_path(js)) # we retrieve their url

Поскольку я использую dajax для включения сценариев, я могу сделать простой вызов dajax.script чтобы включить скрипты:

loaders = []
for js in level_form.media._js:
    loaders.append('$.ajax({{dataType: "script", cache: true, url: "{0}"}})'.format(level_form.media.absolute_path(js)))

dajax.script("""
    $.when(
        {0}
    ).done(function() {{
        console.log("scripts are loaded !");
        // do something here when files are loaded
    }}).fail(function () {{ 
        alert("An error occured, try reloading the page.");
        // do something here if loading failed
    }});""".format(",\n".join(loaders)))

Осторожно! Вам нужно будет добавить DAJAXICE_XMLHTTPREQUEST_JS_IMPORT = False в вашем settings.py, смотрите эту тему для деталей.

Другие вопросы по тегам