Question

我迫切需要JavaScript专家的帮助。我花了最近7个小时尝试了数百种代码组合，以获得基本的标记选择输入字段，以便与库x-editable和select2一起使用。

我正在构建一个项目管理应用程序，它将在弹出窗口模式Div中显示项目任务数据。在任务模式中，所有任务字段都可以使用AJAX使用内嵌编辑功能进行编辑。

我正在使用：

名为X-Editable - http://vitalets.github.io/x-editable/
下拉选择jQuery库Select2 - https://select2.github.io/
允许模拟AJAX请求响应的jQuery MockAjax库。 https://github.com/jakerella/jquery-mockjax

我已经设置了一个基本的JSFiddle演示来试验这个StackOverflow问题。我没有来自我的实际应用程序的数千行代码，但是我确实将大部分正在使用的第三部分库包含在页面中。原因是要确保它们都不会干扰结果。

JSFiddle演示： http://jsfiddle.net/jasondavis/Lusbqfhs/

目标：

在字段上设置X-editable和Select2，以允许用户为项目任务选择并输入标记。
从后端服务器获取可用的Tag条记录，这些记录将返回Tag ID number和Tag Name的JSON响应，并使用此数据填充Selection2输入字段以允许用户选择多个标签。
允许用户也输入新标签，它也会将新标签发布并保存到后端！
当选择标签并单击保存按钮时，它会将所选标签列表中的ID ID号码保存回数据库。

问题：

现在，我在过去7小时内尝试了数百种选项和代码组合。我似乎无法使用这个基本功能，而且我发现的大部分示例似乎都不再正常工作了！

在此示例底部的库x-editable http://vitalets.github.io/x-editable/demo-plain.html?c=inline的此演示页面上，其中显示 Select2（标记模式），该功能是我需要的！我只是需要它从AJAX请求加载可用的标签，并且所有文档声称它可以完全没有问题地执行此操作！

这是X-Editable字段的Select2文档部分 - http://vitalets.github.io/x-editable/docs.html#select2

它还链接到Select2文档，声称可以设置和使用Select2中的所有选项 - https://select2.github.io/options.html

我使用MockAjax库来模拟JSFiddle等页面中的AJAX响应以进行测试。在我的JSFiddle演示中http://jsfiddle.net/jasondavis/Lusbqfhs/我设置了2个MockAjax响应....

$.mockjax({
    url: '/getTaskTags',
    responseTime: 400,
    response: function(settings) {
        this.responseText = [
            {id: 1, text: 'user1'},
            {id: 2, text: 'user2'},
            {id: 3, text: 'user3'},
            {id: 4, text: 'user4'},
            {id: 5, text: 'user5'},
            {id: 6, text: 'user6'}
        ];
    }
});

$.mockjax({
    url: '/getTaskTagById',
    responseTime: 400,
    response: function(settings) {
        this.responseText = [
            {id: 1, text: 'user1'},
            {id: 2, text: 'user2'},
            {id: 3, text: 'user3'},
            {id: 4, text: 'user4'},
            {id: 5, text: 'user5'},
            {id: 6, text: 'user6'}
        ];
    }
});

他们都应该为我的选择列表返回一个Mock JSON字符串，以填充。

以下是我的演示代码......

$(function(){

    //remote source (advanced)
    $('#task-tags').editable({
        mode: 'inline',
        select2: {
            width: '192px',
            placeholder: 'Select Country',
            allowClear: true,
            //minimumInputLength: 1,
            id: function (item) {
                return item.CountryId;
            },
            // Get list of Tags from AJAX request
            ajax: {
                url: '/getTaskTags',
                type: 'post',
                dataType: 'json',
                data: function (term, page) {
                    return { query: term };
                },
                results: function (data, page) {
                    return { results: data };
                }
            },
            formatResult: function (item) {
                return item.TagName;
            },
            formatSelection: function (item) {
                return item.TagName;
            },
            initSelection: function (element, callback) {
                return $.get('/getTaskTagById', { 
                    query: element.val()
                }, function (data) {
                    callback(data);
                });
            } 
        } 
    });


});

现在在演示中，当您单击该字段以选择标记时，它只是保持“加载”并且永远不会得到结果。看看控制台，似乎我的MockAjax请求不起作用，但是第二个请求正在工作，所以我不确定我的AJAX请求有什么问题？

如果有人可以帮助我实现这一目标，我真的可以帮助我。我会非常感激，我整晚都没有睡觉，甚至没有更接近工作的解决方案！请帮帮我！

谢谢

Answer 1

X-Editable使用Select2 3.5.2，它不直接使用jQuery.ajax（）。它有自己的ajax函数，并像这样调用jQuery.ajax（）：

transport = options.transport || $.fn.select2.ajaxDefaults.transport
...
handler = transport.call(self, params);

这就是$.mockjax({url: '/getTaskTags'...不起作用的原因。

要使其正常工作，您需要创建自己的传输功能，如下所示：

var transport = function (queryParams) {
    return $.ajax(queryParams);
};

并设置传输选项：

   ajax: {
            url: '/getTaskTags',
=> transport: transport,
            type: 'post',
            dataType: 'json',
            data: function (term, page) {
                return { query: term };
            },
            results: function (data, page) {
                return { results: data };
            }
        },

使用X-editable jQuery库使用来自AJAX请求的数据填充Select2标记输入字段

1 个答案: