Довести встроенный яваскрипта код в JS скрипт

У меня есть этот код:Довести встроенный яваскрипта код в 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

Можете ли вы написать мне функцию? Я новичок с javascript, и я не знаю, как это сделать ... спасибо! – sharkbait

Что это значит с python? Не используйте теги, которые не применяются. –

Mikko на 100% правильный. Вам нужно будет передать необработанные данные с сервера и проанализировать его с помощью javascript.

К счастью, есть плагины, которые могут сделать это проще. http://daffl.github.com/2011/01/06/jquery-dform.html - один.

Вот питон кодер/декодер: http://docs.python.org/2/library/json.html

И получить JSON от сервера вы будете использовать: http://api.jquery.com/jQuery.getJSON/

Я не знаю питона достаточно хорошо, чтобы дать полный пример, но они являются основными шагами, которые вы можете предпринять для достижения своей цели.

РЕДАКТИРОВАТЬ: Я возьму удар на примере, но будьте готовы его отладить :) РЕДАКТИРОВАТЬ 2: изменить, чтобы сделать javascript в собственном файле в соответствии с запросом OP.

Ваш 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()})

См. format python output to json для получения дополнительной информации о форматировании python и 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

jQuery.dForm очень интересно. Я должен понять, как я могу написать свою форму таким образом. Любая помощь? :) – sharkbait

@sharkbait Я добавил код для просмотра, вам придется поэкспериментировать с выходом python json, поскольку я не знаю, как выглядит ваш пользовательский объект или что-то вообще о питоне вообще. Независимо от того, как только скрипт python вернет действительный JSON, форма должна построить для вас. –

Вы делаете это неправильно: не пытайтесь сгенерировать код Javascript на любом языке шаблона.

Рекомендуемый подход к перевалу формы данных на стороне сервера клиентского кода Javascript

Создайте свой код JavaScript в отдельный файл .js
связанные Вставить данные в HTML-коде используя атрибуты данных в качестве JSON при генерации HTML из шаблона страницы

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

Когда страница выполняется в браузере, в случае готовности к DOM на клиентской стороне данные читаются, если вы находитесь на странице, где вам нужно выполнить магическую задачу. Вы можете сделать это с помощью вызова JQuery, чтобы выяснить необходимые элементы, которые несут в себе атрибут данных $("div.my-marker-css-class").size() > 0

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

Прочитайте полезную нагрузку данных атрибутов с использованием JSON.parse($("div.my-marker-css-class").data())
... и заполнить -in или создавать необходимые элементы DOM (HTML) на стороне клиента с использованием шаблонов jQuery или клиентов на стороне

DOM tree based JavaScript template engines

Таким образом

Вам не нужно иметь генерировать JavaScript код
Это более ремонтопригодны (вы получите подсветку синтаксиса для .js файлы и так далее). Вы можете использовать Firebug и т. Д., Чтобы отлаживать код JavaScript и номера строк ошибок.
Это больше кэш дружественных и места меньше полезной нагрузки HTML страницы

Такой подход технически превосходит и овладев, проще в обслуживании и менее подвержены ошибке.Тем не менее, это также означает, что вы должны понимать полный стек программного обеспечения, который идет от сервера, в ваш браузер, и это означает, что вам нужно больше учиться для разработчиков-новичков.

источник

2013-03-14 11:17:32

Я знаю! И у вас есть причина! но я должен сделать так. :( – sharkbait

Я могу скорее написать код js в отдельном файле, но я не знаю, как это сделать, чтобы связать с ним страницу html. – sharkbait

Вы будете включать код на каждую HTML-страницу и использовать jQuery для обнаружения, когда для выполнения пути заполнения данных на стороне клиента. Обновлен ответ –

Довести встроенный яваскрипта код в JS скрипт

ответ

Смежные вопросы