0

Good morning all,

I have to show a 16x40 pixel image in a jqGrid column, that changes when I click on it; at this purpose, I defined my formatter as follow:

function dataViewLink(cellValue, options, rowdata, action)
{   
    var chartLink = "<div style='float:left;'><img id='_addtochart" + options.rowId + "' class='ui-icon-addtochart' onclick='devToggleChartChecked("  + options.rowId + ")'></img></div>";
    return chartLink; 
}

and created two CSS classes with different images:

.ui-icon-addtochart
{
    content: url(../images/addtochart.jpg) !important;
}

.ui-icon-removefromchart
{
    content: url(../images/removefromchart.jpg) !important;
}

then, I dynamically switch these classes using jquery. Everything works fine on chrome, but there is no way to get it working on firefox. The images does not show on firefox.

I have already found an issue related to the 'content' attribute on firefox:

Content url does not display image on firefox browser

and tried all the suggested workarounds, but none of them worked for me.

I cannot show these images with firefox.

This little problem is driving me crazy. Does anyone have any suggestion?

Thank you very much in advanced.

Bruno

Community
  • 1
  • 1
Bruno Vignola
  • 223
  • 1
  • 2
  • 12

1 Answers1

0

It seems I found a solution; I changed my formatter with:

function dataViewLink2(cellValue, options, rowdata, action)
{   
    var chartLink = "<div style='float:left;' id='_addtochart" + options.rowId + "' class='ui-icon-addtochart ui_add_dev' onclick='devToggleChartChecked("  + options.rowId + ")'></div>";
    return chartLink; 
}

and the CSS classes:

.ui-icon-addtochart
{
    background: url(../images/addtochart.jpg);
    height: 16px;
    width: 144px;
}

.ui-icon-removefromchart
{
    background: url(../images/removefromchart.jpg);
    height: 16px;
    width: 215px;
}

it works both on chrome and on firefox.

Thank you very much anyway!

Bruno

Bruno Vignola
  • 223
  • 1
  • 2
  • 12