применения wrap

@boong · Регистрация: 11.01.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте, после применения wrap() к <input type="checkbox" > serialize() возвращает пустоту, без wrap() всё работает нормально, почему так выходит?
Заранее, спасибо.

@ostgals · 13.05.2011, 18:05

Хм. Я попробовал - возвращает все как надо.
Пример кода можно?

@boong · 13.05.2011, 18:12 **[ТС]**

Вот я написал плагин

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$.fn.Tree = function (j){
    var cfg = $.extend({checkbox: false, checked: true},j);
    var sprite = ['-10px -348px', '0 -348px', '-1px -234px', '-1px -220px', '-1px -206px'];
        
    $(this).addClass('tree').find('li:has(ul)').prepend('<span class="tree-ul"></span>').children('.tree-ul')
        .click(function(e){
            $(e.target).nextAll('ul').slideToggle('fast', function(){UlTree(e.target);});
        }).each(function(){UlTree(this);});
        
        function UlTree(el){
            $(el).css('background-position', (($(el).nextAll('ul:first').css('display'))!='block')?sprite[0]:sprite[1]);
        }
        
        if(cfg.checkbox != false){
            $(this).find('input:checkbox').attr('checked', cfg.checked).hide().wrap('<span class="treeCheckbox"></span>')
                .parent().css('background-position', (cfg.checked)?sprite[3]:sprite[2]);
                
            $(this).find('li > div').click(function(){
                    $(this).find('.treeCheckbox').each(function(){
                        var objChecked = $(this).closest('li').find('input:checkbox');
                            if(objChecked.attr('checked'))
                                objChecked.attr('checked', false).parent().css('background-position',sprite[2]);
                            else
                                objChecked.attr('checked', true).parent().css('background-position',sprite[3]);
                    });
                    checkPartialTree(this);
                });
            
            function checkPartialTree(obj){
                if (typeof obj == 'undefined' || !obj)
                    return;
                    
                var a = $(obj).parents('li');
                var b = a.find('input:checkbox');
                var c = a.find('input:checkbox:checked');
                var d = b.length == c.length;
                var e = a.parents('li').find('.treeCheckbox:first');
 
                if(!d && c.length == false)
                    e.css('background-position',sprite[2]).find('input:checkbox').attr('checked', d);
                else if(d)
                    e.css('background-position',sprite[3]).find('input:checkbox').attr('checked', d);
                else
                    e.css('background-position',sprite[4]);
            }
        }
        return this;
}

и при применении wrap() вот такая проблема
вот как визуально результат выглядет

@boong · 13.05.2011, 18:50 **[ТС]**

Если нужно могу плагин прокомментировать в коде

Добавлено через 30 минут
Но если input поместить в <span class="treeCheckbox"></span> без применения wrap то всё работает как задумано.

@ostgals · 13.05.2011, 19:00

По плагину вопросов нет. Видимых ошибок не замечено, сделано - добротно.
Но проверить мне не на чем

Было бы хорошо заполучить живой пример (и со спрайтом, разумеется).
Тогда я попытался бы отладить.

@boong · 13.05.2011, 19:48 **[ТС]**

сейчас соберу в один файл и скину в архиве

Добавлено через 40 минут
Хм... когда вынес на новый документ всё работает

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Дерево</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#tree").Tree({checkbox:true});                      
});
 
function Table(j){
    alert($('#'+j).serialize());
}
 
$.fn.Tree = function (j){
    var cfg = $.extend({checkbox: false, checked: true},j);
    var sprite = ['-10px -348px', '0 -348px', '-1px -234px', '-1px -220px', '-1px -206px'];
        
    $(this).addClass('tree').find('li:has(ul)').prepend('<span class="tree-ul"></span>').children('.tree-ul')
        .click(function(e){
            $(e.target).nextAll('ul').slideToggle('fast', function(){UlTree(e.target);});
        }).each(function(){UlTree(this);});
        
        function UlTree(el){
            $(el).css('background-position', (($(el).nextAll('ul:first').css('display'))!='block')?sprite[0]:sprite[1]);
        }
        
        if(cfg.checkbox != false){
            $(this).find('input:checkbox').attr('checked', cfg.checked).wrap('<span class="treeCheckbox"></span>')
                .parent().css('background-position', (cfg.checked)?sprite[3]:sprite[2]);
                
            $(this).find('li > div').click(function(){
                    $(this).find('.treeCheckbox').each(function(){
                        var objChecked = $(this).closest('li').find('input:checkbox');
                            if(objChecked.attr('checked'))
                                objChecked.attr('checked', false).parent().css('background-position',sprite[2]);
                            else
                                objChecked.attr('checked', true).parent().css('background-position',sprite[3]);
                    });
                    checkPartialTree(this);
                });
            
            function checkPartialTree(obj){
                if (typeof obj == 'undefined' || !obj)
                    return;
                    
                var a = $(obj).parents('li');
                var b = a.find('input:checkbox');
                var c = a.find('input:checkbox:checked');
                var d = b.length == c.length;
                var e = a.parents('li').find('.treeCheckbox:first');
 
                if(!d && c.length == false)
                    e.css('background-position',sprite[2]).find('input:checkbox').attr('checked', d);
                else if(d)
                    e.css('background-position',sprite[3]).find('input:checkbox').attr('checked', d);
                else
                    e.css('background-position',sprite[4]);
            }
        }
        return this;
}
</script>
</head>
<body>
<form action="" name="BDumper" id="BDumper" method="post" onsubmit="Table(this.id);return false;" >
<ul id="tree">
    <li><div><input type="checkbox" /><label class="backup f-table">Таблицы <span>[100]</span></label></div>
        <ul>
            <li><div><input type="checkbox" name="objDB[]" value="table1" /><label>table1 <span>[1 KB]</span></label></div></li>
            <li><div><input type="checkbox" name="objDB[]" value="table2" /><label>table2 <span>[1 KB]</span></label></div></li>
            <li><div><input type="checkbox" name="objDB[]" value="table3" /><label>table3 <span>[1 KB]</span></label></div></li>
            <li><div><input type="checkbox" name="objDB[]" value="table4" /><label>table4 <span>[1 KB]</span></label></div></li>
        </ul>
    </li>
