当ajax调用失败时,如何停止引导x-editable来更新已编辑的字段？

我正在传递一个函数作为url.

$('.order-price').editable({
    type: "text",
    title: "Order Price",
    url: function (params) {
        var orderID = $(this).data("order-id");
        var data = "OrderID=" + orderID + "&Price=" + params.value;

        $.ajax({
            type: 'post',
            url: '/Trades/SetOrderPrice',
            data: data,
            async: false,
            error: function (xhr, ajaxOptions, thrownError) {
                return false;
                // Do I return something here instead of false?

            }

        })
    }
});

我正在使用x-editable来填充弹出窗口中的选择列表.现在我想将我的密钥发送到服务器,我的代码是这样的

<a href="#" id="status" data-type="select" data-pk="1" data-url="${g.createLink(controller: 'someController', action: 'someAction')}" data-title="Select CV" class="btn btn-primary">
    <image src="${resource(dir: 'images/template', file: 'logo11.png')}"/> ${session.someList?.size()} CV(s) Created
</a>
<script>
    $(function () {
        $('#status').editable({
            value: 1,
            source: [
                <g:each in="${session.someList}" var="xyz"   status="idx">
                    {value: ${xyz?.id}, text: "${xyz.title}",        srsSelected:                    ${xyz.id}, updateXyz: "updateXyz"},
                </g:each>
            ]
        });
    });
</script>

我想把我的srsSelected键发送到服务器,我做谷歌但没有得到重点...

编辑:

现在我可以使用我的密钥发送到服务器(经过长时间的研究)

params: function (params) {  //params already contain `name`, `value` and `pk`
    var data = {};
    data['cvSelected'] = params.pk;
    return data;
}

因此我更新的代码是:

<a href="#" id="status" data-type="select" data-pk="1" data-url="${g.createLink(controller: …

我正在看X-editable什么看起来很酷,但我不确定它是否正在更新(2013年11月是最后更新).

它显然是鼻子支持日期选择器选项.我想知道是否有人知道X-editable的替代品或具有工作日期选择器的fork.

我有一个表,我想在该表中添加内联编辑.我开始使用ng-grid,然而,我认为虽然它运行良好,但我花了太多时间来修复样式,以便它与我网站的整体主题相匹配.我开始新鲜,我现在使用一个普通的旧html表与angularjs在幕后为其令人敬畏的双向数据绑定属性.

一切都进展顺利,除了一个事实,即我被困在试图让行内编辑与引导,日期选择器的工作:http://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter.我使用这个日期选择器而不是xeditable说你应该使用的ui-bootstrap datepicker的原因是因为它在我的网站中看起来或感觉不对.这是ui-bootstrap datepicker的样子http://jsfiddle.net/NfPcH/23/.我喜欢bootstrap datepicker的简单外观.

这是一个带有可编辑和日期字段的表的plunker,可以尝试编辑PLUNKER

使用bootstrap-datepicker作为输入字段工作正常,使用自定义指令正确更新模型:

