ASP.NET error: "Unable to modify the parent container element before the child element is closed"

Question

Hi, I have a huge problem with this method im trying to make. I have a web page where i need to write a method that returns the editor for a specific property. The method for the color implements the "JQUERY Colorpicker from eyecon.ro".

private static string GetColorBox(string name, int width, string value)
    {
        return "<input type=\"text\" maxlength=\"6\" size=\"6\" id=\"colorPickerHolder" + name + "\" value=\"000000\" />" +
            "<script type=\"text/javascript\">" +
            "$('#colorPickerHolder" + name + "').ColorPicker(" +
            "{" +
              "onSubmit: function(hsb, hex, rgb, el) " +
              "{" +
                "$(el).val(hex);" +
                "$(el).ColorPickerHide();" +
              "}," +
              "onBeforeShow: function () " +
              "{" +
                "$(this).ColorPickerSetColor(this.value);" +
              "}" +
            "})" +
            ".bind('keyup', function()" +
            "{" +
              "$(this).ColorPickerSetColor(this.value);" +
            "});" +
        "</script>";
    }

I have several calls to this method but after the first invocation the second one complains that:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Timestamp: Mon, 9 Nov 2009 19:35:33 UTC

Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://localhost:1442/Slide/CreateTemplateSlide/33

The HTML it renders appears like this:

  <tr>
            <td width="150px" nowrap="nowrap">
                Text color:
            </td>
            <td>
                <input type="text" maxlength="6" size="6" id="colorPickerHolderTextColor" value="000000" /><script type="text/javascript">$('#colorPickerHolderTextColor').ColorPicker({onSubmit: function(hsb, hex, rgb, el) {$(el).val(hex);$(el).ColorPickerHide();},onBeforeShow: function () {$(this).ColorPickerSetColor(this.value);}}).bind('keyup', function(){$(this).ColorPickerSetColor(this.value);});</script>
            </td>
        </tr>

        <tr>
            <td width="150px" nowrap="nowrap">
                Text size:
            </td>
            <td>
                <input name="TextSize" width="5px" type="text" value=""></input>
            </td>
        </tr>

        <tr>
            <td width="150px" nowrap="nowrap">
                Background color:
            </td>
            <td>
                <input type="text" maxlength="6" size="6" id="colorPickerHolderBackColor" value="000000" ><script type="text/javascript">$('#colorPickerHolderBackColor').ColorPicker({onSubmit: function(hsb, hex, rgb, el) {$(el).val(hex);$(el).ColorPickerHide();},onBeforeShow: function () {$(this).ColorPickerSetColor(this.value);}}).bind('keyup', function(){$(this).ColorPickerSetColor(this.value);});</script>
            </td>

I have no clue what so ever about why this is happening, anyone pls point me in the right direction?

Answer 1

Try closing the input tag before the script tag.

EDIT: You may also want to remove the script part from that call and make a dedicated one that will work on a particular class.

private static string GetColorBox(string name, int width, string value)
{
    return "<input class=\"myParticularColorBoxingClass\" type=\"text\" maxlength=\"6\" size=\"6\" id=\"colorPickerHolder" + name + "\" value=\"000000\" >";
}

EDIT2: You can run the script only once, by directly adding it in the page.
Please can you try putting this inside your page?
Remember to add class=\"myParticularColorBoxingClass\" (see above method).

<script type="text/javascript">
    //run this after document has finished loading!
    $(document).ready(
      function() { 
         //activate all inputs with "myParticularColorBoxingClass" class
         $('input .myParticularColorBoxingClass').ColorPicker(
                {
                  onSubmit: function(hsb, hex, rgb, el)
                  {
                    $(el).val(hex);
                    $(el).ColorPickerHide();
                  },
                  onBeforeShow: function () 
                  {
                    $(this).ColorPickerSetColor(this.value);
                  }
                })
                .bind('keyup', function()
                {
                  $(this).ColorPickerSetColor(this.value);
                });
      }
   );
</script>