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

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);});</sc开发者_Python百科ript>
    </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?

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>