3.2.0

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


Brian Boyd
March 14,
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>
Alex (ActiveWidgets)
March 15,
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)
March 18,
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

Brian Boyd
March 19,
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.
Brian Boyd
March 19,
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.
Brian Boyd
March 19,
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).
Alex (ActiveWidgets)
March 20,
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.
Brian Boyd
March 23,

This topic is archived.

See also:


Back to support forum