在jinja2的页面中使用javascript对页面元素进行删除
以对用户注册信息的审核为例。
后端的代码为:
#encoding=utf-8
class RegisterCheck(system.page):
'''注册信息审核'''
path = "/RegisterCheck"
def GET(self):
web.header('Content-Type', 'text/html; charset=UTF-8')
sql = """ SELECT * FROM user_info WHERE state=0"""
user_info = list(db.query(sql))
return render.getRender().RegisterCheck(
title='注册信息审核',
user_info=user_info,
user_json = json.dumps(user_info)) def POST(self):
opt = web.input().get('opt')
user_id = web.input().get("user_id")
if opt=='':
db.update('user_info', where='user_id=$user_id', vars={'user_id':user_id}, state=1)
elif opt=='':
remark = web.input().get("remark")
db.update('user_info', where='user_id=$user_id', vars={'user_id':user_id}, state=2, remark=remark)
return True
页面代码:
{% set count = 0 %}
{% for user in user_info %}
<div class="row-fluid" id="row-{{user.user_id}}">
<div class="">
<h4><a href="javascript:;">{{user.user_name}}</a></h4>
<small>
<p><i>地址</i> {{user.city}} {{user.area}} {{user.street}}</p>
<p><i>联系方式</i> {{user.phone}} {{user.email}} </p>
</small>
</div>
<div class="">
<button id="accept" onclick="accept({{ user.user_id }})">合格</button>
<button id="reject" onclick="reject({{ user.user_id }})">不合格</button>
<textarea id="reject_remark" ></textarea>
</div>
</div>
{% set count = count + 1 %}
{% endfor %}
<script type="text/javascript">
function accept(user_id)
{
$.post("/account/userRegisterCheck", {opt:1, user_id: user_id}, function(ret) {
$("#row-"+user_id).remove();
alert('注册信息通过审核');
});
}
function reject(user_id)
{
remark = document.getElementById("reject_remark").value;
if( remark.length>5 ){
$.post("/account/userRegisterCheck", {opt:2, user_id: user_id, remark:remark}, function(ret) {
$("#row-"+user_id).remove();
alert('注册信息未通过审核');
});
}
else{
alert("请填写的不合格原因");
}
}
</script>
每个用户信息的显示用一个 div 表示,以 id="row-{{user.user_id}}" 来标示每个div:
<div class="row-fluid" id="row-{{user.user_id}}">
操作后将该div从页面显示中删除:
$("#row-"+user_id).remove();
在jinja2的页面中使用javascript对页面元素进行删除的更多相关文章
- 如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。
如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签. <script> 和 </script> 会告诉 JavaScript 在何处 ...
- 找到你的位置(JS在页面中的位置)最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分
找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...
- 小程序:如何在wxml页面中调用JavaScript函数
早上过来遇到一个这样的bug: 在计算百分比的时候没有保留小数点后2位,从而导致一些无法整除的结果显示太长 一开始,我以为这是一个很普通的bug,既然wxml在页面{{}}内支持简单的运算,我想也应该 ...
- jsp页面中使用javascript获取后台放在request或session中的值
在JSP页面中.常常使用javascript,可是要出javascript获取存储在request,session, application中的值.例如以下是获取request中的值: 如果后台中有: ...
- aspx 页面中 js 引用与页面后台的数据交互 --【 后台调用 js 】
js 中调用后台方法 一.用Response.Write方法 Response.Write("<script type='text/javascript'>alert(&qu ...
- 页面中引入mui 地址选择,点击页面中其他input时页面回到顶部
问题:在页面中引入mui地址选择时,点击页面中的input页面会滚到顶部(谷歌浏览器中出现的bug),在手机上点击input会出现跳动.开始的时候是想修改mui.min.js里的滚动事件,但是后来找到 ...
- 调用iframe中父页面/子页面中的JavaScript方法
今天做公司的内部流程系统,发现一问题.怎么调用iframe外面的方法呢?于是百度了一下,呵呵,把搜索结果摘抄下来. 转自:http://hi.baidu.com/zh_m_zhou/blog/item ...
- SharePoint 自定义的列表页面中添加javascript的一个 For循环语句后,该页面就打不开了。
一个sharepoint 2013的普通的列表的自定义新建页面,我在其中新添加几行javascript代码后页面就打不开了.如图所示: 真是一言不合,友谊的页面说打不开就打不开啊.后来慢慢比对发现是因 ...
- aspx 页面中 js 引用与页面后台的数据交互 --【 js 调后台】
后台调用 js 方法 前台调用后台方法与变量: 后台被调用的方法必须是public 或 protected 后台被调用的方法必须是静态的static 方法一:通过WebService来实现 步骤: ...
随机推荐
- elf 文件
objdump 文件名 readelf 文件名
- VPS环境配置预备篇
VPS买到手了,在配置环境前要做哪些操作呢?老谢说一下自己的习惯,希望对和老谢一样的菜鸟有帮助更新系统内核和rpm包#安装yum-fastestmirror插件yum -y install yum-f ...
- SQL Server2012 T-SQL对分页的增强尝试
简介 SQL Server 2012中在Order By子句之后新增了OFFSET和FETCH子句来限制输出的行数从而达到了分页效果.相比较SQL Server 2005/2008的ROW_Numbe ...
- qt project settings被禁用解决方案
转载请注明出处:http://www.cnblogs.com/dachen408/p/7422707.html qt project settings被禁用点击不了: 解决方案:需要点击该项目(或者项 ...
- php 批量依照ID建立 文件
<?php // 登录验证 include_once('inc/conn.php'); // sql查询 $sql="SELECT * FROM zcgl ";// $res ...
- TCP/IP详解之IP协议
1.IP协议 IP协议是TCP/IP协议的核心,所有的TCP,UDP,IMCP,IGCP的数据都以IP数据格式传输.要注意的是,IP不是可靠的协议,这是说,IP协议没有提供一种数据未传达以后的处理机制 ...
- 云态(YunCloud)的Centos服务器修改dns教程
DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串.通过主机名,最终 ...
- java 面试题整理
java面试题 1.接口和抽象类的区别 抽象类 接口 抽象类中可以有默认方法 在java8之前,不能有默认方法 extends implements 抽象类中可以有构造器 接口中不能有构造器 抽象类中 ...
- libcmt.lb libcmtd.lib与MSVCRTD.lib的冲突解决
system("pause"); 这个函数存在于MSVCRTD.lib库中: 当要使用system("pause")这个函数,且libcmt.lb libcmt ...
- 树状数组 || POJ 3321 Apple Tree
一道dfs序+树状数组的题 因为并没有get到dfs序以及对树状数组也不熟练卡了很久orz dfs序: in和out是时间戳 dfs序可以将树转化成为一个序列,满足区间 -> 子树 然后就可以用 ...