How can I dynamically add and remove <fieldsets> using prototype and scriptaculous?

Question

I'm writing a basic recipe organization application and I would like to be able to dynamically add additional items to the list of ingredients using Ajax.

This is what one ingredient <fieldset> looks like:

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

What is the best way (using prototype and scriptaculous) to add additional copies of this <fieldset> with the accompanying JavaScript to the page making sure each one has a unique ID?

Answer 1

If you already have a nice html template, the easiest thing to do is to use a regexp to convert the template ids to unique ids, inject the template html it into the right place in the doc, and eval the scripts. Prototype's Element.insert function does all the work of injecting the html and evaluating the scripts for you.

So say you have the template in a hidden div called ingredient_template, and you mark all the places you need a unique id with 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>

And say you want to add it to an ingredients_list element:

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

You could use this javascript function to lookup the template, replace the XXXs with the next ingredient number, and insert it into the ingredients_list:

var ingredientCount = 0;
function addIngredient() {
    var html = $("ingredient_template").innerHTML.replace(/XXX/g, ingredientCount++);
    $("ingredients_list").insert(html);
}