在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来实现 步骤: ...
随机推荐
- JAVA设计模式--Strategy
策略模式就是说当我进行比较大小的时候定义一个策略的比较器Comparator,然后由具体的比较策略来决定用什么量来比较大小.
- Java Web开发之Spring | SpringMvc | Mybatis | Hibernate整合、配置、使用
1.Spring与Mybatis整合 web.xml: <?xml version="1.0" encoding="UTF-8"?> <web ...
- rabbitmq的知识点
rabbitmq,分为集群和主从2种. 主从式与集群式的速度差10倍. 每个rabittmq组需要3台机器. 集群式,稳定性高,主从式,速度快. 可以做任务分配,单点锁(二进制树实现). 只有当消息和 ...
- webpack3整理(第三节/满三节)------(base.config文件解释)
'use strict' const path = require('path') const utils = require('./utils') const config = require('. ...
- 一条HTTP的生命之旅(高频面试问题)
当你在浏览器地址栏输入一个URL后回车,将会发生的事情? 原文:http://igoro.com/archive/what-really-happens-when-you-navigate-to-a- ...
- java用XSSFWorkbook实现读写Excel
/** * 读取Excel文件的内容 * @param inputStream excel文件,以InputStream的形式传入 * @param sheetName sheet名字 * @retu ...
- 6. 将单独表空间(File-Per-Table Tablespaces)复制到另一个实例
6. 将单独表空间复制到另一个实例 本节介绍如何将单独表空间从一个MySQL实例复制 到另一个MySQL实例,也称为可传输表空间功能. 将InnoDB单独表空间复制到其他实例的原因有很多: - 在不对 ...
- redis搭建配置
1 .去官方下载 2.解压tar 3.进入解压目录 编译 4.将编译好的目录移动到制定位置.做软连接 .配置环境便利 5.创建数据保存目录.创建配置文件 [root@radis ~]# vim /da ...
- 第一讲:vcs simulation basic
要求: 1.complie a verilog/systemverilog design using vcs 2.simulate a verilog/systemverilog design vcs ...
- maven添加本地jar包到本地仓库
1 进入jar包所在文件夹,进入cmd命令 2 执行命令 mvn install:install-file -Dfile=ojdbc6.jar -DgroupId=com.oracle -Dartif ...