在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来实现 步骤: ...
随机推荐
- 修改JRE system library
MyEclipse 默认的情况下JRE system library 是:MyEclipse 的,如何修改工程中的JRE system library呢?步骤如下: 1.选择工程->Proper ...
- vue路由导航守卫及前置后置钩子函数参数详解
首先构建一个测试demo如下图: 接着来探讨路由配置界面 import Vue from 'vue' import Router from 'vue-router' // import HelloWo ...
- MVVM没你想象的那么的好
我写过很多有关于让View Controller 更易于理解的文章,其中一种比较常见的模式就是Model-View-ViewModel(MVVM). 我认为MVVM 是一种非常容易让人混淆的 anti ...
- Unity c# 状态机的简单入门
状态机模式在unity中作用是非常大的,可以实现角色的移动和场景的跳转,包括一些动画的播放,在很多unity框架中也是很常见的,发散思维广阔,下面是简单的状态机的实现,有注释 using System ...
- execl, execlp, execle, execv, execvp - 执行某个文件
总览 (SYNOPSIS) #include <unistd.h> extern char **environ; int execl( const char *path, const ch ...
- uva1153 Keep the Customer Satisfied
贪心加优先队列 (默认是小的在前,正好) //这里又很套路,设队列里的都是符合条件的考虑新加入的即可.再处理一下空队列的情况.很完美// 截止时间短的在前面,干的就多先根据截止日期排序优先队列根据完成 ...
- Kubernetes 架构(上)【转】
Kubernetes Cluster 由 Master 和 Node 组成,节点上运行着若干 Kubernetes 服务. Master 节点 Master 是 Kubernetes Cluster ...
- 微信小程序工具真机调试提示page "xxx/xxx/xxx" is not found
解决方法: pages对象添加该页面
- node如何导出数据成为excel格式
node的应用方式,导出数据 首先,你要把数据库连接上,把你要导的数据表写出来 安装模块 $ npm install sequelize $ npm install mysql $ npm insta ...
- 洛谷 P1518 两只塔姆沃斯牛
P1518 两只塔姆沃斯牛 The Tamworth Two 简单的模拟题,代码量不大. 他们走的路线取决于障碍物,可以把边界也看成障碍物,遇到就转,枚举次,因为100 * 100 * 4,只有4个可 ...