0

我正在开发一个网页，该网页使用 JQuery UI 对话框（模式模式）来显示使用 Django 动态生成的表单。基本流程是：

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

当用户在表单上出错时，问题就出现了。服务器响应 post 请求（提交表单），修改了原始表单（包括脚本）以显示错误。第二次加载脚本时，它得到一个“ Uncaught ReferenceError: $ is not defined (anonymous function) ” 脚本在正常工作时与以前完全相同。在整个过程中要清楚，页面永远不会刷新。

以下是处理模态的 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 的地方

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

4

2 回答 2

0

您的表单操作指向与包含 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 标签。它还在吗？

于 2013-03-21T16:56:47.853 回答
0

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

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

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

于 2013-03-24T05:03:44.720 回答