在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来实现 步骤: ...
随机推荐
- phpstorm 格式化代码
MAC 安装phpcs.phpcbf composer global require 'squizlabs/php_codesniffer=*' Changed current directory t ...
- 如何安装Virtual Box的VBox Guest Additions扩展程序
Virtual Box的默认安装是不包含Guest Addition这个扩展的,在实际使用过程中带来种种不便,比如只能通过小窗口访问虚拟机的操作系统,通过默认的右Ctrl切换鼠标,不能和宿主操作系统共 ...
- hdu5792 World is Exploding(多校第五场)树状数组求逆序对 离散化
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=5792 题目描述:给你n个值,每个值用A[i]表示,然后问你能否找到多少组(a,b,c,d)四个编号,四 ...
- VsCode使用之HTML 中 CSS Class 智能提示
HTML 中 CSS Class 智能提示 安装插件:HTML CSS Support 设置中添加以下代码: "editor.parameterHints": true, &quo ...
- easyui实现增删改查
陈旧的开发模式 美工(ui工程师:出一个项目模型) java工程师:将原有的html转成jsp,动态展示数据 缺点: 客户需要调节前端的展示效果 解决:由美工去重新排版,重新选色. 前后端分离: 前端 ...
- 目标检测中bounding box regression
https://zhuanlan.zhihu.com/p/26938549 RCNN实际包含两个子步骤,一是对上一步的输出向量进行分类(需要根据特征训练分类器):二是通过边界回归(bounding-b ...
- python之str (字符型)
用途: 存储少量的数据,+ *int 切片, 其他操作方法 切片还是对其进行任何操作,获取的内容全部是strl类型 存储数据单一 格式: 在python中用引号引起来的就是字符串 '今天吃了没?' 1 ...
- 失误1: 把i放到循环体内部,i++失效
54 while($lines_num_of_whole_table>=1){ 55 my $i = 1; ...
- 让自己习惯C++
条款1.C++是一个语言联邦 过程形式(procedural) 面向对象形式(object-oriented) 函数形式(function) 泛型形式(generic) 元编程形式(metaprogr ...
- my97datepicker插件日期值改变事件 等同于input的onchang()时间
官网Demo地址http://www.my97.net/demo/index.htm <input type="text" class="Wdate" v ...