x-可编辑引导程序2的问题



谁能帮我找出这个问题-

http://jsfiddle.net/xBB5x/8823/

我正在尝试实现一个可编辑的(bootstrap 2)提前输入功能。

上面的代码有两个测试。1)是本地源仿真2)是ajax仿真(远程数据源)

我从x-可编辑的文档中采取了完全相同的例子,但是在js资源中有些东西是错误的,我无法识别。

根据我的理解,它所需要的是bootstrap-editable.js的bootstrap 2和bootstrap.js(2.3.2其中有typeahead插件)得到这个工作。

按照指南编写代码:

HTML

<div>
    <p>Test 1 - local source emulation</p>
<a href="#" id="state" data-type="typeahead" data-pk="1" data-placement="right" data-title="Start typing State.." class="editable editable-click" style="display: inline;">Arizona</a>
</div>
<p/>
<div>
    <p>Test 2 - remote data source emulation/ ajax</p> <a href="#" id="state2" data-type="typeahead" data-pk="1" data-placement="right" data-title="Start typing State.." class="editable editable-click" style="display: inline;">California</a>
</div>

JS

$.fn.editable.defaults.mode = 'inline';
//Test #1 local source emulation
$(function () {
    $('#state').editable({
        source: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Dakota", "North Carolina", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
    });
});
//Test #2 ajax emulation for the next step (remote data source)
$(function () {
    $('#state2').editable({
        value: 'Alabama',
        source: function (query, process) {
            return $.post('/typeahead', {
                query: query
            }, function (data) {
                return process(data);
            });
        }
    });
});

$.mockjax({
    url: '/typeahead',
    responseTime: 400,
    response: function (settings) {
        this.responseText = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Dakota", "North Carolina", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];
    }
});

我以前用过他们的例子(这里),它似乎工作得很好。是(你更新的例子)你想要实现的还是我错过了什么?

你也可以在JS中设置所有选项,这样更简洁,像这样:

$('#state2').editable({
    type: 'text',
    url: '/typeahead',
    pk: 1,
    title: 'Enter username',
    ajaxOptions: {
        dataType: 'json'
    },
    success: function (response, newValue) {
        //code here
    }
});

最新更新