Erreur ASP.NET : "Impossible de modifier l'élément conteneur parent avant la fermeture de l'élément enfant"

Question

J'ai un gros problème avec la méthode que j'essaie de mettre en place. J'ai une page web où je dois écrire une méthode qui renvoie l'éditeur pour une propriété spécifique. La méthode pour la couleur met en œuvre le "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>";
    }

J'ai plusieurs appels à cette méthode mais après la première invocation, la deuxième se plaint que :

Webpage error details

Agent de l'utilisateur : 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) Horodatage : Mon, 9 Nov 2009 19:35:33 UTC

Message : Erreur d'analyse HTML : Impossible de modifier l'élément conteneur parent avant la fermeture de l'élément enfant (KB927917) Ligne : 0 Caractère : 0 Code : 0 URI : http://localhost:1442/Slide/CreateTemplateSlide/33

Le HTML qu'il rend ressemble à ceci :

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

Je n'ai aucune idée de la raison pour laquelle cela se produit, quelqu'un peut-il m'indiquer la bonne direction ?

Answer 1

Essayez de fermer le input avant la balise script étiquette.

EDIT : Vous pouvez également vouloir supprimer la partie script de cet appel et en faire un dédié qui fonctionnera sur une classe particulière.

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 : Vous pouvez exécuter le script une seule fois, en l'ajoutant directement dans la page.
Pouvez-vous essayer de mettre ceci dans votre page ?
N'oubliez pas d'ajouter class=\"myParticularColorBoxingClass\" (voir la méthode ci-dessus).

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