Question

我正在使用JQuery UI对话框（在模式模式下）的网页上显示使用Django动态生成的表单。基本流程是：

用户点击按钮
jquery（使用AJAX）发出一个get请求，返回表单的html，然后用于填充对话框
- html包含一个脚本标记，用于处理表单上的某些UI，该标记可以正常加载并按预期工作
用户填写表单并点击“完成”并提交表单。

当用户在表单上出错时，会出现此问题。服务器响应post请求（提交表单），并修改原始表单（包括脚本）以显示错误。第二次加载脚本时，它会得到一个“未捕获的ReferenceError：$未定义（匿名函数）”脚本与之前的工作正常完全相同。为了清楚整个过程，页面永远不会刷新。

以下是处理模态的javascript的要点：

var add_container = $("#add_container");

add_container.dialog({...})

function show_form(form,response_func) {
    add_container.html(form);
    add_container.dialog("open");
    $("#add_form").submit(function (event) {
        return submit_form($(this),response_func);
    });
}

function submit_form(form,response_func) {
    add_container.append('<p>Adding...</p>');
    //this is a trick to upload a file without reloading the page
    form.attr('target','upload_target');
    $('#upload_target').load(function() {
        var response = $('#upload_target').contents().find('body').html();
        add_container.dialog("close");

        resp_obj = $(response)
        if (resp_obj.is('form')) {
            //***this is what reloads the form when there is an error
            show_form(response,response_func);
        } else {
            response_func(resp_obj);
        }

    });
}

$('#add_link').click(add_link);
function add_link() {
    $.get('/add_link', function(data) {
        function add_response(response) {
            //handle successful submission
        }
        show_form(data,add_response);
    });
}

//...more stuff that is not important

这是从/ add_link

返回的html的要点

<script type="text/javascript" src="/scripts/add_form.js" ></script>
<form id="add_form" enctype="multipart/form-data" action="/add_link/" method="post">
<!-- Dynamically generated form here !-->
</form>

add_form.js是一个使用jQuery的非常标准的javascript文件。它以$（document）.ready（function（）{...}）开头，第一个$是ReferenceError出现的地方

表单需要根据点击的内容动态生成，因此我不能将所有内容静态地放在页面上。该脚本不是动态生成的，因此不一定需要动态加载，但我不确定如何将其保存在自己的文件中，并且只在表单加载时才运行。我愿意接受有关实现同样效果的替代方法的建议。

Answer 1

您的表单操作指向与包含jQuery框架脚本等的路径不同的相对路径。

<script type="text/javascript" src="/scripts/add_form.js" ></script>
<!-- src="/scripts" -->

<form id="add_form" enctype="multipart/form-data" action="/add_link/" method="post">
<!-- action="/add_link" -->

要确保在表单提交后加载框架，只需在浏览器上使用类似开发人员工具的内容，并检查jQuery脚本src的head标记。它还在吗？

Answer 2

感谢MelanciaUK我意识到当我将表单提交到iFrame时，响应首先被发送到脚本运行的地方并且出错，因为iFrame被视为自己的页面并且无法访问jQuery加载在主页上。

我决定通过消除add_form脚本的动态加载来解决问题，只需在页面加载时加载它就像我的所有其他脚本一样。我创建了一个自定义jQuery事件（使用.trigger），以便只在打开添加表单时运行脚本。这完全按我想要的方式工作。

希望这可以帮助任何有类似问题的人。如果您有任何问题，请随时提出！

动态加载的javascript在第二次加载时不起作用

2 个答案: