X-editable 如果它不再在动态源中，如何显示保存的值

Question

我在新项目中使用 X-editable 和 bootstrap。

我使用的是动态源，效果很好。新值保存在数据库中，没有问题。

问题是我有多个 select 选项，其中一些应该只 selected 一次。这就是我使用动态源的原因。

当我 select 一个值应该只 selected 一次时，问题就出现了，因为更新源时，保存的值将不再存在于源中。如果我 select 任何其他值，它会正确显示更新后的值。如果我刷新页面，新值也会正确显示（但这当然是因为 html 代码中的 $object->award->name 只是显示新值）。

我在过去的几个小时里尝试了很多不同的东西，但我无法让它正常工作。

我该如何解决这个问题？

这是javascript：

$(function(){
        //edit form style - popup or inline
        $.fn.editable.defaults.mode = 'popup';
        $('.pUpdate').editable({
            validate: function(value) {
                if($.trim(value) == '')
                    return 'Value is required.';
            },
            type: 'text',
            url: posturl,
            title: 'Edit Status',
            placement: 'top',
            send:'always',
            emptytext: 'Click to add a value',
            sourceCache: false,
            ajaxOptions: {
                dataType: 'json'
            },
            success: function(response, newValue) {

                // refresh total probability
                updateProbability();

                // this does not work:
                //var $that = $(this);
                //setTimeout(function() {
                //    $that.editable('option', 'source', {{ $app['url_generator']->generate('wheeloffortune-getawardsforselect', ['wheel_id' => $wheel->id]) }});
                //}, 0);

                // this does not work:
                // return {newValue: response.newValue};
            }
        })
    });

这是 html 元素：

<td><a class="pUpdate update_awards"
              data-pk="{{ $object->id }}"
              data-name="award_id"
              data-type="select"
              data-source="{{ $app['url_generator']->generate('myroute', ['param' => $object2->id]) }}"
              data-emptytext="Click to select a value"
              >{{ $object->award->name }}</a></td>

Answer 1

据我所知，X-editable 不支持这个。

所以我不得不求助于用 jQuery 简单地更新文本。我确保 json 响应包含我想要显示的新文本，并且在成功回调中我调用了一个函数来更新相关元素的文本。

javascript 现在看起来像这样：

$(function(){
    //edit form style - popup or inline
    $.fn.editable.defaults.mode = 'popup';
    $('.pUpdate').editable({
        validate: function(value) {
            if($.trim(value) == '')
                return 'Value is required.';
        },
        type: 'text',
        url: posturl,
        title: 'Edit Status',
        placement: 'top',
        send:'always',
        emptytext: 'Click to add a value',
        sourceCache: false,
        ajaxOptions: {
            dataType: 'json'
        },
        success: function(response, newValue) {

            // refresh total probability
            updateProbability();

            // update text for award elements only
            var element = $(this);
            if(element.hasClass('update_awards')) {
                updateText(element, response);
            }
        }
    })
});

function updateText(element, response) {
    $(document).ajaxComplete(function() {
        element.text(response.newText);
        element.removeClass('editable-empty');
    });
}

请注意，我还必须删除可编辑的空白 class。

我在这里可能有点幸运，因为我在成功回调中已经有了函数 updateProbabilityAjax()，它正在执行 Ajax 请求，这就是为什么我能够使用.ajaxComplete()。我注意到一旦 X-editable 从服务器获得成功响应，但在它完成更新页面上的元素之前，就会触发成功回调。如果没有等待 jQuery ajax 请求，我将别无选择，只能在函数 updateText 中使用 setTimeout()。如果没有它，X-editable 将在我的函数 updateText 更新它之后实际更新元素 :)

希望这对某人有所帮助！

X-editable 如果它不再在动态源中，如何显示保存的值

X-editable how to show saved value if it is not in the dynamic source anymore

javascript

x-editable