получить текст из тега li и id при перетаскивания
Добрый вечер! Прошу помочь в данном вопросе. Есть такая задача.
есть список сотрудников <ul> <li id="номер id сотрудника в БД" class="res">Иванов И. И.</li> <li id="номер id сотрудника в БД" class="res">Иванов И. И.</li> <li id="номер id сотрудника в БД" class="res">Иванов И. И.</li> ... ... </ul> Список может быть длинным Есть блоки бригад их может быть тоже не определенное количество. выводятся из БД с уникальным id Пример: <ul id="id номер бригады в БД"> </ul> <ul id="id номер бригады в БД"> </ul> <ul id="id номер бригады в БД"> </ul> <ul id="id номер бригады в БД"> </ul> .... ... Мне нужно каждое утро распределять людей по бригадам. И хочу реализовать это перетаскиванием из общего списка в блоки бригад посредством jquery Sortable вот пример Пример Так вот это все легко но самое главное после того как я перетащил, я посредством ajax должен сохранить данные в БД. для этого мне нужно отправлять через ajax id-работника и id-бригады чтобы обработать и добавить через php файл в БД. Но у меня этот момент уже неделю не получаеться. Прошу помогите |
Так при отправлении формы собирайте все ID бригад и помещенных в них ID сотрудников. Вот этот набор и отправляйте на сервер.
|
Цитата:
|
Пусть в каком либо контейнере с ID "brigade" находятся списки в которые переместили сотрудников. В обработчике отправления формы:
var data = $.map($('#brigade ul'), function(a) {
return {'brigade' : {
[a.id]: $.map($(a).children(), function(b) {
return b.id
})
}
}
})
data для отправления, в ней под ключами brigade будет содержаться ID бригады, в котором будет вложенный массив ID сотрудников. Вот только как вы на сервере это будете вставлять/модифицировать ... |
Юсуф,
а еще проще, не оперировать id атрибутами, а поместить скрытые поля формы с именами и значениями, так, чтобы они уже создавали нужную структур массива. То есть UL уже в форме со скрытыми полями, а в них перемещаются LI со скрытыми полями. Останется просто взять поля формы и отправить их. |
Цитата:
$( function() {
$( "#zveno ul" ).sortable({
connectWith: ".connectedSortable",
stop: function() {
var user_obj = $('li').text();
$.ajax({
type: "POST",
url: "zveno.php",
data: {script: user_obj}
}).done(function(result)
{
alert(result);
});
}
}).disableSelection();
} );
<div id="zveno">
<ul id="brigade1" class="connectedSortable">
<li id="res" class="ui-state-highlight"> #100 Иванов И. И.</li>
<li id="res" class="ui-state-highlight">#754 Петров В. А.</li>
<li id="res" class="ui-state-highlight">#687 Харитонов С. К.</li>
</ul>
<ul id="brigade2" class="connectedSortable">
<li id="res" class="ui-state-highlight">#66 Семенов А. А.</li>
<li id="res" class="ui-state-highlight">#78 Степанко О. Р.</li>
<li id="res" class="ui-state-highlight">#87 Чумин Е. Г.</li>
</ul>
<ul id="brigade3" class="connectedSortable">
</ul>
</div>
Сейчас он мне выдает список всех сотрудников из всех блоков. А как получить список каждого блока brigade1 brigade2 brigade3 ... ... Чтобы он отправлял два значение например var brigade = ( id="brigade3") и var text = (весь список как он есть из блока brigade3) |
Странный однако список у вас, где id сотрудников в нем?
Сделайте лучше так:
<form>
<ul id="23">
<li><input type="hidden" name="brigade[n]" value="23"/>Иванов</li>
<li><input type="hidden" name="brigade[n]" value="15"/>Петров</li>
<li><input type="hidden" name="brigade[n]" value="63"/>Сидоров</li>
</ul>
<ul id="16">
<li><input type="hidden" name="brigade[n]" value="22"/>Никонов</li>
<li><input type="hidden" name="brigade[n]" value="18"/>Абрамов</li>
</ul>
<button>Send</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('form').submit(function(e) {
e.preventDefault();
$.each($(this).find('input'), function() {
this.name = this.name.replace('n', this.closest('ul').id)
});
alert(JSON.stringify($(this).serializeArray()))
})
</script>
Выведите полученный массив на сервере, все будет как раз удобно для обратки. |
| Часовой пояс GMT +3, время: 03:14. |