プロトタイプとscriptaculousを使用して<fieldsets>を動的に追加および削除するにはどうすればよいですか？

Question

私は基本的なレシピ編成アプリケーションを作成しています.Ajaxを使用して、成分のリストに追加項目を動的に追加したいと考えています。

これは、1つの成分<fieldset>は、次のようになります。ページに付随するJavaScriptはそれぞれが持っていることを確認することで、この<fieldset>の追加コピーを追加する（プロトタイプとScriptaculousのを使用して）最良の方法は何

<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> 

ユニークなIDですか？

Answer 1

あなたが既に素敵なhtmlテンプレートを持っているならば、regexpを使ってユニークIDにテンプレートidを変換し、htmlをドキュメントの適切な場所に注入し、スクリプトを評価するのが最も簡単です。 PrototypeのElement.insert関数は、htmlをインジェクトしてスクリプトを評価するすべての作業を行います。

だからあなたは隠されたdiv要素内のテンプレートを持っていると言うingredient_templateと呼ばれ、あなたがXXXで一意のIDを必要とするすべての場所をマーク：

<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); 
} 

Answer 2

IDなし要素に固有のIDを割り当てるためのプロトタイプを持つFYI最良の方法は、使用することです：

$('element').identify(); 

あなたがやっていることとの関連では、個人的に私が利用するだろうただそれはいつも同じことを達成するための多くの方法をtheresの示すためにジャスティンのコードで間違っ全く

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) 
} 

は何も、このような何かにコードを変換しますPrototypeのTemplate機能の。あなたの場合、操作する変数は1つだけですが、テンプレートは複数の置換を許すので、複数の正規表現の置き換えよりはるかに洗練されたソリューションになる可能性があります。