Wie kann ich mit Prototype und Scriptaculous dynamisch <fieldsets> hinzufügen und entfernen?

Question

Ich schreibe ein grundlegendes Rezept Organisation Anwendung und ich möchte in der Lage sein, dynamisch zusätzliche Elemente in die Liste der Zutaten mit Ajax hinzufügen.

So sieht eine Zutat aus <fieldset> sieht so aus:

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

Was ist der beste Weg (mit Prototyp und scriptaculous), um zusätzliche Kopien dieser <fieldset> mit dem zugehörigen JavaScript auf der Seite, um sicherzustellen, dass jeder eine eindeutige ID hat?

Answer 1

Wenn Sie bereits eine schöne HTML-Vorlage haben, ist es am einfachsten, eine Regexp zu verwenden, um die Vorlagen-IDs in eindeutige IDs umzuwandeln, die HTML-Vorlage an der richtigen Stelle im Dokument einzufügen und die Skripte auszuwerten. Prototype's Element.insert Funktion übernimmt die gesamte Arbeit des Einfügens von HTML und der Auswertung der Skripte für Sie.

Sagen wir, Sie haben die Vorlage in einem versteckten Div namens ingredient_template und markieren Sie alle Stellen, an denen Sie eine eindeutige Kennung benötigen, mit 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>

Und sagen wir, Sie wollen es zu einer ingredients_list Element:

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

Sie können diese Javascript-Funktion verwenden, um die Vorlage nachzuschlagen und die XXX s mit der nächsten Zutatennummer, und fügen Sie sie in die ingredients_list :

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

Answer 2

FYI der beste Weg mit Prototyp, um eine eindeutige ID zu einem Element ohne ID zuweisen ist zu verwenden:

$('element').identify();

Im Zusammenhang mit dem, was Sie tun, würde ich persönlich die Prototype-Funktion verwenden. Vorlage Funktionalität, die den Code in etwas wie dieses umwandeln würde:

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

An Justins Code ist überhaupt nichts auszusetzen, er soll nur zeigen, dass es immer viele Wege gibt, das Gleiche zu erreichen. In Ihrem Fall gibt es nur eine Variable zu manipulieren, aber da Vorlagen für mehrere Ersetzungen erlauben, können sie eine viel elegantere Lösung als mehrere Regexp-Ersetzungen sein.