Как совместить Jeditable и jQueryUI изменяемого размера?

Question

Как совместить Jeditable и jQueryUI изменяемого размера?

0

Я пытаюсь объединить Jeditable с jQuery UI resizable. Я становлюсь настолько близким, за исключением того, что кажется, что Jeditable делает что-то смешное с изменяемой по размеру функциональностью.

Проблема с приведенным ниже кодом заключается в том, что есть ошибка (см. Ниже), вызывающую функцию destroy для изменяемого размера. Я проверил, класс все еще там. Сначала я не включал уничтожение изменяемого размера, но не уничтожив его и повторно инициализируя его, после первого редактирования (или отмены) размер больше не работает. С ошибкой, отмена больше не работает (т.е. Сохраняет изменения).

Error: cannot call methods on resizable prior to initialization; attempted to call method 'destroy'

JSFiddle → http://jsfiddle.net/y8Ayd/

HTML

<div class="box">Hello</div>

CSS

.box {
  background-color: #ccf;
  height: 150px;
  width: 150px;
}

JS

$('.box').resizable();

$('.box').editable(
function (value, settings) {
    return (value);
}, 
{
    cancel: 'x',
    callback: function (value, settings) {
        $(this).resizable('destroy');
        $(this).resizable();
    },
    data: function (value, settings) {
        return value.replace('<div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>', '');
    },
    event: 'dblclick',
    onreset: function (settings, original) {
        $(this).resizable('destroy');
        $(this).resizable();
    },
    submit: 'ok'
});

Justin Giboney 20 нояб. 2013, в 04:40

Источник

Теги:

jquery

jquery-ui

jeditable

1 ответ

Ещё вопросы

Wolfgang K. · Answer 1 · 2013-11-28T14-54-00.000Z

То, что он говорит в сообщении об ошибке: вы пытаетесь вызвать resizable() или resizable ("destroy") до инициализации изменяемого размера.

Однако то, что вы пытаетесь сделать, не работает, потому что (jquery.jeditable.js) s редактируемые места внутри контента, ui-resizable-handle ui-resizable-e и т.д. Вы поняли это уже потому, что пытаетесь удалить это дерьмо из Значение через value.replace('

Возможность заключалась бы в том, чтобы обернуть div вокруг редактируемого и прикрепить изменчивый к нему.

Я составил небольшой образец для вас:

или на JSFiddle: http://jsfiddle.net/U4LUe/20/

HTML:

<div id="EditBox1" class="editbox">Enter some Text...</div><br/>

<div id="EditBox2" class="editbox">Enter some Text in an Area...</div>

CSS:

    .editboxwrapper {
      background-color: #ccf;
      width: 650px;
      min-height: 50px;
      padding: 0px;
      overflow: hidden;
    }
    .editbox {
      width: 100%;
      margin: 0px 10px 0px 0px;
    }

JQuery:

$(function () {
    //on $(document).ready(function () {...});
    ResizableEditbox({
        selector: 'EditBox1',
        wrapperClassName: 'editboxwrapper' //the class of the wrapper (for css-style)
    });
    ResizableEditbox({
        selector: 'EditBox2',
        wrapperClassName: 'editboxwrapper' //the class of the wrapper (for css-style)
    });
});
function ResizableEditbox(args) {
    var me = this;
    this.args = args;
    this.wrapperName = args.selector + 'Wrapper';

    $('#' + args.selector).editable(
        function (value, settings) { //This fakes a real call to the server!
          return (value);
        }, {
        type: 'textarea',
        tooltip: 'Click to edit...',
        cancel: 'x',
        id: this,
        callback: function (value, settings) {
            me.InitResizable(me.wrapperName);
        },
        data: function (value, settings) {
            me.RemoveResizable(me.wrapperName);
            var retval = value;
            return retval;
        },
        event: 'click',
        onreset: function (settings, original) {
            //var class = $(this).className;
            me.InitResizable(me.wrapperName);
        },
        submit: 'ok',
        onsubmit: function (settings, td) {
            var value = td.textContent;
            if (value == "") {
                alert('Please enter a value');
                return false;
            }
            else {
                return true;
            }
        }
    });
    this.CreateWrapper = function () {
        //create a div$('#' + args.selector).wrap("<div id='" + my.wrapperName + "' class='"     +     my.args.wrapperClassName + "'></div>");
        var wrapperDiv = $(document.createElement("div"));
        wrapperDiv.addClass(me.args.wrapperClassName);
        wrapperDiv[0].setAttribute("id", me.wrapperName);
        $('#' + args.selector).wrap(wrapperDiv[0].outerHTML); 
    };

    this.InitResizable = function(wrapperSelector) {
        var element = $('#' + wrapperSelector);
        if (element.length > 0) {
            if (!element.hasClass('ui-resizable-handle')) {
                element.resizable({
                    //Initialise
                });
            }
        }
    };
    this.RemoveResizable = function(wrapperSelector) {
        var element = $('#' + wrapperSelector);
        if (element.length > 0) {
            if (!element.hasClass('ui-resizable-handle')) {
                element.resizable('destroy');
            }
        }
    };
    me.CreateWrapper();
    me.InitResizable(me.wrapperName);
}