1

我有这个代码：

{% for user in users %}

        <form name="form_user_{{ user.id }}" method="post" action="/networks/{{ net.id }}/sensors/{{ sens.id }}/rights">
          <tr>
            <td>
              <div>
                {{ escape(user.name) }}
                <input type='hidden' name="id" value='{{ user.id }}'>
              </div>
            </td>
            <td>

              <label class="radio inline" onclick="document.forms['form_user_{{ user.id }}'].submit();">
                <input type="radio" name="perms" id="perms_{{user.id}}_0" value="0">
                None
              </label>
              <label class="radio inline" onclick="document.forms['form_user_{{ user.id }}'].submit();">
                <input type="radio" name="perms" id="perms_{{user.id}}_1" value="1">
                Read
              </label>
              <label class="radio inline" onclick="document.forms['form_user_{{ user.id }}'].submit();">
                <input type="radio" name="perms" id="perms_{{user.id}}_4" value="4">
                Read + Commands
              </label>

              {{ xsrf_form_html() }}
            </td>

          </tr>
        </form>

我会将这段代码放在 html 页面底部的函数脚本中，并将该函数与 onClick 事件相关联。

我正在尝试编写该函数，但它不起作用。

这个函数的错误在哪里？

function createFormAndSubmit(){

{% for user in users %}

 var submitForm = document.createElement("form_user_{{ user.id }}");
 document.body.appendChild(submitForm);
 submitForm.method = "POST";

 var newElement = document.createElement("<input type='hidden' name='id' value='{{ user.id }}'>");
 inputForm.appendChild(newElement);

 var newElement = document.createElement("<input type='radio' name='perms' id='perms_{{user.id}}_0' value='0'>");
 inputForm.appendChild(newElement);

 submitForm.action= "/networks/{{ net.id }}/sensors/{{ sens.id }}/rights";
 document.forms['form_user_{{ user.id }}'].submit();
 submitForm.submit();

{% end %}

}

我正在尝试构建附加树结构中每个元素的表单。

4

2 回答 2

2

你做错了：不要尝试用任何模板语言生成 Javascript 代码。

将数据从服务器端传递到客户端 Javascript 代码的推荐方法

  • 将您的 JavaScript 代码创建为单独的 .js 文件

  • 当您从页面模板生成 HTML 时，使用数据属性作为 JSON 将相关数据嵌入到 HTML 代码中

http://html5doctor.com/html5-custom-data-attributes/

  • 当页面在浏览器中执行时，如果您在需要执行魔术任务的页面上，则在客户端 DOM 就绪事件上读取此数据。您可以通过调用 jQuery 来找出带有 data 属性的必要元素$("div.my-marker-css-class").size() > 0

http://api.jquery.com/ready/

  • 使用读取数据属性有效负载JSON.parse($("div.my-marker-css-class").data())

  • ...并使用 jQuery 或客户端模板填充或生成必要的客户端 DOM (HTML) 元素

基于 DOM 树的 JavaScript 模板引擎

这边走

  • 您不需要生成 JavaScript 代码

  • 它更易于维护（您可以获得 .js 文件的语法高亮显示等）。您可以使用 Firebug 等来调试您的 JavaScript 代码和错误行号。

  • 它对缓存更友好，对 HTML 页面的负载更少

这种方法在技术上更优越，一旦掌握，更容易维护并且不易出错。但是，这也意味着您必须了解从服务器到浏览器的完整软件堆栈，这意味着新手开发人员需要学习更多。

于 2013-03-14T11:17:32.410 回答
2

Mikko 是 100% 正确的。您将需要从服务器传递原始数据并使用 javascript 对其进行解析。

值得庆幸的是，有一些插件可以让这更容易。http://daffl.github.com/2011/01/06/jquery-dform.html就是其中之一。

这是一个 python 编码器/解码器： http: //docs.python.org/2/library/json.html

要从服务器获取 JSON，您将使用：http ://api.jquery.com/jQuery.getJSON/

我不太了解python，无法给出一个完整的例子，但这些是您实现目标可以采取的基本步骤。

编辑：我将举一个例子，但准备调试它:) 编辑 2：更改以根据 OP 的要求在自己的文件中制作 javascript。

您的 HTML 将如下所示：

<html>
<head>
<script src='path to jquery'></script>
<script src='path to dForm plugin'></script>
<script src='myjs.js'></script> <!-- use relative path -->
</head>
<body>
<form id="myform"></form>

</body>
</html>

您的 myjs.js 文件将如下所示：

    $(function(){
        if($("#myform).length > 0) // only run if #myform exists
        $("#myform").buildForm("http://example.com/myform.json");
    });

myform.json python 文件将包含以下代码：

import json
json.dumps({'success': True, 'data': users.values()})

有关 python 和 JSON 格式的更多信息，请参阅将 python 输出格式化为 json。

要使用内联 python 执行此操作，请尝试以下操作：

<html>
<head>
<script src='path to jquery'></script>
<script src='path to dForm plugin'></script>
</head>
<body>
<script>
var dataArray = [
{% for user in users %}
   {
    "action" : "/networks/{{ net.id }}/sensors/{{ sens.id }}/rights",
    "method" : "post", // or get
    "elements" :
    [
        { "type" : "hidden",
          "name" : "id",
          "value" : "{{ user.id }}"
        },
        {
            "name" : "perms",
            "id"   : "perms_{{user.id}}_0",
            "type" : "radio",
            "value": "0"
        },
        {
            "name" : "perms",
            "id"   : "perms_{{user.id}}_0",
            "type" : "radio",
            "value": "0"
        },
        {
            "type" : "submit",
            "value" : "Submit"
        }
        ]
   },
{% end %}
];

for(var i =0; i<dataArray.length; i++){
   $("body").append("<form id='form"+ i +"'></form>");
   $("#form" + 1).dForm(dataArray[i]);
}
</script>
</body>
</html>

我个人不会推荐内联方法，但是，它是一种选择。由于循环，您还需要考虑额外的逗号。根据浏览器，它可能会添加一个空数组项。IE 可能会完全窒息。

于 2013-03-14T11:29:00.920 回答