Как сделать многословные поля доступными для редактирования из базы данных?

Question

Итак, у меня есть база данных, насчитывающая около 100 записей, эти записи отображаются на веб-сайте, где вы должны их редактировать.

Сформированный результат выглядит следующим образом на данный момент:

<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="1" data-url="test.php" data-title="Enter permission">bukkit.command.help</a></div> 
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="2" data-url="test.php" data-title="Enter permission">essentials.afk</a></div> 
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="3" data-url="test.php" data-title="Enter permission">essentials.list</a></div> 
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="4" data-url="test.php" data-title="Enter permission">essentials.sethome.bed</a></div> 
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="5" data-url="test.php" data-title="Enter permission">essentials.tpaccept</a></div> 
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" data-type="text" data-pk="6" data-url="test.php" data-title="Enter permission">itemcase.buy</a></div> 

Как вы можете или, возможно, не догадались, это minecarft разрешения (однако irrelevent к этому вопросу).

Чтобы отредактировать их, я хотел бы использовать X-editable, но поскольку все они имеют одинаковый идентификатор, они не могут быть отредактированы (кроме первой записи).

Я мог бы изменить генерацию так, чтобы каждый из них получал уникальный идентификатор, как элемент data-pk. Однако это может вызвать проблемы в файле javascript, так как тогда мне нужно будет добавить новый javascript для каждого элемента.

Текущий мой Javascript, как это:

$.fn.editable.defaults.mode = 'inline'; 
$('#permission').editable(); 

Но, как упоминалось ранее, это будет работать только для первого результата. Я мог бы статически определять каждый элемент для редактирования, но это невозможно, так как количество данных неизвестно заранее и динамично.

Как я могу создавать поля, подобные редактируемым?

Answer 1

Я думаю, что ваша структура

<div class="row"> 
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" ....> 
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#" id="permission" ....> 
</div> 

Дайте каждому элементу уникальный идентификатор
Смените <div class="row"> в <div class="row" id="permissions">
наконец изменить вас JavaScript код

$('#permissions a').editable(); 

Изменение JavaScript для этой линии код будет улавливать все элементы <a> в элементе #permissions. Взгляните на this для получения дополнительной информации.

Answer 2

Оберните свой контент в родительский элемент, как показано ниже.

<div id="parent"> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <a href="#" id="permission" data-type="text" data-pk="1" data-url="test.php" data-title="Enter permission">bukkit.command.help</a> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <a href="#" id="permission" data-type="text" data-pk="2" data-url="test.php" data-title="Enter permission">essentials.afk</a> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <a href="#" id="permission" data-type="text" data-pk="3" data-url="test.php" data-title="Enter permission">essentials.list</a> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <a href="#" id="permission" data-type="text" data-pk="4" data-url="test.php" data-title="Enter permission">essentials.sethome.bed</a> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <a href="#" id="permission" data-type="text" data-pk="5" data-url="test.php" data-title="Enter permission">essentials.tpaccept</a> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <a href="#" id="permission" data-type="text" data-pk="6" data-url="test.php" data-title="Enter permission">itemcase.buy</a> 
    </div> 
</div> 

Используйте приведенный ниже селектор для перебора гиперссылок и вызова функции X-editable по отдельности.

$.each($('#parent div.col-md-4>a'), function(item){ 
    item.editable(); 
}) 

Answer 3

Спасибо за предложения, они заставили меня понять, что я могу просто изменить идентификатор класса и выберите «.permission» вместо „#permission“.