如何在 ajax 加载的表单上激活 django form.media javascript？答案

【问题标题】：How to activate django form.media javascript on an ajax loaded form?如何在 ajax 加载的表单上激活 django form.media javascript？
【发布时间】：2015-03-23 15:40:20
【问题描述】：

这里有个小问题：
由于它的小部件，我有一个包含一些媒体的表单。
当表单是页面的一部分时，一切都按预期工作，但是如果我想使用 ajax 调用加载该表单，例如在模式中，即使包含 js 脚本 strong> 使用表单，它没有运行。另一方面，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>

【问题讨论】：

我认为您可以在 ajax 调用返回完成状态后运行 js。也许发布您的 ajax 代码？

标签： javascript ajax django forms dajaxice

【解决方案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)))

小心！您需要在 settings.py 中添加DAJAXICE_XMLHTTPREQUEST_JS_IMPORT = False，请参阅this subject for details。

【讨论】：