Jediitable, autocomplete and autogrow jquery not working

Question

I am trying to use autocomplete and autogrow with the Jeditable jquery plugin and cannot seem to incorporate both. I currently have the Jeditable + autocomplete working perfectly. When I tr to add code for the autogrow it doesn't work and causes a post back when I hit the save button. Any help would be appreciated.

This is what I have so far:

    $('#directionList').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '../api/standarddirections/?q=' + request.term,
                dataFilter: function (data) { return data; },
                success: response
            });
        },
        minLength: 2
    });

    $.editable.addInputType('autocomplete', {
        element: $.editable.types.textarea.element,
        plugin: function (settings, original) {
            $('textarea', this).autocomplete(settings.autocomplete);
        }
    });

    $(".directionAutoComplete").editable(function (value, settings) {
        console.log(this);
        console.log(value);
        console.log(settings);
        return (value);
    }, {
        type: "autocomplete",
        indicator: 'Saving...',
        tooltip: "Enter a direction...",
        onblur: function (value, settings) {
            console.log(this);
            console.log(value);
            console.log(settings);
            return (value);
        },
        cancel: 'Cancel',
        submit: 'Save',
        autocomplete: {
            source: function (request, response) {
                $.ajax({
                    url: '../api/standarddirections/?q=' + request.term,
                    dataFilter: function (data) { return data; },
                    success: response
                });
            },
            minLength: 2
        }
    });

Here's some reference material:

score 0 · Accepted Answer · answered May 14 '13 at 22:40

For those running into this problem I have gotten it to work. I went with the growfield plugin just because the autogrow one was having some weird results (it worked, but the formatting looked off when I saved it so I just opted to go the easier route of using a different plugin.)

Here's my final code:

$.editable.addInputType('growfield', {
                element: function (settings, original) {
                    var textarea = $('<textarea>');
                    if (settings.rows) {
                        textarea.attr('rows', settings.rows);
                    } else {
                        textarea.height(settings.height);
                    }
                    if (settings.cols) {
                        textarea.attr('cols', settings.cols);
                    } else {
                        textarea.width(settings.width);
                    }
                    // will execute when textarea is rendered
                    textarea.ready(function () {
                        // implement your scroll pane code here
                    });
                    $(this).append(textarea);
                    return (textarea);
                },
                plugin: function (settings, original) {
                    // applies the growfield effect to the in-place edit field
                    $('textarea', this).growfield(settings.growfield);
                    $('textarea', this).autocomplete(settings.autocomplete);
                }
            });

 $(".directionAutoComplete").editable(function (value, settings) {
                console.log(this);
                console.log(value);
                console.log(settings);
                return (value);
            }, {
                type: "growfield",
                indicator: 'Saving...',
                tooltip: "Enter a direction...",
                onblur: function (value, settings) {
                    console.log(this);
                    console.log(value);
                    console.log(settings);
                    return (value);
                },
                cancel: 'Cancel',
                submit: 'Save',
                growfield: {},
                autocomplete: {
                    source: function (request, response) {
                        $.ajax({
                            url: '../api/standarddirections/?q=' + request.term,
                            dataFilter: function (data) { return data; },
                            success: response
                        });
                    },
                    minLength: 2
                }
            });

Jediitable, autocomplete and autogrow jquery not working

1 Answers1