X可編輯，如果不再存在於動態源中，如何顯示已保存的值

Question

我在新項目中將X-editable與bootstrap一起使用。

我使用的是動態來源，效果很好。 新值保存在數據庫中，那里沒有問題。

關鍵是我有多個選擇選項，其中一些只能選擇一次。 這就是為什么我使用動態源。

當我選擇只應選擇一次的值之一時，就會出現問題，因為更新源時，保存的值將不再位於源中。 如果我選擇任何其他值，它將正確顯示更新后的值。 而且，如果我刷新頁面，新值也會正確顯示（但是，這當然是因為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可編輯不支持此功能。

因此，我不得不訴諸於簡單地使用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');
    });
}

注意我還必須刪除editable-empty類。

我在這里可能會有點幸運，因為成功回調中已經具有函數updateProbabilityAjax（），該函數正在執行Ajax請求，這就是為什么我可以使用.ajaxComplete（）的原因。 我注意到，一旦X-editable從服務器獲得成功響應，就會觸發成功回調，但要在完成頁面上的元素更新之前觸發。 如果沒有jQuery ajax請求等待，我將沒有其他選擇，然后在updateText函數中使用setTimeout（）。 否則，X-editable實際上會在我的函數updateText更新它之后更新元素：）

希望這對某人有幫助！