1 Тема від truesupport

  • Звідки: Львів
  • Дата реєстрації: 15.08.2012
  • Повідомлень: 355
    • Репутація: 191

Тема: jquery resizable()

В мене є скріпт завдання якого загрузити деякий HTML.

function loadUiById(id) {

    $("#UiListModal").modal('hide');
    $("#workspace").html("");
    $.getJSON("/Home/GetUI", function (ui) {
        $.each(ui, function (i) { 
            if (this.id == id) {
                $("#workspace").append(this.data);
                $(".panel")
                    .resizable({
                        minWidth: 200,
                        maxWidth: 400,
                        // some bugs with it
                        // containment: "#workspace",

                        // panel move
                    }).draggable({
                        containment: "#workspace"
                        // textbox droped into panel
                    }).droppable({
                        accept: "#mTextBox",
                        greedy: true,
                        drop: function (ev, ui) {
                            $(this).append(textbox);
                            var height = $(this).height();
                            height += 30;
                            $(this).height(height);
                    }
                });
                
                $(".input_wrapper").draggable("destroy").draggable();
            }
        });
    });

}

Так вот в коді працює все крім ресайзу панелі, я пробував писати .resizable("destroy") перед цим але це не дає результату. Ніхто часом не знає через що це може бути. А і ще хотів сказати що якщо напряму написати в фаербаг

$(".panel").resizable()

також нічого не відбувається

2 Відповідь від miroslav.chandler

  • Дата реєстрації: 03.08.2012
  • Повідомлень: 757
    • Репутація: 344

Re: jquery resizable()

до фронтенду, я маю дуже мало відношення, але попробуйте .css()

miroslav.chandler вебсайт

3 Відповідь від funivan

  • funivan
  • funivan
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 24.09.2012
  • Повідомлень: 2 005
    • Репутація: 927

Re: jquery resizable()

Наскілкьи я зрозумів у елементі #workspace має бути панель .panel Вона підргружається динамічно.
Якісь помилки показуються у консолі.
перш за все попробуйте 

$(".panel").css({border:'1px solid red'})

результат напишіть сюди ;)

funivan вебсайт

4 Відповідь від truesupport

  • Звідки: Львів
  • Дата реєстрації: 15.08.2012
  • Повідомлень: 355
    • Репутація: 191

Re: jquery resizable()

funivan написав:

Наскілкьи я зрозумів у елементі #workspace має бути панель .panel Вона підргружається динамічно.
Якісь помилки показуються у консолі.
перш за все попробуйте 

$(".panel").css({border:'1px solid red'})

результат напишіть сюди ;)


Рамка додається, помилок нема. Попробую описати цю функцію детальніше.


В мене є метод на сервері який повертає массив в такому форматі.


Запит