</ul>
<input type="submit" value="Отправить" class="sumbits">
</form>
</body>
</html>

мне кажется где то конфликт получается, сейчас буду искать

@ostgals · 13.05.2011, 20:00

Сообщение от boong

где то конфликт получается, сейчас буду искать

Возможно и конфликт. Именно в таком виде, как приведено, чекбоксы неуправляемы (прикрыты сверху span-ами, которые поглощают клик). Но вообще все работает и сериализуется как надо.

Если найдете в чем проблема и ее решение, напишите, пожалуйста.
За хороший плагин благодарю.

@boong · 14.05.2011, 05:50 **[ТС]**

Сообщение от ostgals

чекбоксы неуправляемы (прикрыты сверху span-ами, которые поглощают клик)

да в примере они не управляем так как идет их замена и span выходит по верх чекбоксов и работает нормально checked и unchecked ставится как нужно.
Хорошо по поводу ошибки сообщю .

Добавлено через 9 часов 39 минут
Не знаю что именно было причиной такого поведения отследил всё что можно было даже в саму библиотеку залез ошибок не заметил, я дальше потом буду искать эту проблему просто интересно что за ф-ня

ostgals по просьбе сообщаю Вам , решил таким образом, изменил немного плагин, верней структуру построения чекбокса результат получаю задуманный, проблем .serialize() уже нет

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$.fn.Tree = function (j){
    var cfg = $.extend({checkbox: false, checked: true},j);
    var sprites = ['-10px -348px', '0 -348px', '-1px -234px', '-1px -220px', '-1px -206px'];
    
    $(this).addClass('tree').find('li:has(ul)').prepend('<span class="tree-ul"></span>').children('.tree-ul')
        .click(function(e){
            $(e.target).nextAll('ul').slideToggle('fast', function(){UlTree(e.target);});
        }).each(function(){UlTree(this);});
        
        function UlTree(el){
            $(el).css('background-position', (($(el).nextAll('ul:first').css('display'))!='block')?sprites[0]:sprites[1]);
        }
        
        if(cfg.checkbox != false){
            $(this).find('input:checkbox').attr('checked', cfg.checked).hide().before('<span class="treeCheckbox"></span>')
                .prev().css('background-position', (cfg.checked)?sprites[3]:sprites[2]);
                
            $(this).find('li > div').click(function(){
                    $(this).find('.treeCheckbox').each(function(){
                        var objChecked = $(this).closest('li').find('input:checkbox');
                            if(objChecked.attr('checked'))
                                objChecked.attr('checked', false).prev().css('background-position',sprites[2]);
                            else
                                objChecked.attr('checked', true).prev().css('background-position',sprites[3]);
                    });
                    checkPartialTree(this);
                });
            
            function checkPartialTree(obj){
                if (typeof obj == 'undefined' || !obj)
                    return;
                    
                var a = $(obj).parents('li');
                var b = a.find('input:checkbox');
                var c = a.find('input:checkbox:checked');
                var d = b.length == c.length;
                var e = a.parents('li').find('.treeCheckbox:first');
 
                if(!d && c.length == false)
                    e.css('background-position',sprites[2]).find('input:checkbox').attr('checked', d);
                else if(d)
                    e.css('background-position',sprites[3]).find('input:checkbox').attr('checked', d);
                else
                    e.css('background-position',sprites[4]);
            }
        }
        return this;
}

