CODEWITHSUNDEEP
jqueryjqgrid
PhDJ
PhDJ

Reputation: 313

Change image in grid after click

I have an image in my rows of a basket and would like to change it after it has been clicked.

I have tried to change it in several ways but the image stays the same.

This is the definition in the grid : 

{name:'Basket', index:'Basket', width:7, formatter: basketFormatter, align: 'center', sortable:false, search:false}

The formatter :

function basketFormatter(cellvalue, options, rowObject){  

  var rowId = options.rowId;  

  var basket = '<img src="/img/basket_off.gif" border="0" onClick="add2Basket(this,' + "'" + rowId + "'" + ')"/></a>'; 

  return basket;
}

And part of the function

function add2Basket(image, rowId){

  $(image).attr('src', '/img/basket_on.gif');
  $("#list").setCell(rowId, 'Basket', '<img src="basket_on.gif" />');

But none of the above lines changes the image.

Upvotes: 0

Views: 458

Answers (1)

Oleg
Oleg

Reputation: 221997

First of all you need fix your custom formatter to produce correct formatter HTML fragment without additional </a>:

<img src="..." />

Next, you don't need use onClick with global defined function add2Basket. Instead of that you can use onCellSelect callback which will be called on click on any element inside of grid body. You can use iCol or e.target.nodeName to filter only the events which you need. The setting of src attribute is enough to change the image.

The demo

enter image description here

shows small grid with flags, but by clicking of the flag you can change it to the flag of another country. I used the following code

onCellSelect: function (rowid, iCol, cellContent, e) {
    if (e.target.nodeName.toLowerCase() === "img") {
        $(e.target).attr("src", swapList[$(e.target).attr("src")]);
    }
}

where I defined in swapList which flag should be the next.

Upvotes: 1

Related Questions