jQuery « UI Sortable + AJAX

Есть следующая структура:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<table id="components">
  <tbody id="component_1" class="side_sort_1">
    <tr id="sort">.......</tr>
    <tr id="sort">........</tr>
    <tr id="non-sort">
      <input type="button" value="Add new TR" />
    </tr>
  </tbody>
</table>
<input type="button" value="Add new Component" />
 


По дефу всегда есть при перезагрузке страницы.
При нажатии на "Add new TR" -> вставляем новый TR с id="sort" в данный контейнер-тбоди.
При нажатии на "Add new Component" -> через AJAX'овский .get вставляем новый с id="component_2" / 3, 4, 5, etc

В JS следующее:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

jQuery(document).ready(function() {
    jQuery("tbody[class^='side_sort_']").sortable({
        items: 'tr[class="sort"]',
        axis: 'y',
        cursor: "move",
        connectWith: this
    });
});
 


С JS/JQuery пока ни на ты, ни на вы. Долго думал чего данный код работает только на первый component_1, который стоит по дефу. А на подгружаемые аяксом - ноль реакции.

Дело в jQuery(document).ready, если я все правильно понял. Как исправить данный код, чтобы он действовал на все остальные добавляемые tbody? Прочитал про .sortable('refresh') - тоже не помагает. Как данный код присобачить к .live методу? ) Или может быть можно к какому-то отдельному элементу live приделать. Буду рад ответу человека, который сталкивался с подобным
0
ajax jquery sortable ui

1 ответов

А не работало потому, что у вас много одинаковых ID. ID должен быть уникальным - на странице должен быть только один элемент с ID='sort', потому и работало только с первым. Именно это и отличает id от class - один и тот же class может быть присвоен какому угодно количеству элементов, а id - только одному.

0

$.get(url, function(data) {
        $(data).insertBefore("#component_" + count + " #alternativeSelect");
        jQuery("tbody[class^='side_sort_']").sortable({
            items: 'tr[class^="rts_sortable_"]',
            axis: 'y',
            cursor: "move",
            connectWith: this
        });
});
 

после глубокого отчаяния сделал это и заработало )
1