В принципе вопрос закрыт, но если кто-то сможет объяснить причину такого поведения, буду рад выслушать.

@boong · 16.05.2011, 00:17 **[ТС]**

Решил написать в эту тему так как вопрос касается этого объекта.
Есть плагин(дополнения к выше указному плагину) в котором есть функция (на JavaScript) задача которой преобразовать размер с байт в *KB, *MB, *GB, *TB, *PB, *EB и так далее, в этом же плагине есть вторая функция которая должна возвращать размер в байтах, вот тут и задумался я как лучше сделать метку или определения разряда(*KB, *MB, *GB ....) , думаю есть 3 способа может и больше:

значения 42.69 и все остальные выбранные тоисть которые checked с категории получаю в виде массива

1. Определить по префиксу (*KB, *MB ....) ну мне это не сильно нравиться
2. Поместить метку в коде 0-8 (Пример для наглядности: которая соответствует значению в массиве array = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']) которя будет постоянно display:none;
3. можно поместить место метки размер в байтах . и т.д
куки и аякс не буду применять для получения метки или размера

Так вот как Вы посоветую те или предложите что-то другое, просто мне не очень нравятся эти 3 способы?

вот визуально должно меняться размер папки, в зависимости от выбранных объектов как на скриншоте

@boong · 17.05.2011, 06:38 **[ТС]**

Вопрос определения размера папки закрыт!

@boong · 21.05.2011, 23:09 **[ТС]**

ostgals, кстати если интересно то в плагине я заметил баг при checked и unchecked не ветки дерева, а всех элементов поочередно, состояние рartia (частичное выделение) не изменяется могу кинуть решение, что-бы потом вопросов не было

Новые блоги и статьи Все статьи Все блоги /
Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .

@boong 154 / 124 / 11 Регистрация: 11.01.2010 Сообщений: 434

	применения wrap 13.05.2011, 17:52. Показов 2508. Ответов 10 Метки checkbox, input, serialize, wrap (Все метки) Здравствуйте, после применения wrap() к <input type="checkbox" > serialize() возвращает пустоту, без wrap() всё работает нормально, почему так выходит? Заранее, спасибо. 0

@ostgals 886 / 681 / 101 Регистрация: 23.01.2009 Сообщений: 1,582
	13.05.2011, 18:05
	Хм. Я попробовал - возвращает все как надо. Пример кода можно? 1

@boong 154 / 124 / 11 Регистрация: 11.01.2010 Сообщений: 434
	13.05.2011, 18:50 [ТС]
	Если нужно могу плагин прокомментировать в коде Добавлено через 30 минут Но если input поместить в <span class="treeCheckbox"></span> без применения wrap то всё работает как задумано. 0

@ostgals 886 / 681 / 101 Регистрация: 23.01.2009 Сообщений: 1,582
	13.05.2011, 19:00
	По плагину вопросов нет. Видимых ошибок не замечено, сделано - добротно. Но проверить мне не на чем Было бы хорошо заполучить живой пример (и со спрайтом, разумеется). Тогда я попытался бы отладить. 1

@boong 154 / 124 / 11 Регистрация: 11.01.2010 Сообщений: 434
	16.05.2011, 00:17 [ТС]
	Решил написать в эту тему так как вопрос касается этого объекта. Есть плагин(дополнения к выше указному плагину) в котором есть функция (на JavaScript) задача которой преобразовать размер с байт в KB, MB, GB, TB, PB, EB и так далее, в этом же плагине есть вторая функция которая должна возвращать размер в байтах, вот тут и задумался я как лучше сделать метку или определения разряда(KB, MB, GB ....) , думаю есть 3 способа может и больше: значения 42.69* и все остальные выбранные тоисть которые checked с категории получаю в виде массива 1. Определить по префиксу (KB, MB ....) ну мне это не сильно нравиться 2. Поместить метку в коде 0-8 (Пример для наглядности: которая соответствует значению в массиве array = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']) которя будет постоянно display:none; 3. можно поместить место метки размер в байтах . и т.д куки и аякс не буду применять для получения метки или размера Так вот как Вы посоветую те или предложите что-то другое, просто мне не очень нравятся эти 3 способы? вот визуально должно меняться размер папки, в зависимости от выбранных объектов как на скриншоте Миниатюры 0

@boong 154 / 124 / 11 Регистрация: 11.01.2010 Сообщений: 434
	17.05.2011, 06:38 [ТС]
	Вопрос определения размера папки закрыт! 0

@boong 154 / 124 / 11 Регистрация: 11.01.2010 Сообщений: 434
	21.05.2011, 23:09 [ТС]
	ostgals, кстати если интересно то в плагине я заметил баг при checked и unchecked не ветки дерева, а всех элементов поочередно, состояние рartia (частичное выделение) не изменяется могу кинуть решение, что-бы потом вопросов не было 0