如何在 ajax 加载的表单上激活 django form.media javascript?
How to activate django form.media javascript on an ajax loaded form?
我这里有个小问题:
由于它的小部件,我有一个包含一些媒体的表单。
当表单是页面的一部分时,一切都按预期工作,但是如果我想 使用 ajax 调用 加载该表单,例如在模态中,即使 js 脚本包含在 表单中,它不是 运行ning。另一方面,css 工作得很好。
我想这与 javascript 无法检测到新的脚本标签有关 已包含在内。
我需要运行这个js做什么?
代码示例:
模态表单模板:
{{form.media}}
{% crispy form %}
<a class="close-reveal-modal">×</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>
经过一番研究,我终于找到了启用已加载 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
,请参阅 。
我这里有个小问题:
由于它的小部件,我有一个包含一些媒体的表单。
当表单是页面的一部分时,一切都按预期工作,但是如果我想 使用 ajax 调用 加载该表单,例如在模态中,即使 js 脚本包含在 表单中,它不是 运行ning。另一方面,css 工作得很好。
我想这与 javascript 无法检测到新的脚本标签有关 已包含在内。
我需要运行这个js做什么?
代码示例:
模态表单模板:
{{form.media}}
{% crispy form %}
<a class="close-reveal-modal">×</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>
经过一番研究,我终于找到了启用已加载 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
,请参阅