文档章节

X-Editable提交自动进入success且无结果问题解决办法

Timelog
 Timelog
发布于 2017/08/28 02:07
字数 710
阅读 122
收藏 0

被使用的代码:

$('.panel').find('.panel-heading .btn-trash').each(function(){
                
                var that = this;
                var id = $(this).attr('data-id');
                
                $(this).editable({
//  ============================================================
               这里发生的问题,如果没有PK则不会提交ajax并会返回到success方法并失败
//  ============================================================
                    pk:id,
//  ============================================================
                    type: 'confirm',
                    placement: 'bottom',
                    toggle: 'click',
                    title:'您确定要删除这条评价?',
                    url: '/admin/product/comment/delete',
                    ajaxOptions: {
                        data: {
                            id: id
                        },
                        dataType: 'JSON'
                    },
                    success: function (data, n) {
                        
                        if (data.status == true) {

                            Tips.close('操作成功',true);
                            $(that).parents('.panel').fadeOut(function () {
                                $(this).remove();
                            });
                        } else {
                            return data.message;
                        }
                    },
                    display: function (value, sourceData) {
                    }
                });
                
            });

当提交时点击的按钮会触发进入这个事件:

submit: function(e) {
            e.stopPropagation();
            e.preventDefault();
            
            //get new value from input
            var newValue = this.input.input2value(); 

            //validation: if validate returns string or truthy value - means error
            //if returns object like {newValue: '...'} => submitted value is reassigned to it
            var error = this.validate(newValue);
            if ($.type(error) === 'object' && error.newValue !== undefined) {
                newValue = error.newValue;
                this.input.value2input(newValue);
                if(typeof error.msg === 'string') {
                    this.error(error.msg);
                    this.showForm();
                    return;
                }
            } else if (error) {
                this.error(error);
                this.showForm();
                return;
            } 
            
            //if value not changed --> trigger 'nochange' event and return
            /*jslint eqeq: true*/
            if (!this.options.savenochange && this.input.value2str(newValue) == this.input.value2str(this.value)) {
            /*jslint eqeq: false*/                
                /**        
                Fired when value not changed but form is submitted. Requires savenochange = false.
                @event nochange 
                @param {Object} event event object
                **/                    
                this.$div.triggerHandler('nochange');            
                return;
            } 

            //convert value for submitting to server
            var submitValue = this.input.value2submit(newValue);
            
            this.isSaving = true;
            
            //sending data to server
            $.when(this.save(submitValue))
            .done($.proxy(function(response) {
                this.isSaving = false;

                //run success callback
                var res = typeof this.options.success === 'function' ? this.options.success.call(this.options.scope, response, newValue) : null;

                //if success callback returns false --> keep form open and do not activate input
                if(res === false) {
                    this.error(false);
                    this.showForm(false);
                    return;
                }

                //if success callback returns string -->  keep form open, show error and activate input               
                if(typeof res === 'string') {
                    this.error(res);
                    this.showForm();
                    return;
                }

                //if success callback returns object like {newValue: <something>} --> use that value instead of submitted
                //it is usefull if you want to chnage value in url-function
                if(res && typeof res === 'object' && res.hasOwnProperty('newValue')) {
                    newValue = res.newValue;
                }

                //clear error message
                this.error(false);   
                this.value = newValue;
                /**        
                Fired when form is submitted
                @event save 
                @param {Object} event event object
                @param {Object} params additional params
                @param {mixed} params.newValue raw new value
                @param {mixed} params.submitValue submitted value as string
                @param {Object} params.response ajax response

                @example
                $('#form-div').on('save'), function(e, params){
                    if(params.newValue === 'username') {...}
                });
                **/
                this.$div.triggerHandler('save', {newValue: newValue, submitValue: submitValue, response: response});
            }, this))
            .fail($.proxy(function(xhr) {
                this.isSaving = false;

                var msg;
                if(typeof this.options.error === 'function') {
                    msg = this.options.error.call(this.options.scope, xhr, newValue);
                } else {
                    msg = typeof xhr === 'string' ? xhr : xhr.responseText || xhr.statusText || 'Unknown error!';
                }

                this.error(msg);
                this.showForm();
            }, this));
        },

注意看这里:

会进入save方法:

