Made it so that form elements are generated using the DOM rather than…

… by concatenating strings. The string concatenation had very strange results when the values of <select> elements were strings with both single- and double-quotes in them.

lib/assets/javascripts/best_in_place.js

@@ -259,19 +259,33 @@ BestInPlaceEditor.prototype = {
 BestInPlaceEditor.forms = {
   "input" : {
     activateForm : function() {
-      var output = '<form class="form_in_place" action="javascript:void(0)" style="display:inline;">';
-      output += '<input type="text" name="'+ this.attributeName + '" value="' + this.sanitizeValue(this.display_value) + '"';
-      if (this.inner_class !== null) {
-        output += ' class="' + this.inner_class + '"';
+      var output = $(document.createElement('form'))
+                   .addClass('form_in_place')
+                   .attr('action', 'javascript:void(0);')
+                   .attr('style', 'display:inline');
+      var input_elt = $(document.createElement('input'))
+                      .attr('type', 'text')
+                      .attr('name', this.attributeName)
+                      .val(this.display_value);
+      if(this.inner_class !== null) {
+        input_elt.addClass(this.inner_class);
       }
-      output += '>';
-      if (this.okButton) {
-        output += '<input type="submit" value="' + this.okButton + '" />';
+      output.append(input_elt);
+      if(this.okButton) {
+        output.append(
+          $(document.createElement('input'))
+          .attr('type', 'submit')
+          .attr('value', this.okButton)
+        )
       }
-      if (this.cancelButton) {
-        output += '<input type="button" value="' + this.cancelButton + '" />';
+      if(this.cancelButton) {
+        output.append(
+          $(document.createElement('input'))
+          .attr('type', 'button')
+          .attr('value', this.cancelButton)
+        )
       }
-      output += '</form>';
+
       this.element.html(output);
       this.setHtmlAttributes();
       this.element.find("input[type='text']")[0].select();
@@ -332,13 +346,20 @@ BestInPlaceEditor.forms = {
 
   "date" : {
     activateForm : function() {
-      var that = this,
-        output = '<form class="form_in_place" action="javascript:void(0)" style="display:inline;">';
-      output += '<input type="text" name="'+ this.attributeName + '" value="' + this.sanitizeValue(this.display_value) + '"';
-      if (this.inner_class !== null) {
-        output += ' class="' + this.inner_class + '"';
+      var that      = this,
+          output    = $(document.createElement('form'))
+                      .addClass('form_in_place')
+                      .attr('action', 'javascript:void(0);')
+                      .attr('style', 'display:inline'),
+          input_elt = $(document.createElement('input'))
+                      .attr('type', 'text')
+                      .attr('name', this.attributeName)
+                      .attr('value', this.sanitizeValue(this.display_value));
+      if(this.inner_class !== null) {
+        input_elt.addClass(this.inner_class);
       }
-      output += '></form>';
+      output.append(input_elt)
+
       this.element.html(output);
       this.setHtmlAttributes();
       this.element.find('input')[0].select();
@@ -371,14 +392,23 @@ BestInPlaceEditor.forms = {
 
   "select" : {
     activateForm : function() {
-      var output = "<form action='javascript:void(0)' style='display:inline;'><select>";
-      var selected = "";
-      var oldValue = this.oldValue;
-      jQuery.each(this.values, function(index, value) {
-        selected = (value[1] == oldValue ? "selected='selected'" : "");
-        output += "<option value='" + value[0] + "' " + selected + ">" + value[1] + "</option>";
-       });
-      output += "</select></form>";
+      var output     = $(document.createElement('form'))
+                       .attr('action', 'javascript:void(0)')
+                       .attr('style', 'display:inline');
+          selected   = '',
+          oldValue   = this.oldValue,
+          select_elt = $(document.createElement('select'));
+      jQuery.each(this.values, function (index, value) {
+        var option_elt = $(document.createElement('option'))
+                         .attr('value', value[0])
+                         .text(value[1]);
+        if(value[1] == oldValue) {
+          option_elt.attr('selected', 'selected');
+        }
+        select_elt.append(option_elt);
+      });
+      output.append(select_elt);
+
       this.element.html(output);
       this.setHtmlAttributes();
       this.element.find("select").bind('change', {editor: this}, BestInPlaceEditor.forms.select.blurHandler);
@@ -419,18 +449,28 @@ BestInPlaceEditor.forms = {
       // grab width and height of text
       width = this.element.css('width');
       height = this.element.css('height');
-
-      // construct the form
-      var output = '<form action="javascript:void(0)" style="display:inline;"><textarea>';
-      output += this.sanitizeValue(this.display_value);
-      output += '</textarea>';
-      if (this.okButton) {
-        output += '<input type="submit" value="' + this.okButton + '" />';
+
+      // construct form
+      var output   = $(document.createElement('form'))
+                     .attr('action', 'javascript:void(0)')
+                     .attr('style', 'display:inline')
+                     .append($(document.createElement('textarea'))
+                             .text(this.sanitizeValue(this.display_value)));
+      if(this.okButton) {
+        output.append(
+          $(document.createElement('input'))
+          .attr('type', 'submit')
+          .attr('value', this.okButton)
+        );
       }
-      if (this.cancelButton) {
-        output += '<input type="button" value="' + this.cancelButton + '" />';
+      if(this.cancelButton) {
+        output.append(
+          $(document.createElement('input'))
+          .attr('type', 'button')
+          .attr('value', this.cancelButton)
+        )
       }
-      output += '</form>';
+
       this.element.html(output);
       this.setHtmlAttributes();
 

spec/integration/js_spec.rb

@@ -648,7 +648,7 @@
 
   end
 
-  it "should display strings with quotes correctly in fields" do
+  it "should display strings with quotes correctly in fields", wip:true do
     @user.last_name = "A last name \"with double quotes\""
     @user.save!