Home/ Questions/Q 6093207
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T12:32:01+00:00

I’m always getting a null color object back. I haven’t touched Dojo in about

  • 0

I’m always getting a null color object back. I haven’t touched Dojo in about a year, so everything is very rusty. The colorPallette displays, but when I click on it, the variable objColor below is always null. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">

    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require("dojox.widget.ColorPicker");
            dojo.require("dijit.ColorPalette");
            dojo.require("dijit.form.TextBox");
            dojo.require("dijit.form.Textarea");
            output = "Color=&Color,SoundFile=&SoundFile"; 
            function updateResults()
            {
               var objColorPalette = dijit.byId("colorPalette"); 
               var objColor = objColorPalette.value; 
               //var objColor = objColorPalette.attr("value"); 
               //alert("objColor=" + objColor);
               if (objColor == null)
               {
                  output = output.replace("&Color","null"); 
               }
               else
               {
                  output = output.replace("&Color",objColor.toHex()); 
               }
               var objResultTextArea = dijit.byId("results");
               objResultTextArea.set("value", output); 
            }
            function setColor(val)
            {
               output = output.replace("&Color",val.toHex()); 
               var objResultTextArea = dijit.byId("results");
               objResultTextArea.set("value", output); 
            }
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
        />
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/widget/ColorPicker/ColorPicker.css"
        />
    </head>

    <body class=" claro ">
        <h3>Begin Data Entry</h3>
        <label for="mp3FileName">
            Auto-trimming, Proper-casing Textbox:
        </label>        
        <input type="text" name="mp3FileName" value="/yourRelativeFileName.mp3" dojoType="dijit.form.TextBox"
        trim="true" id="firstname" propercase="true">

        <h3>Color</h3>
        <div dojoType="dijit.ColorPalette" onChange="updateResults()" palette="7x10" id="colorPalette">
        </div>
        <!--
        <h3>Color Picker</h3>
        <div dojoType="dojox.widget.ColorPicker" id="colorPicker">
        </div>
        -->

        <h3>Results</h3>
        <textarea id="results" name="results" dojoType="dijit.form.Textarea"
        style="width:900px;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
            nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </textarea>        
        <h3>The End</h3>

    </body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Firstly, a quick way to accomplish what you want: Change the onChange attribute of the widget to simply updateResults (without parentheses). This means it’s treated as a function pointer, and that the function will be called with whatever arguments ColorPalette decides to provide.

    <div dojoType="dijit.ColorPalette" onChange="updateResults" 
     palette="7x10" id="colorPalette"></div>

    Secondly, change your updateResults function so that it accepts an argument. The ColorPalette will provide its onChange event a string argument, containing the selected color’s hex value.

    function updateResults(selectedColor)
{
    // Now you can remove a lot of the stuff that you had here, and simply do:
    var objResultTextArea = dijit.byId("results");
    objResultTextArea.set("value", output.replace("&Color", selectedColor)); 
}

    Now that that’s out of the way, why didn’t your original approach work? Actually, it sort of did. The second time you selected a color, it would enter the else clause, but it would fail on toHex because objColor was a string and not a Color object.

    But why didn’t it work on the first click? The reason seems to be that the onChange function is executed before the ColorPalette actually sets its internal “value”. I’m guessing there is a setTimeout involved somewhere. So objColorPalette.value would be null at that point (using attr, or rather get is the correct way btw 😉 ). The second time the event triggered, the value would actually be the previously selected color, not the new one (but toHex would of course still fail, so the text in your results field would remain as before).

    Hope this helps.

    • 0