editablegrid.directive('datepicker', function() {
return {
    restrict : 'A',
    require : 'ngModel',
    link : function(scope, element, attrs, ngModelCtrl) {
        $(function() {
            var dp = $(element).datepicker({
                format : 'MM dd, yyyy'
            });

            dp.on('changeDate', function(e) {
                ngModelCtrl.$setViewValue(e.format('MM dd, yyyy'));
                scope.$apply();
            });
        });
    }
}

我更改了可编辑的源代码以使用bootstrap-datepicker(请参阅xeditable.js的第78-84行)

/*
The New directive I've made for xeditable to use with the bootstrap-datepicker
*/
angular.module('xeditable').directive('editableBsdateNew', ['editableDirectiveFactory',
  function(editableDirectiveFactory) {
    return editableDirectiveFactory({
      directiveName: 'editableBsdateNew',
      inputTpl: '<input type="text" class="form-control …

我从postgres获得一些日期文件,格式如下:

"2000-11-30T14:00:00.000Z"

我无法在页面上的可编辑日期字段中使用此功能.就像是:

 <a href="#" editable-date="employee.brthday"
     onbeforesave="updateField($data, 'brthday', employee)">
         {{employee.brthday || 'empty' | date:"dd/MM/yyyy" }}
 </a>

这个日期(如上所示)显示正常.但是,当我想编辑此字段时,日期将重置,我在控制台中收到此消息:

Error: [ngModel:datefmt] Expected `2000-12-05T14:00:00.000Z` to be a date http://errors.angularjs.org/1.3.0/ngModel/datefmt?p0=2000-12-05T14%3A00%3A00.000Z
    at http://localhost:8000/bower_components/angular/angular.js:80:12
    at Array.<anonymous> (http://localhost:8000/bower_components/angular/angular.js:19453:17)
    at Object.ngModelWatch (http://localhost:8000/bower_components/angular/angular.js:20555:36)
    at Scope.$digest (http://localhost:8000/bower_components/angular/angular.js:13957:40)
    at Scope.$apply (http://localhost:8000/bower_components/angular/angular.js:14227:24)
    at HTMLAnchorElement.<anonymous> (http://localhost:8000/bower_components/angular-xeditable/dist/js/xeditable.js:831:21)
    at HTMLAnchorElement.jQuery.event.dispatch (http://localhost:8000/bower_components/jquery/dist/jquery.js:4409:9)
    at HTMLAnchorElement.elemData.handle (http://localhost:8000/bower_components/jquery/dist/jquery.js:4095:28)

如果我只是通过编辑字段来更新模型(输入新日期),将来可以编辑正常,因为日期存储如(Date obj？):

Wed Dec 06 2000 00:00:00 GMT + 1000(Якутскоевремя(зима))

如何将输入日期转换为角度格式可理解？
我还尝试用'new Date(输入日期 - 这里)替换输入日期格式,但它不起作用.可能是输入日期格式无法从字符串中解析？

总结:我需要将输入日期格式转换为Date obj或通过像Date对象这样的pg.js日期字段获取.我该怎么做呢？

在使用X-editable时我遇到了这个问题,如果我指定了datepicker字段模式:"popup",我会让弹出窗口显示得很好......但是现在如果我有一个长桌子(垂直或水平),进一步向下(或向右)我去的表,它越糟糕 - 这个日期/日期时间选择器弹出窗口仅在页面上的特定位置(左上角)弹出.

因此,如果我有50条记录并点击其中一个底部打开日期选择器,我甚至看不到它弹出并且必须假设它已经弹出,所以我必须一直向上滚动在表格的顶部看到它.

如果我在一个较小的屏幕上的桌子上走得很远,那就更糟了 - 那么我必须向左滚动才能看到打开的popover(如果我不知道它最终会在哪里,我认为脚本是破碎,不起作用).

以下是我在定义中使用的内容 - 我错过了什么吗？或者CSS中的东西可能？

$('.time').editable({
    type: 'datetime',
    url: 'post.php',
    format : 'yyyy-mm-dd hh:ii',
    viewformat : 'yyyy-mm-dd hh:ii',
    inputclass : "datepick",
    emptytext: '...',
    datetimepicker : {
        weekStart : 1
    },
});

我有选择按钮,我选择状态作为我的条目.这个状态来自statuses表,它不是每个表中的一列(它是一般选项).我想要做的是status_id在x-editable的帮助下更改表格中的列,但我不知道如何在JavaScript中获取动态数据.

这是我当前的表单,在我的评论的索引页面中显示状态,例如:

 <form action="{{route('updatebyajax', $rating->id)}}" method="post">
    {{csrf_field()}}
       <td class="text-center" style="width:100px;">
          <select class="form-control status" name="status_id">
            @foreach($statuses as $status)
              <option id="rating" class="rating" data-url="{{ route('updateratebyajax', $rating->id) }}" data-pk="{{ $rating->id }}" data-type="select" data-placement="right" data-title="Edit Rate" value="{{$status->id}}">{{$status->title}}</option>
           @endforeach
        </select>
    </td>
 </form>

所以我需要的是基本上从statuses表中获取信息并通过选择更改.

更新

根据要求,这是我的表截图:

PS:这是选择按钮的默认样本: 示例链接

<a href="#" id="status" data-type="select" data-pk="1" data-url="/post" data-title="Select status"></a>
<script>
$(function(){
    $('#status').editable({
        value: 2,    
        source: [
              {value: 1, text: 'Active'},
              {value: 2, text: 'Blocked'},
              {value: 3, text: 'Deleted'}
           ]
    });
});
</script> …

我已经能够成功实现x-editable来创建新用户,并随后将更改发布到数据库.在这方面一切都很好.

我想使用字段的数字输入并对其进行一些算术运算,并将结果显示在不同的div中.

我创造了这个小提琴:http://jsfiddle.net/Mdcfh/

显示我的设置.这个小提琴工作正常,但是当我在我的代码中实现完全相同时,回调中没有任何反应.

我在下面附上我的代码的相关部分:

HTML

<div id="msg_units" style="display:none">Saved!</div>
<table class="table table-condensed table-hover">
<thead>
<tr>
<td class="text-left hide800"><strong>Name</strong></td>
<td class="text-center"><strong>Price</strong></td>
<td class="text-center"><strong>Quantity</strong></td>
<td class="text-right"><strong>Totals</strong></td>
</tr>
</thead>
<tbody>
<tr>                         
<td class="text-left hide800"><?php echo $_REQUEST['title']?></td>
<td class="text-center"><i class="fa fa-inr"></i><strong><span class="price"     id="unit_cost"><?php echo $_REQUEST['cost']?></span></strong></td>
<td class="text-center"><a href="#" class="myeditable qty" id="num_units" data-type="text" data-pk="3" data-name="num_units" data-title="How many are going?"></a></td>
<td class="text-right"><i class="fa fa-inr"></i><strong><a href="#" id="exp_total"></a>        </strong></td>
</tr></tbody></table>

JS

//editables 
$('#num_units').editable({
 url: 'post.php',
 ajaxOptions: { dataType: 'json' },
display: function(value, response) {
return …

我看到的所有在线示例都显示了如何使用X-Editable和Select2库使用旧版本的select2.

X-Editable - http://vitalets.github.io/x-editable/与
Select2 - https://select2.github.io/连续几周没有太多运气.

最近有没有人拥有这两个图书馆,过去一年发布的版本甚至一起工作？

我想在post请求成功后才将添加的数据插入到表中,但是在检查post请求之前它会添加.那么如何在成功之后才插入表行数据.

此外,showCategories(从api获得的类别)不起作用,但性别(从本地获取)正在起作用.在选择框中(显示类别数据选项)但我无法选择类别数据.我使用性别选择框相同的东西,但性别选择框工作但不是类别.我在哪里弄错了？

HTML

 <table class="table table-bordered table-hover table-condensed">
        <tr style="font-weight: bold">
            <td style="width:5%">No.</td>
            <td style="width:20%">Name</td>
            <td style="width:10%">Gender</td>
            <td style="width:30%">Profile photo</td>
            <td style="width:20%">Category</td>
            <td style="width:30%">Action</span>
            </td>
        </tr>
        <tr ng-repeat="user in users">
            <td>{{$index+1}}</td>
            <td>
                <span editable-text="user.name" e-name="name" onbeforesave="checkName($data, user._id)" ng-model="userName" e-form="rowform" e-required>
                      {{ user.name}}
                    </span>
            </td>
            <td>
            <span editable-select="user.gender" ng-model="gender" e-name="gender" e-form="rowform" e-ng-options="s.value as s.text for s in genders">
                  {{ showGender(user) }}
            </span>

            </td>

            <!-- ng-show="tableform.$visible" -->
            <td class="text-center" >
                    <img ng-src="/api/media/{{user.media_id}}" alt="No Image" style="margin-bottom:20px;width:100%;">
                    <a class="btn btn-success" ui-sref="media({_id: user._id })" style="border: …