setControlImage from AW.HTML.IMG

I need to set a control image from a resource that is defined at runtime (for instance, user types a name and I assign the corresponding image). I can't add it to the CSS which is what you suggest throughout your examples. Basically I am doing an eval() on an AJAX response which I send the client:

var obj = new AW.HTML.IMG;
obj.setAttribute('src', 'images/p/check.png');
button.setControlImage(obj);

I also tried:

button.setControlImage('images/p/check.png');

I also tried both with the fully qualified URL.

I also tried document.getElementById('button').image = blah blah

none work.

I read the following and it is not a solution (CSS again):

http://www.activewidgets.com/javascript.forum.9064.1/url-in-setcontrolimage.html

How can I do this? Thx

You should change the box/image element to the IMG tag -

var img = obj.getContent("box/image");
img.setTag("IMG");
img.setClass("image", "dynamic");
img.setAttribute("src", function(){
    return this.getControlProperty("image"); // image URL
});

Here is a complete example - it shows how to create a 'dynamic image' cell template and how to modify the button control to use IMG tag

<style>

.aw-image-dynamic {
    width: 16px;
    height: 16px;
}

</style>
<script>

// -----------------------------------------------
// 'Dynamic image' template
//	uses IMG tag instead of CSS background

var MyImageTemplate = AW.Templates.ImageText.subclass();

MyImageTemplate.create = function(){

    var obj = this.prototype;

    var img = obj.getContent("box/image");
    img.setTag("IMG");
    img.setClass("image", "dynamic");
    img.setAttribute("src", function(){
        return this.getControlProperty("image"); // image URL
    });

}

// -----------------------------------------------
//	using 'dynamic image' template with the grid

    var obj = new AW.UI.Grid;
    obj.setCellData("cell");
    obj.setHeaderText("header");
    obj.setColumnCount(10);
    obj.setRowCount(10);

    obj.setCellTemplate(new MyImageTemplate, 0);
    obj.setCellImage("world.gif"); // image URL

    document.write(obj);

// -----------------------------------------------
// modifying the button control

    var button = new AW.UI.Button;

    var img = button.getContent("box/image");
    img.setTag("IMG");
    img.setClass("image", "dynamic");
    img.setAttribute("src", function(){
        return this.getControlProperty("image");
    });

    button.setControlImage("world.gif"); // image URL
    button.setControlText("Dynamic image");

    document.write(button);

</script>

Hi,
added to this can any1 suggest me how to do the sorting of a column having the images with the text and non images(having only the text)

I tried this in both Firefox 2.0 and Explorer 7.0 and it does not work. For the utmost simplicity, I applied this to your examples/new/controls.htm example:

var button = new AW.UI.Button;
button.setId("button1");

var img = button.getContent("box/image");
img.setTag("IMG");
img.setClass("image", "dynamic");
img.setAttribute("src", function(){
return this.getControlProperty("image");
});

button.setControlImage("images/p/Approve16.png"); // image URL
button.setControlText("Dynamic image");

button.refresh();

*** I also added this to style (tried with and without actually):

.aw-image-dynamic {width:16px;height:16px;}

*** Just as a brain-dead sanity check - this addition to the example does work:

var obj = new AW.HTML.IMG;
obj.setAttribute("src", "images/p/Approve16.png");
document.write(obj);

So I still don't know what's wrong.
Brian

Note: I did not post the message above

Continuing from last POST (something a little simpler that also does not work)...

I need to change images dynamically, so I initially send this to the client which works:

var imageTarget = new AW.HTML.IMG;
imageTarget.setId('imageTarget');
imageTarget.setAttribute('src','images/ButtonCtl.gif'); // initial test img
imageTarget.refresh();

I then send Ajax responses to the client which are the last two lines with the new image.

Sometimes it works, most of the time it does not.

More info from last.

It always works when I request a new image. But consistently fails to reset after that (bug with browser cache???). Using FF 2.0.

Note that I am resetting a side range of control attributes through Ajax and they all work consistently except for these images, so it's not my update constructs.

Are you using AW 2.0.1 or 2.0.2? (it may not work in 2.0.1 due to the html caching bug).

No, I'm using 2.0.1. I looked all over your site for the upgrade. To my amazement, I can't find it. I have posted a Q to your customer care to tell me where it's hiding.