首页 > 其他分享 >前段页面删除弹窗实现

前段页面删除弹窗实现

时间:2023-05-26 22:34:41浏览次数:30  
标签:function 删除 tpl 前段 页面 DELETE ID 弹窗 delete

1、定义删除按钮及删除函数

<a class="btn btn-danger btn-xs" onclick="showDelete({{ obj.id }});">删除</a>

2,编写弹窗内容

选择bootstrap→js插件→模态框的动态实例:launch demo modal

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

3、该弹出框适合添加修改内容,可把红色代码部分替换成警告框实例

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

 

<div class="alert alert-danger alert-dismissible fade in" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
      <h4>Oh snap! You got an error!</h4>
      <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
      <p>
        <button type="button" class="btn btn-danger">Take this action</button>
        <button type="button" class="btn btn-default">Or do this</button>
      </p>
    </div>

4、整体就变成如下内容

 

    <!-- Modal -->
    <div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4>Oh snap! You got an error!</h4>
                <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
                    eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
                <p style="margin-top: 10px">
                    <button type="button" class="btn btn-danger" onclick="confirmDelete()">确定删除</button>
                    <button type="button" class="btn btn-default" onclick="hideDelete()">取消</button>
                </p>
            </div>
        </div>
    </div>

 

5、js中编写1中定义的函数

    <script>
        var DELETE_ID

        function showDelete(id) {
            DELETE_ID = id
            $('#myDeleteModal').modal()
        }
        function hideDelete(){
            $('#myDeleteModal').modal('hide')
        }
        function confirmDelete(){

        }
    </script>

 

6、js中可以利用全局变量使函数间调用参数

7、可以利用jquery中封装的ajax向后端视图函数发送请求

方法一:相当于向后台发送:/tpl/delete/?pk=123

  

$.ajax({
url:"/tpl/delete/",
type:"GET",
data:{pk:123}
})

方法二:

$.ajax({
url:"/tpl/“+DELETE_ID+”/delete/",

type:"GET",
dataType:"JSON",
success:function(res){   //回调函数,发送成功后会返回一个值。
console.log(res);
}
})

7.2例如:

function confirmDelete() {
            // 1.获取要删除的ID
            console.log("要删除的ID->", DELETE_ID);

            // 需要将请求发送到后端,获取要删除ID,根据ID删除; -> ajax
            $.ajax({
                url: "/tpl/" + DELETE_ID + "/delete/",   //
                type: "GET",
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        // 删除成功
                        $('#myDeleteModal').modal('hide');
                        location.href = location.href;
                        //location.reload();

                    } else {
                        // 删除失败
                        alert("删除失败");
                    }
                }
            })

8、后端视图url中定义路径"/tpl/" + DELETE_ID + "/delete/",

path('tpl/<int:pk>/delete/', tpl.tpl_delete, name='tpl_delete'),

9、定义视图函数

def tpl_delete(request, pk):
    try:
        models.Template.objects.filter(id=pk).delete()
        return JsonResponse({"status": True})
    except Exception as e:
        return JsonResponse({"status": False})

10、如果有中间件,则需把网址加到中间件里让行。

 

标签:function,删除,tpl,前段,页面,DELETE,ID,弹窗,delete
From: https://www.cnblogs.com/zhuangjoo/p/17435988.html

相关文章

  • 基于JAVA的虚拟页面置换算法
    访问【WRITE-BUG数字空间】_[内附完整源码和文档]一概述目的:实现OPT、FIFO、LRU三种置换算法。主要完成任务:实现三种算法并计算出每种算法的却页数,且以表格形式输出结果。使用开发工具:Eclipse—Java。解决主要问题:编写出可视化窗口输出运行结果。二使用的基本概念和原理OPT:在分配......
  • vue3 reactive响应式赋值页面不渲染问题
    问题描述://声明变量letdata=reactive([]);http().then(res=>{data=res.dataconsole.log(data)})//data数据更新,页面没有渲染,1、因数据结构而导致的未渲染解决方法:依旧是reactive,可以在外面包一层//声明letstate=reactive({data:[]})//赋值state......
  • 搭建自动化 Web 页面性能检测系统 —— 设计篇
    我们是袋鼠云数栈UED团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。。本文作者:琉易liuxianyu.cn页面性能对于用户体验、用户留存有着重要影响,当页面加载时间过长时,往往会伴随着一部分用户的流失,也会带来一些用户......
  • 子页面 调用父页面的方法
    使用element的dialog,dialog为自定以的组件,再组件内点击取消关闭dialog父页面 子页面 ......
  • 从输入URL到页面加载发生了什么?
    1、首先进行DNS域名解析,目的是找到对应的ip地址DNS解析过程:首先搜索浏览器自身的DNS缓存-----》没有找到则去本机的host文件中找-------》发起DNS递归查询,先查本地域名服务器———》根域名服务器———》com顶级域名服务器直到最后本地域名服务器得到google的IP地址并把它缓存......
  • 微信小程序点击按钮进行页面跳转
    下面是wxml代码<buttontype="primary"bindtap="go">跳转到list页面</button>下面是js代码go:function(){wx.navigateTo({url:'/pages/list/list',})},......
  • Fdog系列(一):思来想去,不如写一个聊天软件,那就从仿QQ注册页面开始吧。
    文章目录一.前言1.基础布局2.自动切换图片3.添加内容4.自动缩放,控件的显示和隐藏5.响应用户输入操作所有文章源码已整体打包上传至github,求星星!一.前言两年的大学生活马上就要结束了,马上面临实习,突然心血来潮,想着最后再来写一个项目来总结这几年所学的东西,难的项目,咱也不会,索......
  • Fdog系列(二):html写完注册页面之后怎么办,用java写后台响应呀。
    文章目录1.前言2.创建javaweb项目3.创建Server4.解决中文乱码问题5.响应后台数据目录Fdog系列(一):思来想去,不如写一个聊天软件,那就从仿QQ注册页面开始吧。所有文章源码已整体打包上传至github,求星星!1.前言接着第一篇用html完成了注册页面,第二篇,我们来完成后台数据处理,需要用......
  • 一个form表单有两个按钮,分别提交到不同的页面
    一个form表单有两个按钮,分别提交到不同的页面html页面:<div><h3>静态资源管理</h3></div><div><divclass="bjui-searchBar"><spanstyle="font-size:14px;padding:3px;font-weight:300">文件名称:</span>......
  • APP中RN页面渲染流程-ReactNative源码分析
    在APP启动后,RN框架开始启动。等RN框架启动后,就开始进行RN页面渲染了。RN页面原生侧页面渲染的主要逻辑实现是在RCTUIManager和RCTShadowView完成的。通过看UIMananger的源码可以看到,UIMananger导出给JS端的API接口在对UI的操作上,基本都会同时对View和ShadowView进行操作。......