passing python data to javascript in web2py -

here problem. have following function

def index():     rows=db(db.mylist).select()     return dict(rows=rows) 

so whenever reload the front view index want retrieve rows database , display data user in list

{{for(r in rows)}}     li.innerhtml={{=rows.task}} {{pass}} 

obviously, not right way it. think have use json , xml.

this table using

db.define_table(    'mylist',    field('task', 'string') )  <div class="col-sm-6">          <div class="panel panel-default">              <div class="panel-heading center " style="color: black; font-style: inherit">                  <form>                  task:                 <input name="name" id="task"  />                      <button type="button" class="btn btn-success btn-sm" onclick=add(),ajax('{{=url('default','insert_task')}}',['name'])  >add</button>                      </form>               </div>                <div class="panel-body center">                   <ul id="list" class="list-group">  </ul>               </div>           </div>       </div>  </div>   var ul = document.getelementbyid("list"); var lastid=0; function add()     {         if(!isblank(document.getelementbyid("task").value)) {               var icon = document.createelement('div'); //create div container             var dbtmenu=document.createelement('div');             var li = document.createelement("il");  //create list-element             var closespan = document.createelement("span"); //create span badge attribute             var clickliststate=0;              dbtmenu.setattribute("class","container");             //dbtmenu.appendchild(dropdownlist);             li.setattribute('id',lastid); // set attribute id             icon.classname = "glyphicon glyphicon-remove"; // image remove button             closespan.setattribute("class", "badge"); //create new attribute span             closespan.appendchild(icon); // put in span set             icon.addeventlistener("click",function(){var element=document.getelementbyid(li.getattribute('id'));                                                     element.parentnode.removechild(element);}); //functionlity             li.innerhtml = document.getelementbyid('task').value;             var value=document.getelementbyid('task').value;             var pass= document.getelementbyid('task').value;             li.setattribute("class", "list-group-item hover-yellow");             li.addeventlistener('click',function() {if(clickliststate==0){li.style.backgroundcolor="red"; clickliststate++;}                                                     else {li.style.backgroundcolor="white"; clickliststate--; }});             li.appendchild(closespan);             lastid++;             ul.appendchild(li);          }     }  function update()     {             {{for r in rows:}}             var icon = document.createelement('div'); //create div container             var dbtmenu = document.createelement('div');             var li = document.createelement("il");  //create list-element             var closespan = document.createelement("span"); //create span badge attribute             var clickliststate = 0;              dbtmenu.setattribute("class", "container");             //dbtmenu.appendchild(dropdownlist);             li.setattribute('id', lastid); // set attribute id             icon.classname = "glyphicon glyphicon-remove"; // image remove button             closespan.setattribute("class", "badge"); //create new attribute span             closespan.appendchild(icon); // put in span set             icon.addeventlistener("click", function () {                 var element = document.getelementbyid(li.getattribute('id'));                 element.parentnode.removechild(element);             });            // var t ={#{=xml(response.json(r.task))}}                     li.innerhtml = "t";             var value = document.getelementbyid('task').value;             var pass = document.getelementbyid('task').value;             li.setattribute("class", "list-group-item hover-yellow");             li.addeventlistener('click', function () {                 if (clickliststate == 0) {                     li.style.backgroundcolor = "red";                     clickliststate++;                 }                 else {                     li.style.backgroundcolor = "white";                     clickliststate--;                 }             });             li.appendchild(closespan);             lastid++;             ul.appendchild(li);              {{pass}}      }     update(); 

read basic syntax template language in web2py here

you want this:

<ul>     {{for row in rows:}}         <li>{{=row}}</li>     {{pass}} </ul> 

other solution can be, build complete list in controller function using html helpers , pass view

def index():     rows = db(db.mylist).select()     my_list = [row.task row in rows]     task_list = ul(*my_list)     return dict(task_list=task_list) 

and in view do:

{{=xml(task_list)}} 

xml object used encapsulate text should not escaped.

i suggest go through these 2 examples: image blog , simple wiki

edit:

from edit, think want add new task using form , wanted add list without refreshing page.

read ajax form submission, related ajax example given in simple wiki app

<!-- views/index.html--> {{extend 'layout.html'}}  <form id="task_form">      task:     <input name="name" id="task"  />     <input type="submit" class="btn btn-success btn-sm" value="add" /> </form>  <div id="target"> {{=xml(task_list)}}</div>   <script> jquery('#task_form').submit(function() {   ajax('{{=url("default", "insert_task")}}',        ['name'], 'target');   return false; }); </script> 

--

# controller  def index():     rows = db(db.mylist).select()     my_list = [row.task row in rows]     task_list = ul(*my_list)     return dict(task_list=task_list)  def insert_task():     """an ajax callback returns <ul>"""     task_name = request.vars.name     db.mylist.insert(task=task_name)     rows = db(db.mylist).select()     my_list = [row.task row in rows]     task_list = ul(*my_list)     return task_list