GET /Home/GetUI HTTP/1.1
Host: localhost:6512
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/20100101 Firefox/17.0
Accept: application/json, text/javascript, */*; q=0.01
Accept-Language: ru-RU,ru;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
X-Requested-With: XMLHttpRequest
Referer: http://localhost:6512/
Cookie: vc=2; __gads=ID=6acab5fb8b4c2654:T=1354044980:S=ALNI_MbFyPpBWimXp1k1H5REsm5j7XAhPQ

Відповідь

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/8.0
X-AspNetMvc-Version: 4.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?YzpcdXNlcnNc0LDQtNC80LjQvdC40YHRgtGA0LDRgtC+0YBcZG9jdW1lbnRzXHZpc3VhbCBzdHVkaW8gMjAxMlxQcm9qZWN0c1xNdmNBcHBsaWNhdGlvbjFcTXZjQXBwbGljYXRpb24xXEhvbWVcR2V0VUk=?=
X-Powered-By: ASP.NET
Date: Sat, 08 Dec 2012 20:20:27 GMT
Content-Length: 8031

Тіло відповіді, тут під катом через те що малоінформативно а займає багато місця фактичноце це масив обєектів де data - це голий html. Причом уже з класами такими як ui-resizable.

{ id: id, name: name, data: data }


▼Прихований текст
[{"id":51,"data":"\n        \u003ch2\u003eРобоча область\u003c/h2\u003e\n    \u003cdiv style=\"position: absolute; top: 149px; left: 591px; width: 235px; height: 151px;\" class=\"panel ui-resizable ui-draggable ui-droppable\"\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-e\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-s\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\"\u003e\u003c/div\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003c/div\u003e\u003cdiv style=\"position: relative; left: 200px; top: 347px;\" class=\"input_wrapper ui-draggable\"\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003c/div\u003e\u003cdiv style=\"position: relative; left: 510px; top: 218px;\" class=\"input_wrapper ui-draggable\"\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003c/div\u003e","name":"with_attributes"},{"id":52,"data":"\n        \u003ch2\u003eРобоча область\u003c/h2\u003e\n    \u003cdiv style=\"left: 429px; top: 245px; position: absolute; width: 360px; height: 164px;\" class=\"panel ui-resizable ui-draggable ui-droppable\"\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-e\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-s\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\"\u003e\u003c/div\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003c/div\u003e\u003cdiv style=\"left: 540px; top: 33px;\" class=\"panel ui-resizable ui-draggable ui-droppable\"\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-e\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-s\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"position: relative; left: 600px; top: 268px;\" class=\"input_wrapper ui-draggable\"\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003c/div\u003e","name":"ква ква"},{"id":53,"data":"\n        \u003ch2\u003eРобоча область\u003c/h2\u003e\n    \u003cdiv style=\"position: relative; left: 2px; top: 52px;\" class=\"input_wrapper ui-draggable\"\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003c/div\u003e\u003cdiv style=\"left: 567px; top: -52px;\" class=\"panel ui-resizable ui-draggable ui-droppable\"\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-e\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-s\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\"\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv style=\"left: 465px; top: 373px; position: absolute; width: 302px; height: 195px;\" class=\"panel ui-resizable ui-draggable ui-droppable\"\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-e\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-s\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\"\u003e\u003c/div\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003c/div\u003e","name":"232"},{"id":54,"data":"\n        \u003ch2\u003eРобоча область\u003c/h2\u003e\n    \u003cdiv style=\"position: relative; left: 44px; top: 42px;\" class=\"input_wrapper ui-draggable\"\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003c/div\u003e\u003cdiv style=\"height: 130px; left: 487px; top: -17px;\" class=\"panel ui-resizable ui-draggable ui-droppable\"\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-e\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-s\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\"\u003e\u003c/div\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003c/div\u003e","name":"4141241"},{"id":55,"data":"\n        \u003ch2\u003eРобоча область\u003c/h2\u003e\n    \u003cdiv style=\"position: relative; left: 602px; top: 51px;\" class=\"input_wrapper ui-draggable\"\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003c/div\u003e\u003cdiv style=\"position: absolute; top: 210px; left: 397px; width: 331px; height: 238px;\" class=\"panel ui-resizable ui-draggable ui-droppable\"\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-e\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-s\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\"\u003e\u003c/div\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003c/div\u003e\u003cdiv style=\"left: 464px; top: 138px;\" class=\"panel ui-resizable ui-draggable ui-droppable\"\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-e\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-s\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\"\u003e\u003c/div\u003e\u003c/div\u003e","name":"qq"},{"id":56,"data":"\n        \u003ch2\u003eРобоча область\u003c/h2\u003e\n    \u003cdiv class=\"panel ui-resizable ui-draggable ui-droppable\"\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-e\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-s\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\"\u003e\u003c/div\u003e\u003c/div\u003e","name":"123"},{"id":57,"data":"\u003ch2\u003eРобоча область\u003c/h2\u003e\u003cdiv style=\"position: relative; left: 256px; top: 33px;\" class=\"input_wrapper ui-draggable\"\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003c/div\u003e","name":"12312"},{"id":58,"data":"\u003ch2\u003eРобоча область\u003c/h2\u003e\u003cdiv style=\"left: 845.933px; top: 90px; position: absolute; width: 354px; height: 152px;\" class=\"panel ui-resizable ui-draggable ui-droppable\"\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-e\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-s\"\u003e\u003c/div\u003e\u003cdiv style=\"z-index: 1000;\" class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\"\u003e\u003c/div\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003c/div\u003e\u003cdiv style=\"position: relative; left: 113px; top: 345px;\" class=\"input_wrapper ui-draggable\"\u003e\u003cinput class=\"regular\" type=\"text\"\u003e\u003c/div\u003e","name":"вовочка дурак"}]

Функція яка обробляє це все наразі виглядає так.


Сам знаю що так діставати дані неможна ні при яких обставинах, але зараз не про швидкодійність :)

function load_ui_by_id(id) {

    $("#UiListModal").modal('hide'); // це нам нецікаво :)
    $.getJSON("/Home/GetUI", function (ui) {
        $.each(ui, function (i) {
            if (this.id == id) {
                $("#workspace").html(this.data); // тут добавляєм HTML в наш блок воркспейс
                init_after_loading(); // тут творяться чудеса
            }


        });
    });
function init_after_loading() {

    $(".panel")
        .resizable("destroy")
        .resizable({ // а це не працює
            minWidth: 200,
            maxWidth: 400,
            // some bugs with it
            // containment: "#workspace",

            // panel move
        }).draggable({ // працює драгабл
            containment: "#workspace"
            // textbox droped into panel
        }).droppable({ // і дропабл
            accept: "#mTextBox",
            greedy: true,
            drop: function (ev, ui) {
                $(this).append(textbox);
                var height = $(this).height();
                height += 30;
                $(this).height(height);
            }
        });

    $(".input_wrapper").draggable("destroy").draggable({ containment: "#workspace" });

    $(".panel").css({ border: '1px solid red' }); // навіть рамочка додається
}

5 Відповідь від funivan

  • funivan
  • funivan
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 24.09.2012
  • Повідомлень: 2 005
    • Репутація: 927

Re: jquery resizable()

1. прокачайте останній джквері повністю з плагіном resizable
2. Якщо не допоможе, заберіть все крім resizable
3. http://api.jqueryui.com/resizable/#method-enable  попробуйте це)
4. В кінцеовму результаті попробуйте не підгружати HTML аяксом а створіть сторінку на якій буде ваш HTML код і там метод resizable
Думаю один з пунктів має точно виконатись)

Подякували: truesupport1

funivan вебсайт

6 Відповідь від truesupport

  • Звідки: Львів
  • Дата реєстрації: 15.08.2012
  • Повідомлень: 355
    • Репутація: 191

Re: jquery resizable()

Цікавий факт якщо змінити функцію на таку, тобто 2 рази виконувати те саме то все працює. Ну але це якось не по фен-шую, але додаткова інформація ніколи лишньою не буває.


function init_after_loading() {

    $(".panel")
        .resizable("destroy")
        .resizable({
            
            minWidth: 200,
            maxWidth: 400,
             //some bugs with it
             //containment: "#workspace",

             //panel move
        })
        .draggable({
            containment: "#workspace"
            // textbox droped into panel
        })
        .droppable({
            accept: "#mTextBox",
            greedy: true,
            drop: function (ev, ui) {
                $(this).append(textbox);
                var height = $(this).height();
                height += 30;
                $(this).height(height);
            }
        });

    $(".input_wrapper").draggable("destroy").draggable({ containment: "#workspace" });


    $(".panel")
        .resizable("destroy")
        .resizable({

            minWidth: 200,
            maxWidth: 400,
            //some bugs with it
            //containment: "#workspace",

            //panel move
        })
        .draggable({
            containment: "#workspace"
            // textbox droped into panel
        })
        .droppable({
            accept: "#mTextBox",
            greedy: true,
            drop: function (ev, ui) {
                $(this).append(textbox);
                var height = $(this).height();
                height += 30;
                $(this).height(height);
            }
        });

    $(".input_wrapper").draggable("destroy").draggable({ containment: "#workspace" });

}

7 Відповідь від funivan Востаннє редагувалося funivan (09.12.2012 12:14:07)

  • funivan
  • funivan
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 24.09.2012
  • Повідомлень: 2 005
    • Репутація: 927

Re: jquery resizable()

Скоріше всього у вас елементи не встигли створитись а ви уже до них хочете привязати певні дії

 $("#workspace").html(this.data); // тут добавляєм HTML в наш блок воркспейс
//тут або добавте паузу або пошукайте в jquery як перевірити дом елемент ініційовано
init_after_loading(); // тут творяться чудеса

І тоді треба буде тільки 1н раз викликати код)) Дотримуйтесь принципу DRY ;)

До речі ви можете використати метод Live  коли мишка наводиться на .panel Робити її resizable =)

funivan вебсайт

8 Відповідь від Patron Востаннє редагувалося Patron (09.12.2012 12:34:27)

  • Patron
  • Patron
  • Заблокований
  • Поза форумом
  • Дата реєстрації: 22.05.2012
  • Повідомлень: 412
    • Репутація: 147

Re: jquery resizable()

$.getJSON("/Home/GetUI", function (ui) {
        $.each(ui, function (i) {
            if (this.id == id) {
                $("#workspace").html(this.data); // тут добавляєм HTML в наш блок воркспейс
                init_after_loading(); // тут творяться чудеса
            }
 
 
        });
    });

З вашого коду не зрозумієш в чому проблема. Викладіть весь код і тоді кожен з нас зможе протестувати в себе на локалці і спробуємо разом знайти проблему.

9 Відповідь від truesupport

  • Звідки: Львів
  • Дата реєстрації: 15.08.2012
  • Повідомлень: 355
    • Репутація: 191

Re: jquery resizable()

Помилка була в jQueryUI 1.8.2, треба було виконувати поради funivan по порядку :).

А приклад я зараз додам.

Там в кінці щоб працювало в 1.8.2 треба розкоментувати цей участок

 // For jQuery UI 1.8.2
                    //.resizable("destroy")
                    //.resizable({
                    //    minWidth: 200,
                    //    maxWidth: 400,
                    //});
Post's attachments

simple_with_php.zip 17.99 kb, 402 downloads since 2012-12-09