Перенумеровать поля имени тега ввода после использования jQuery sortable

Question

Я использую сортируемый метод jQuery для повторного набора групп входных тегов. Атрибут name этих тегов имеет вид foo[n] (при наличии одного входа в группе) или foo[n][fieldname] (где в группе есть несколько входов), где n - некоторое число.

У меня возникла проблема в том, что при отправке общей формы порядок входящих групп, которые хранятся в базе данных с помощью кода PHP, находится в порядке индексов, а не в порядке на экране. Мне нужно обновить индексы имен, чтобы отразить результаты сортировки экрана. Я точно не знаю, как это сделать. Документация для jQuery не особенно полезна.

Сгенерированный HTML будет выглядеть примерно так:

<ul id="deepwoods_meta_rightbutton-repeatable" class="deepwoods_metabox_repeatable"> 
    <li><span class="sort hndle">||</span><textarea name="deepwoods_meta_rightbutton[0]" id="deepwoods_meta_rightbutton" cols="60" rows="4">(some text)</textarea><a class="repeatable-remove button" href="#">-</a></li> 
    <li> (same as above, except [0] replaced with [1]) </li> 
    ... 
    <li> (same as above, except [0] replaced with [n]) </li> 
</ul> 

Или это может быть, как это:

<ul id="deepwoods_meta_buybuttons-repeatable" class="deepwoods_metabox_repeatable"> 
    <li><span class="sort hndle">||</span> 
    <div class="form-table deepwoods-metabox div-as-table"> 
     <div class="div-as-table-row"> 
      <span class="span-as-th"><label for="deepwoods_meta_buybuttons">Link</label</span> 
      <span class="span-as-td"><input type="text" name="deepwoods_meta_buybuttons[0][thelink]" id="deepwoods_meta_buybuttons" value="..." size="60" class="scrollable" /></span></div> 
     <div class="div-as-table-row"> 
      <span class="span-as-th"><label for="deepwoods_meta_buybuttons">Button</label></span> 
      <span class="span-as-td"><input type="text" name="deepwoods_meta_buybuttons[0][thebutton]" id="deepwoods_meta_buybuttons" value="..." size="60" class="scrollable" /></span></div> 
     <div class="div-as-table-row"> 
      <span class="span-as-th"><label for="deepwoods_meta_buybuttons">Text</label></span> 
      <span class="span-as-td"><textarea name="deepwoods_meta_buybuttons[0][text]" id="deepwoods_meta_buybuttons" cols="60" rows="4">...</textarea></span></div></div><a class="repeatable-remove button" href="#">-</a></li> 
    <li> (much like the previous list item, but [0] replaced with [1]) </li> 
    ... 
    <li> nth ([n]) item </li> 
</ul> 

То есть каждый из сортируемых элементов списка может содержать либо поле ввода сигнала (input, textarea или select), или каждый элемент списка может содержать группу элементов ввода, textarea или select, которые идут вместе. Подумайте об этом как о векторе простых значений масштабирования или о векторе значений объекта.

У меня есть несколько (отдельно сортируемых) блоков в форме. Я использую пирсовскую JQuery код, который выглядит следующим образом:

jQuery('.deepwoods_metabox_repeatable').sortable({ 
      opacity: 0.6, 
      revert: true, 
      cursor: 'move', 
      handle: '.sort', 
      containment: 'parent' 
}); 

Я думаю, что нужно добавить обработчик события обновления, но я не уверен, как procede оттуда. Документация jQuery не ясна (мне).

Answer 1

У вас есть 2 варианта:

Снимите все индексы из input тегов и формы будут посылать их по порядку по умолчанию

ИЛИ

Используйте stop событие для изменения названия:

jQuery('.deepwoods_metabox_repeatable').sortable({ 
    stop: function (event, ui) { 
     updateNames($(this)) 
    } 
}) 

function updateNames($list) { 
    $list.find('li').each(function (idx) { 
     var $inp = $(this).find('input'); 
     $inp.each(function() { 
      this.name = this.name.replace(/(\[\d\])/, '[' + idx + ']');    
     }) 
    }); 
} 

ДЕМО: http://jsfiddle.net/gszfD/

Answer 2

Через пару часов, пресмыкающийся с Firebug, я разработал решение, которое, похоже, работает. Вероятно, не особенно элегантный и, вероятно, чрезмерно многословный.

jQuery('.deepwoods_metabox_repeatable').sortable({ 
    opacity: 0.6, 
    revert: true, 
    cursor: 'move', 
    handle: '.sort', 
    containment: 'parent', 
    update: function(event,ui){ renumber(ui.item); } 
}); 

function renumber(item) { 
    ul = item[0].parentNode; 
    jQuery('li',ul).each(function(index,element) { 
    renumber_helper(index,element); 
    }); 
} 

function renumber_helper(index,element) { 
    inputs = jQuery('input', element); 
    for (j = 0; j < inputs.length; j++) { 
    input = inputs[j]; 
    name = input.name; 
    input.name = name.replace(/(\d+)/,index); 
    } 
    textareas = jQuery('textarea',element); 
    for (j = 0; j < textareas.length; j++) { 
    textarea = textareas[j]; 
    name = textarea.name; 
    textarea.name = name.replace(/(\d+)/,index); 
    } 
    selects = jQuery('select',element); 
    for (j = 0; j < selects.length; j++) { 
    select = selects[j]; 
    name = select.name; 
    select.name = name.replace(/(\d+)/,index); 
    } 
}