文档章节

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

Timelog
 Timelog
发布于 2017/08/28 02:07
字数 710
阅读 34
收藏 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
什么是AJAX?

大家好,我是IT修真院北京总院第24期的学员,一枚正直纯洁善良的web程序员 今天给大家分享一下,修真院官网js任务5,深度思考中的知识点——什么是AJAX? 1.背景介绍 什么是Ajax? Ajax的全称...

我是一只北极熊啊
2017/10/30
0
0
HTTP 400 错误

FIREBUG显示红色: ^ 响应头信息原始头信息 Server Transfer-Encoding Date Connection 请求头信息原始头信息 Host User-Agent Accept Accept-Language Accept-Encoding Accept-Charset Keep......

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

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

飞炀
2013/09/09
0
0
jquery的ajax()函数传值中文乱码解决方法介绍

jquery的ajax()函数传值中文乱码解决方法介绍,需要的朋友可以参考下 代码如下: $.ajax({  dataType : ‘json',type : ‘POST',url :‘http://localhost/test/test.do',data : {id: 1, typ...

mdoo
2015/10/07
217
1

没有更多内容

加载失败,请刷新页面

加载更多

Python爬虫:Scrapy框架的安装和基本使用

大家好,本篇文章我们来看一下强大的Python爬虫框架Scrapy。Scrapy是一个使用简单,功能强大的异步爬虫框架,我们先来看看他的安装。 Scrapy的安装 Scrapy的安装是很麻烦的,对于一些想使用S...

糖宝lsh
24分钟前
2
0
Android Dialog几种对话框

1,普通对话框 2,单选对话框 3,多选对话框 4,日期选择对话框 5,时间选择对话框 6,日期选择对话框 7,进度条对话框 普通对话框 AlertDialog.Builder builder = new AlertDialog.Builde...

lanyu96
31分钟前
1
0
awk命令

-F选项的作用是指定分隔符。如果不加-F选项,则以空格或者tab为分隔符。print为打印操作,用来打印某个字段。$1为第1个字段,$2为第2个字段,以此类推。但是$0比较特殊,它表示整行: [root@cen...

野雪球
39分钟前
2
0
一切都靠大数据:滴滴已封禁4.3万人员、车辆

这段时间以来,滴滴出行相继出炉了各种整改措施,包括自身安全建设和外部社会共建,昨日就刚刚宣布正在筹备建立安全监督顾问委员会。 据媒体最新报道,9月30日,上海市交通委员会执法总队、上...

linuxCool
58分钟前
4
0
awk命令用法介绍

10月18日任务 9.6/9.7 awk 1.awk(上)(下) 1.awk 分段操作功能 指定分隔符,并把第一段打印出来,不会改动文件内容 将所有内容打印出来 awk 没有指定分隔符号,则会默认用空格或者空白字符...

hhpuppy
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部