3.2.0

script tags in a grid cell

Hi,

I am trying to embed javascript in a grid cell. Something like setting the content of a cell to: <script>myFunction()</script> where myFunction() contains document.write calls. This works fine on the initial rendering of the grid, but after sorting (or anything that calls obj.refresh()) the elements that the script wrote disappear - as far as I can tell they are completely removed from the page, not just invisible.

Ideally we could just set the cell content to whatever is contained in the document.write calls, but in this case the function we are calling is from a 3rd party, so it's not quite so simple.

It seems that the script just doesn't get executed on refresh() because if I do an alert() instead of a document.write, they also do not get triggered on sort, etc. Is there a way to make them? Any other suggestions?

Here is a small example that demonstrates the issue:
function doStuff(id)
{
    //alert('hi');
    document.write("<span id=" + id + ">" + id + "</span>");
}

function getScript(id)
{
    return "<script>doStuff('" + id + "');" 
          + "<\/script> " + "Normal Cell Text";
}

var TABLE_CONTENT = [[getScript('0'), "aaaa", 0],
         [getScript('1'), "bbbb", 1],
         [getScript('2'), "cccc", 2]];
             
var obj = new AW.Grid.Extended;
obj.setColumnCount(3);
obj.setCellText(TABLE_CONTENT);
obj.setRowCount(TABLE_CONTENT.length);
document.write(obj);
Shannon
October 31,
<script> blocks will not be executed inside refresh() call - this is how inner/outerHTML works. Instead of inserting <script> blocks into the cell text you can use the function as a datasource -

obj.setCellText(function(col, row){
  if (col==0) {
    return doStuff(row);
  }
  else {
    return TABLE_CONTENT[row][col];
  }
});


However if your doStuff() function contains document.write() calls - they will not work anyway. If you cannot change this function and replace document.write() calls - the only solution is to substitute document.write() function 'on the fly' :-)

function doStuff(i){
    document.write("<b>" + i + "</b>");
}

var output = "";
var trueWrite = document.write;
var fakeWrite = function(s){output = s}

function myCells(c, r){
    if (c==0){
        document.write = fakeWrite;
        doStuff(r);
        document.write = trueWrite;
        return output;
    }
    else {
        return "text";
    }
}

    var obj = new AW.UI.Grid;
    obj.setCellText(myCells);
    obj.setColumnCount(10);
    obj.setRowCount(10);
    document.write(obj);
Alex (ActiveWidgets)
October 31,
Thank you Alex, using fakeWrite works perfectly and is surprisingly simple!
Shannon
October 31,

This topic is archived.

See also:


Back to support forum