带内嵌JavaScript代码的JS脚本

我有这样的代码：带内嵌JavaScript代码的JS脚本

{% 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 %} 

}

我试图建立附加树结构中的每个元素的形式。

来源

2013-03-14 sharkbait

您只能声明一次变量。此代码导致'var submitForm = ...'和'var newElement = ...'的多个声明。这是不允许的。 – Knelis 2013-03-14 11:13:17

你能写我的功能吗？我是一个JavaScript的新手，我不知道该怎么做......谢谢！ – sharkbait 2013-03-14 11:14:21

这与python有什么关系？不要使用不适用的标签。 – 2013-03-14 11:20:45

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/

我不知道蟒蛇也足以让一个完整的例子，但这些是您可以采取的基本步骤来实现您的目标。

编辑：我会采取刺的一个例子，但准备调试它:) 编辑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蟒蛇文件将有类似下面的代码：

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

有关python和JSON格式的更多信息，请参阅format python output to json。

要使用内嵌蟒蛇做到这一点，请尝试以下操作：

<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-14 11:29:00

谢谢我正在阅读文档 – sharkbait 2013-03-14 11:31:24

jQuery.dForm非常有趣，我必须了解如何以这种方式编写我的表单。 – sharkbait 2013-03-14 11:36:47

@sharkbait我已经添加了一些代码给你看，你将不得不尝试用python json输出，因为我不知道你的用户对象是什么样的，或者真的有关于python的一切。无论如何，一旦python脚本返回有效的JSON，表单就会为你构建。 – 2013-03-14 11:56:21

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

推荐的方式进行数据形式的服务器端传送到客户端Javascript代码

创建JavaScript代码作为一个单独的js文件
嵌入相关数据，以HTML代码在从页面模板生成HTML时使用数据属性作为JSON

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

当页面执行在浏览器中，在客户端DOM ready事件读取该数据，如果你在哪里，你需要执行任务的魔页面上。你可以通过调用jQuery来找出哪些承载数据属性的必要的元素做到这一点$("div.my-marker-css-class").size() > 0

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

阅读使用JSON.parse($("div.my-marker-css-class").data())
的数据属性的有效载荷...并填写-in或使用jQuery或客户端模板生成必要的客户端DOM（HTML）元素

DOM tree based JavaScript template engines

这样

你不需要有生成的JavaScript代码
它更易于维护（你语法高亮.js文件等）。您可以使用Firebug等来调试您的JavaScript代码和错误行号。
它更高速缓存友好和地点有效载荷HTML页面少

这种方法是技术上的优势，一旦掌握，易于维护，减少错误容易发生。但是，这也意味着您必须了解从服务器到您的浏览器的完整软件堆栈，这意味着需要为新手开发人员进行更多的学习。

来源

2013-03-14 11:17:32

我知道！你有理由！但我必须这样做。 :( – sharkbait 2013-03-14 11:20:05

我宁可写一个单独的文件中的js代码，但我不知道如何做与html页面关联.. – sharkbait 2013-03-14 11:21:20

您将包括在每个HTML页面上的代码，并使用jQuery来检测何时执行客户端数据填充路径更新回答 – 2013-03-14 11:26:58

带内嵌JavaScript代码的JS脚本

回答

相关问题