save: function(submitValue) {
            //try parse composite pk defined as json string in data-pk 
            this.options.pk = $.fn.editableutils.tryParseJson(this.options.pk, true); 
            
            var pk = (typeof this.options.pk === 'function') ? this.options.pk.call(this.options.scope) : this.options.pk,
            /*
              send on server in following cases:
              1. url is function
              2. url is string AND (pk defined OR send option = always) 
            */
            send = !!(typeof this.options.url === 'function' || (this.options.url && ((this.options.send === 'always') || (this.options.send === 'auto' && pk !== null && pk !== undefined)))),
            params;
//  ========================================================================
//          send即为发送,判断的要求就是得有PK,那么PK从哪获取的呢?
//          了解到是从options获取的,所以要从代码或HTML中将它注入进去!
//  ========================================================================
            if (send) { //send to server
                this.showLoading();

                //standard params
                params = {
                    name: this.options.name || '',
                    value: submitValue,
                    pk: pk 
                };

                //additional params
                if(typeof this.options.params === 'function') {
                    params = this.options.params.call(this.options.scope, params);  
                } else {
                    //try parse json in single quotes (from data-params attribute)
                    this.options.params = $.fn.editableutils.tryParseJson(this.options.params, true);   
                    $.extend(params, this.options.params);
                }

                if(typeof this.options.url === 'function') { //user's function
                    return this.options.url.call(this.options.scope, params);
                } else {  
                    //send ajax to server and return deferred object
                    return $.ajax($.extend({
                        url     : this.options.url,
                        data    : params,
                        type    : 'POST'
                    }, this.options.ajaxOptions));
                }
            }
        }, 

没有pk,X-Editable就不能提交代码到服务器,但是还是会进入success我操。所以我们在自定义插件式X-Editable时,一定要配置个pk进去,

不然会死的很惨都不知道怎么死的。

 

 

 

© 著作权归作者所有

Timelog
粉丝 0
博文 1
码字总数 710
作品 0
廊坊
私信 提问
easyui升级到1.43之后,编辑行的高度就固定了 (变矮了)

我将easyui升级到1.43之后,编辑行的高度就固定了 ,高度固定为16px,在网上找了半天没找到原因,但是找到解决办法了,再执行 $("#datagrid").datagrid('beginEdit',i);之后执行 $(".datagrid......

扎西多顿
2015/09/25
32
0
HTTP 400 错误

FIREBUG显示红色: XML解析错误:未找到元素 位置:moz-nullprincipal:{f31ca48e-0541-4253-9867-49552d73e84f} 行:1,列:1: 响应头信息 原始头信息 Server Transfer-Encoding Date Conn...

小杨阿哥哥
2010/12/03
3.1K
2
ajaxSubmit上传文件出现下载提示框问题

今天在使用jquery.form插件的ajaxSubmit上传文件时,在IE、chorme下测试,老是出现下载文件的提示框,谷歌百度了半天,基本没有人说明是什么原因的,在查看了jquery.form的源码时,发现了下面...

飞炀
2013/09/09
0
0
Centos7- wget未找到命令,there are no enabled repos 解决办法

问题:反正就是没办法实现源配置的意思吧,我是新人,一头雾水,百度无结果 解决:CentOS 7 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo 或者...

论尽先生
2018/10/20
0
0
基于Jenkins+Docker的自动化代码发布流程

前段时间写了一篇初创团队持续集成的落地与实现,主要用python接收gitlab的push请求,然后调用不同的shell脚本来实现。本文将使用基于Jenkins+Docker来实现另一套的自动化CI/CD的代码发布流程...

opsonly
03/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

HBase新建表报错 org.apache.hadoop.hbase.TableExistsException

之前安装了旧版本的hbase, 没有清理其在Zookeeper上的内容。 解决办法 stop-hbase.sh zkCli.sh >>> rmr /hbase >>> quit start-hbase.sh...

dreamness
22分钟前
1
0
大数据技术的应用现状与展望

本文是我即将由嵌入式底层驱动行业转入大数据研究领域的综述文章,案例摘自《程序员》电子期刊,由于初学者知识面较窄,查看文献量较少,因此后续还会在此基础上,继续跟踪并深入研究,为论文...

陈小君
28分钟前
1
0
NCRE考试感想 三级信息安全(上)

时间节点 报名时间:2017-06 考试时间:2017-09 查询成绩:2017-11   考试简述 满分100分,时间120分钟。题型有三种,选择题、综合题、应用题。   备考经验 题库是WLJY的,买了激活码。为了...

志成就
35分钟前
1
0
百度地图显示我的位置

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="jquery-1.8.2.min.js"></script></head><body><sec......

塔塔米
40分钟前
1
0
mysql mysql常用的常用函数

1. 数学函数 函 数 作 用 ABS(x) 返回x的绝对值 CEIL(x),CEILIN(x) 返回不小于x的最小整数值 FLOOR(x) 返回不大于x的最大整数值 RAND() 返回0~1的随机数 RAND(x) 返回0~1的随机数,x值相同返...

edison_kwok
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部