store blueprint html in data-blueprint attribute

Fix the problem of having an invalid HTML structure inside the invisible
blueprint div, e.g. when it contains a table row or a list item, without
respectively a table or list element.

lib/nested_form/builder_mixin.rb

@@ -28,9 +28,9 @@ def link_to_add(*args, &block)
 
       @fields ||= {}
       @template.after_nested_form(fields_blueprint_id) do
-        blueprint = fields_for(association, model_object, :child_index => "new_#{association}", &@fields[fields_blueprint_id])
-        blueprint_options = {:id => fields_blueprint_id, :style => 'display: none'}
-        @template.content_tag(:div, blueprint, blueprint_options)
+        blueprint = {:id => fields_blueprint_id, :style => 'display: none'}
+        blueprint[:"data-blueprint"] = fields_for(association, model_object, :child_index => "new_#{association}", &@fields[fields_blueprint_id]).to_str
+        @template.content_tag(:div, nil, blueprint)
       end
       @template.link_to(*args, &block)
     end

spec/nested_form/builder_spec.rb

@@ -84,6 +84,16 @@
         fields.should eq('<div class="fields marked_for_destruction">Task</div>')
       end
 
+      it "puts blueprint into data-blueprint attribute" do
+        task = project.tasks.build
+        task.mark_for_destruction
+        subject.fields_for(:tasks) { 'Task' }
+        subject.link_to_add('Add', :tasks)
+        output   = template.send(:after_nested_form_callbacks)
+        expected = ERB::Util.html_escape '<div class="fields">Task</div>'
+        output.should match(/div.+data-blueprint="#{expected}"/)
+      end
+
       it "adds parent association name to the blueprint div id" do
         task = project.tasks.build
         task.milestones.build
@@ -92,7 +102,7 @@
           tf.link_to_add('Add', :milestones)
         end
         output = template.send(:after_nested_form_callbacks)
-        output.should eq('<div id="tasks_milestones_fields_blueprint" style="display: none"><div class="fields">Milestone</div></div>')
+        output.should match(/div.+id="tasks_milestones_fields_blueprint"/)
       end
     end
   end

vendor/assets/javascripts/jquery_nested_form.js

@@ -7,9 +7,10 @@ jQuery(function($) {
   NestedFormEvents.prototype = {
     addFields: function(e) {
       // Setup
-      var link    = e.currentTarget;
-      var assoc   = $(link).attr('data-association');                  // Name of child
-      var content = $('#' + $(link).attr('data-blueprint-id')).html(); // Fields template
+      var link      = e.currentTarget;
+      var assoc     = $(link).data('association');                // Name of child
+      var blueprint = $('#' + $(link).attr('data-blueprint-id'));
+      var content   = blueprint.data('blueprint');                // Fields template
 
       // Make the context correct by replacing new_<parents> with the generated ID
       // of each of the parent objects

vendor/assets/javascripts/prototype_nested_form.js

@@ -1,8 +1,9 @@
 document.observe('click', function(e, el) {
   if (el = e.findElement('form a.add_nested_fields')) {
     // Setup
-    var assoc   = el.readAttribute('data-association');               // Name of child
-    var content = $(el.readAttribute('data-blueprint-id')).innerHTML; // Fields template
+    var assoc     = el.readAttribute('data-association');      // Name of child
+    var blueprint = $(el.readAttribute('data-blueprint-id'));
+    var content   = blueprint.readAttribute('data-blueprint'); // Fields template
 
     // Make the context correct by replacing new_<parents> with the generated ID
     // of each of the parent objects