ASP.NET error: "Unable to modify the parent container element before the child element is closed"
<p>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". </p>

<pre><code>private static string GetColorBox(string name, int width, string value)
    {
        return "&lt;input type=\"text\" maxlength=\"6\" size=\"6\" id=\"colorPickerHolder" + name + "\" value=\"000000\" /&gt;" +
            "&lt;script type=\"text/javascript\"&gt;" +
            "$('#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);" +
            "});" +
        "&lt;/script&gt;";
    }
</code></pre>

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

<pre><code>Webpage error details
</code></pre>

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

<p>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: <a href="http://localhost:1442/Slide/CreateTemplateSlide/33" rel="nofollow">http://localhost:1442/Slide/CreateTemplateSlide/33</a></p>

<p>The HTML it renders appears like this: </p>

<pre><code>  &lt;tr&gt;
            &lt;td width="150px" nowrap="nowrap"&gt;
                Text color:
            &lt;/td&gt;
            &lt;td&gt;
                &lt;input type="text" maxlength="6" size="6" id="colorPickerHolderTextColor" value="000000" /&gt;&lt;script type="text/javascript"&gt;$('#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);});&lt;/script&gt;
            &lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td width="150px" nowrap="nowrap"&gt;
                Text size:
            &lt;/td&gt;
            &lt;td&gt;
                &lt;input name="TextSize" width="5px" type="text" value=""&gt;&lt;/input&gt;
            &lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td width="150px" nowrap="nowrap"&gt;
                Background color:
            &lt;/td&gt;
            &lt;td&gt;
                &lt;input type="text" maxlength="6" size="6" id="colorPickerHolderBackColor" value="000000" &gt;&lt;script type="text/javascript"&gt;$('#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);});&lt;/script&gt;
            &lt;/td&gt;
</code></pre>

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