X-Editable - How to pull form data using ajax

Question

I am using x-editable and would like to know how to populate my select element using jquery and ajax.

[EDIT - For clarity]

This is my code:

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'
         */
    });

});

I am trying to get the source:

source: getSource()

From the function but am not 100% sure how to return the data from the Ajax call.

Answer 1

I resolved this with the help of this post: How do I return the response from an asynchronous call?

Here is my solution:

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!")
    });

});