`

easyui 按钮重复点击问题

 
阅读更多

  1.           我用的easyui技术,表单提交用的ajax。在前端处理控制的思想如下:

      点击保存后,马上让保存按钮disable掉,即灰显。如果ajax提交完毕后,并得到返回结果(不管结果是成功保存还是保存失败,我们不用管,只要有返回消息),我们马上让保存按钮enable掉,重新恢复作用。

 

代码

         var addStores = $('<div/>').dialog(
                            {
                                title : '添加门店',
                                href : '${pageContext.request.contextPath}/admin/storesAdd.jsp',
                                width : 615,
                                height : 365,
                                modal : true,
                                buttons : [ {
                                    text : '保存',
                                    handler : function() {
                                        var button = this;
                                        $('#admin_stores_addForm').form('submit',{
                                                            url : '${pageContext.request.contextPath}/storesAction!add.action',
                                                            onSubmit: function(){   //对表单进行校验,如果校验通过,则disable掉保存按钮,如果没有通过,则不用管。
                                                                var isValid = $(this).form('validate');
                                                                if (!isValid){
                                                                    console.info("==========================="+isValid)//$.messager.progress('close');    
                                                                    return isValid;
                                                                }else {
                                                                    console.info("111111111111111111111111111111"+isValid);
                                                                    $(button).linkbutton('disable');
                                                                    return isValid;    // return false will stop the form submission
                                                                }
                                                                
                                                            },
                                                            success : function(r) {
                                                                $(button).linkbutton('enable');   //提交完,并且处理完毕返回消息后,马上恢复掉保存按钮,enable
                                                                obj = $.parseJSON(r);
                                                                if (obj.success) {
                                                                    addStores.dialog('close');
                                                                    storesdatagrid.datagrid('reload');
                                                                    
                                                                }
                                                                $.messager.show({
                                                                    title : '提示',
                                                                    msg : obj.msg
                                                                });
                                                            }
                                                        });
                                    }
                                } ],
                                onClose : function() {
                                    $(this).dialog('destroy');
                                },
                                onLoad : function() {
                                    
                                }
                            });

 

 

2. 本来还有个方法,但是我没有尝试,不晓得有没有用,先在这里记一笔,就是用ajax的最原始的处理方法,不是像上面的那种,进行封装过。

             jQuery.ajax([options])  

 

             async      Boolean

 

            (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

3.$.ajax({

    type:'POST',
    url:url,
    data:obj,
    dataType:'json',
    beforeSend: function () {
    $.messager.progress({ 
       title: '提示', 
       msg: '文件上传中,请稍候……', 
       text: '' 
    });
    },
       complete: function () {
        $.messager.progress('close');
    },
    success:function(data){
    $("#uploadHtmlUrl").val(data.fileUrl);
            $("#uploadHtml").attr("src", data.fileUrl);
    }
    });

分享到:
评论

相关推荐

    基于easyui的通用导出

    在EasyUI中,可以通过绑定事件监听器来触发导出操作,例如在数据网格上添加一个导出按钮,当用户点击按钮时,调用对应的JavaScript函数,发送Ajax请求到后端的NewXLSExport接口。这个js片段可能包含这样的函数,例如...

    easyUI标签生成工具

    4. 生成代码:点击生成按钮,工具会自动生成对应的HTML页面(包括datagrid列表、新增和编辑表单)、JavaScript代码以及可能的后台处理逻辑。 5. 整合到项目:将生成的代码整合到现有的项目结构中,部署并测试。 ...

    JS EasyUI DataGrid动态加载数据

    4. **自定义加载更多功能**: 如果需要自定义加载更多数据的行为,例如添加一个“加载更多”按钮,可以在按钮的点击事件中调用DataGrid的`reload`方法,传递新的页码和每页大小。 ```html ()"&gt;加载更多 function ...

    科发EasyUi代码生成器v3.5

    最后,点击生成按钮,工具将自动完成所有指定的代码生成工作,生成的文件会按照约定的目录结构保存,方便开发者直接集成到项目中。 总的来说,科发EasyUi代码生成器v3.5是一个强大的辅助工具,它通过自动化代码生成...

    easyui的帮助文档及案例

    这些案例涵盖了基础到高级的应用场景,比如“按钮(Button)”的点击事件处理、“表单(Form)”的验证和提交、“面板(Panel)”的展开和折叠等。此外,还有关于数据加载、异步操作、自定义扩展等方面的实例,这些...

    struts2-easyui.

    - **按钮事件**:通过JavaScript绑定EasyUI的按钮点击事件,触发AJAX请求,实现无刷新的CRUD操作。 3. **整合过程**: - **Action处理**:Struts2 Action接收到请求,调用后台服务处理数据,如从数据库中获取或...

    《jQuery EasyUI开发指南》书籍源码

    3. **事件处理**:通过监听用户操作,如点击按钮、选择项等,可以实现业务逻辑。jQuery EasyUI提供了一系列的事件绑定方法,如`on('click')`,使得响应用户交互变得简单。 4. **异步通信**:在权限系统中,数据通常...

    easyui基本框架

    3. **网页设计**:EasyUI 提供了一些基础样式和组件,如按钮、表单、面板等,可以帮助开发者快速创建符合现代网页标准的界面。同时,它支持主题定制,可以通过修改 CSS 文件来改变整体风格。 4. **框架设计**:...

    easyui+增强窗体 demo_ext为实例文件

    2、修复datagrid在rowediting编辑风格时点击“确定”按钮无法提交问题。 3、datagrid和treegrid增加getEditingRows方法,用来获取所有正在编辑的行。 4、修复tabs.add方法,当useiframe=true时, iframe的高度改为100...

    easyUI 海量分页

    3. **数据请求**:当用户点击分页按钮时,EasyUI会向服务器发送包含当前页码和每页大小的请求。在后端,你需要处理这些请求并返回相应页的数据。 4. **存储过程**:"手写分页存储过程"意味着在数据库层面编写SQL...

    easyui的中文文档(超级详细,最好的文档)

    7. **按钮(Button)**: 包括普通按钮、链接按钮、复选按钮等,可绑定事件处理函数,实现点击触发的功能。 8. **工具栏(Toolbar)**: 可以放置多个按钮和其他组件,通常位于页面顶部或底部,用于提供常用的操作。 ...

    EasyUI案例Demo及api

    - 要注意CSS样式的覆盖问题,因为EasyUI的样式可能与项目中原有的样式冲突。 - 熟悉jQuery基础是使用EasyUI的前提,因为它依赖于jQuery来操作DOM和处理事件。 - 需要合理组织和管理JavaScript代码,避免全局变量...

    jquery_easyui_整理

    - 按钮(button):创建各种类型的按钮,如普通按钮、链接按钮、提交按钮等,支持添加图标和事件。 3. **EasyUI 配置与定制** - CSS 样式:EasyUI 提供了预设的 CSS 样式,开发者可以根据需求调整样式,或者完全...

    easyui权限设计

    - **操作流程**:通过“添加角色”按钮创建新的角色,并为其指定权限范围。一旦创建完成,即可为用户分配此角色。 **2. 修改角色** - **功能**:修改现有角色的信息。 - **目的**:调整角色名称或更新角色权限,当...

    Spring+SpringMVC+Mybatis+easyUI实现简单的后台管理系统

    7. **用户交互**:用户通过easyUI组件与系统进行交互,如点击按钮、填写表单等,触发新的HTTP请求,重复上述流程。 通过这样的设计,系统实现了前后端分离,降低了耦合度,同时Spring、SpringMVC和Mybatis的协同...

    EasyUI官方API中文版

    在实际开发中,利用EasyUI官方API中文版提供的详细指南,开发者可以高效地创建功能完善、美观的Web应用,减少重复劳动,提升开发效率。通过深入学习和实践,开发者能够掌握EasyUI的精髓,创造出更加出色的用户体验。

    原生的复选框(checkbox button)和单选按钮(radio button)实现透明背景效果解决方案

    同样,对于单选按钮,你可以重复上述步骤,只是在绘制符号时有所不同。 以上就是在VS2010中使用ATL/WTL实现复选框和单选按钮透明背景的基本步骤。在实际项目中,你可能需要根据具体需求调整绘图细节,比如自定义...

    在次封装easyui-Dialog插件实现代码

    创建了一个无内容的 `&lt;div&gt;` 元素,并将其 ID 设置为 "d",然后调用 `$.fn.hDialog` 方法初始化 Dialog,并传入一个回调函数,当点击 '确定' 按钮时,Dialog 将关闭自身。 通过次封装,开发者可以更方便地重复使用 ...

    datalist分页操作

    当用户点击分页按钮时,需要重新执行查询并绑定到DataList,同时确保正确设置DataList的CurrentPageIndex属性。数据源通常会包含一个方法来返回指定页码的数据。 6. **用户界面**:在前端,UI应该显示当前页码和总...

    CUD:封装基于jquery easyui的增删改操作

    cud.js标准的基于easyui datagrid的增删改操作都是这样的:一个datagrid展示数据,用户可以选择某一行数据进行删除、编辑操作,或者通过点击按钮添加数据,其中修改、添加操作是通过弹窗实现的。要实现这样的功能,...

Global site tag (gtag.js) - Google Analytics