Как я могу динамически добавлять и удалять <fieldsets>, используя прототип и scriptaculous? - PullRequest
Новая
       9

Как я могу динамически добавлять и удалять <fieldsets>, используя прототип и scriptaculous?

2 голосов
/ 20 августа 2009

Я пишу базовое приложение для организации рецептов и хотел бы иметь возможность динамически добавлять дополнительные элементы в список ингредиентов с помощью Ajax.

Вот как выглядит один ингредиент <fieldset>: 

<fieldset id="ingredient_item_0">
    Ingredient <input id="ingredient_0" type="text" size="20" />
    <div id="ingredient_list_0" style="" class="autocomplete"></div>

    Amount <input id="amount_0" type="text" size="5" />

    Unit <input id="unit_0" type="text" size="20" />
    <div id="unit_list_0" class="autocomplete"></div>

    Notes <input id="notes_0" type="text" size="20" />

    <script type="text/javascript">
        new Ajax.Autocompleter('ingredient_0','ingredient_list_0','ingredients.php', {'method':'get', 'paramName': 't'});
        new Ajax.Autocompleter('unit_0','unit_list_0','units.php', {'method':'get', 'paramName': 't'});
    </script>
</fieldset>

Каков наилучший способ (с использованием прототипа и scriptaculous) добавить дополнительные копии этого <fieldset> с сопровождающим JavaScript на страницу, чтобы каждый из них имел уникальный идентификатор?

Ответы [ 2 ]

2 голосов
/ 21 августа 2009

Если у вас уже есть хороший шаблон HTML, проще всего использовать регулярное выражение для преобразования идентификаторов шаблона в уникальные идентификаторы, вставить шаблон HTML в нужное место в документе и проверить сценарии. Функция прототипа Element.insert выполняет всю работу по внедрению html и оценке скриптов для вас.

Допустим, у вас есть шаблон в скрытом элементе с именем ingredient_template, и вы отмечаете все места, где вам нужен уникальный идентификатор, с помощью XXX: 

<div id="ingredient_template" style="display:none;">
    <fieldset id="ingredient_item_XXX">
        Ingredient <input id="ingredient_XXX" type="text" size="20" />
        <div id="ingredient_list_XXX" style="" class="autocomplete"></div>
        ...
    </fieldset>
</div>

И скажем, вы хотите добавить его к элементу ingredients_list: 

<div id="ingredients_list"></div>
<button type="button" onclick="addIngredient()">Add Ingredient</button>

Вы можете использовать эту функцию javascript для поиска шаблона, заменить XXX s на следующий номер ингредиента и вставить его в ingredients_list: 

var ingredientCount = 0;
function addIngredient() {
    var html = $("ingredient_template").innerHTML.replace(/XXX/g, ingredientCount++);
    $("ingredients_list").insert(html);
}
1 голос
/ 05 сентября 2009

FYI лучший способ с прототипом назначить уникальный идентификатор элементу без идентификатора - использовать: 

$('element').identify();

В контексте того, что вы делаете, лично я бы использовал функциональность Template Prototype, которая бы преобразовывала код в нечто вроде этого: 

var myTemplate = new Template('<div id="ingredient_template" style="display:none;">'+
                              '<fieldset id="ingredient_item_#{num}">'+
                              'Ingredient <input id="ingredient_#{num}" type="text" size="20" />'+
                              '<div id="ingredient_list_#{num}" style="" class="autocomplete"></div>'+
                              '</fieldset>'+
                              '</div>');


function addIngredient(){
  ingredientCount ++;
  var vals = {num: ingredientCount};
  var htmlstr = myTemplate.evaluate(vals);
  $('ingredients_list').insert(htmlstr)
}

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

...