如何動態添加和刪除<fieldsets>使用原型和scriptaculous？

我正在編寫基本的食譜組織應用程序，我希望能夠使用Ajax動態地將其他項添加到配料列表中。如何動態添加和刪除<fieldsets>使用原型和scriptaculous？

這是一個成分<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>

什麼是最好的方式（使用Prototype和Scriptaculous）與隨行的JavaScript新增的這<fieldset>額外的副本確保每個人都有頁一個唯一的ID？

來源

2009-08-19 Dave Forgac

此代碼適用於插入元素，但我無法刪除元素。我向模板添加了「onClick = removeElement（this.id）」，而我的模板是一個列表元素。 function removeElement（id）{Effect.Fade（id）; //或$（id）.Fade（）;或新的Effect.Fade（id）; }這對於HTML文件中硬編碼的列表上的任何項目都是完美無缺的。當我按照Justin描述的方式動態添加新元素時，我無法刪除這些元素 - 點擊它們時沒有任何反應。而不是onclick = removeElement（this.id）我也嘗試在值的時候插入id – David 2011-07-11 20:52:49

如果您已經有一個很好的html模板，最簡單的方法是使用正則表達式將模板id轉換爲唯一的id，將模板html注入到doc中的正確位置，然後評估腳本。 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); 
}

來源

2009-08-21 16:50:43

FYI與原型分配一個唯一的ID元素沒有ID的最佳方法是使用：

$('element').identify();

在你在做什麼的情況下，我個人會利用原型的Template功能，這將代碼轉換爲這樣的事情：

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

什麼都沒有錯Justin的代碼，只是爲了顯示會員總是很多方法可以實現同樣的事情。在你的情況下，只有一個變量來操作，但由於模板允許多個替換，他們可以是一個更優雅的解決方案，多個正則表達式替換。

來源

2009-09-05 19:15:13 robjmills

如何動態添加和刪除<fieldsets>使用原型和scriptaculous？

回答

相關問題