X-Editable

Question

我正在使用 x-editable，想知道如何使用 jquery 和 ajax.

填充我的 select 元素

[编辑 - 为清楚起见]

这是我的代码：

jQuery(document).ready(function() {

    //toggle `popup` / `inline` mode
    $.fn.editable.defaults.mode = 'popup';

    var getSource = function() {
        var url = "/api/rpc/payments/status_options";
        $.ajax({
            type:  'GET',
            async: true,
            url:   url,
            dataType: "json",

            success: function(responseObject){
            }

        });

    };

    //make status editable
    $('.payments-click').editable({
        type: 'select',
        title: 'Select status',
        placement: 'right',
        value: 2,
        source: getSource()
        /*
         //uncomment these lines to send data on server
         ,pk: 1
         ,url: '/post'
         */
    });

});

我正在尝试获取来源：

source: getSource()

来自函数，但不是 100% 确定如何 return 来自 Ajax 调用的数据。

Answer 1

我在这个 post 的帮助下解决了这个问题：How do I return the response from an asynchronous call?

这是我的解决方案：

jQuery(document).ready(function() {

    //toggle `popup` / `inline` mode
    $.fn.editable.defaults.mode = 'popup';

    function getSource() {
        var url = "/api/rpc/payments/status_options";
        return $.ajax({
            type:  'GET',
            async: true,
            url:   url,
            dataType: "json"
        });
    }

    getSource().done(function(result) {

        $('.payments-click').editable({
            type: 'select',
            title: 'Select status',
            placement: 'right',
            value: 2,
            source: result
            /*
             //uncomment these lines to send data on server
             ,pk: 1
             ,url: '/post'
             */
        });


    }).fail(function() {
        alert("Error with payment status function!")
    });

});

Answer 2

试试这个

<a href="javascript:void(0)" id="status" data-type="select" data-title="Select Status"></a>
<script>
    $.getJSON("api/rpc/payments/status_options", function (list) {
            $('#status).editable({
                    prepend: "",
                    pk: 1,
                    source: list,
                    name: "status"
           });
     });
</script>

X-Editable - 如何使用 ajax 提取表单数据

X-Editable - How to pull form data using ajax

javascript

ajax

jquery

twitter-bootstrap