文档章节

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

Timelog
 Timelog
发布于 2017/08/28 02:07
字数 710
阅读 29
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

RabbitMQ在CentOS环境安装

1.废话不多说准备一台虚拟机,系统为centos,我这里使用的系统版本如下图所示:

凌晨一点
42分钟前
0
0
线程池相关

在java.util.concurrent包下,提供了一系列与线程池相关的类。 使用线程池的好处 降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗; 提高响应速度。当任务到达时,任务...

edwardGe
44分钟前
0
0
学习大数据这三个关键技术是一定要掌握!

大数据时代全面来临,大数据、人工智能等技术引领科技创新潮流,获得国家政策大力支持,前景广阔。学习大数据技术的人自然是络绎不绝, 学习大数据虽然是一个趋势,但也要注意大数据培训课程...

董黎明
今天
0
0
jetbrains 上传代码到github

设置中找github 获取token 验证是否成功 测试git 生成key,一路回车即可 ssh-keygen -t rsa -C “youremail@example.com” 打开pub复制key,需要再次输入一次密码 验证是否成功,输入yes即可...

阿豪boy
今天
0
0
分布式服务框架(拾遗)

前言 现在的大部分工程都已经是基于分布式架构来处理。所以这里对分布式框架做一个简单的总结 常用的RPC框架 RPC框架原理 RPC(Remote Procedure Call,远程过程调用)一般用来实现部署在不同...

kukudeku
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部