Can I update an image in jqgrid cell

Question

Hi I have gone through various link to update a cell value like here also here

I need to change the image which I put through a custom formatter as soon as user clicks on the image. So, I was using onCellSelect event where I am getting the data of the row by this

var data = $(this).jqGrid('getRowData', row);

And then I am changing the value of the cell by this -

image = "results_not_available.png";
data.colyesno = "<img title ='Detail data not available' src='img/" + image + "' />";

and the updating the cell value by setRowData

$(this).jqGrid('setRowData', row, data);

All the other links show this is a workable solution. I even tried to change any string column that too it is not working for me.

What else can I do?

Update: For me, setRowData is setting the title for the cell, not the value.

1) How I am adding an image -

I am using a custom formatter for that-

function  resultsImage(cellValue, options, rowdata, action) {
        var image = "";
        if (cellValue == "Y"){
            image = "results_available.png";
            var imageHtml = "<img class=pointer title ='Detail data available. Click to request for data' src='img/" + image + "' />";
            return imageHtml;
        }       
        else if (cellValue == "N"){
            image = "results_not_available.png";
            var imageHtml = "<img title ='Detail data not available' src='img/" + image + "' />";
            return imageHtml;
        }

    }

So, here inside the cell, I am placing an image.

On cell select, I am taking the data and calling a function -

    onCellSelect: function(row, col, content, event) {
      var cm = jQuery(grid).jqGrid("getGridParam", "colModel");
      columnName = cm[col].name;
      var data = $(this).jqGrid('getRowData', row);
      if(columnName == 'col_image')
         callImage(data,content);
      $(this).jqGrid('setRowData', row, data); 
}

Now here I am checking some condition so to which image needs to be applied.

var callImage = function (data,content){
    if(condition==true) {    ///which is some variable where we make some request to server and it returns backs a variable
      image = "loading_completed.png";
      data.col_image = "<img title ='Click to view data' src='img/" + image + "' />";
      return data
      };
    else {
      image = "loading_error.png";
      data.col_image = "<img title ='No data available' src='img/" + image + "' />";
      return data
      };
    }

So, if the user clicks on an image not in the cell then the image src should change according to the condition and it change should reflect in the same place as the old image.

Carden

You can set src attribute only for example. Could you post your current code of onCellSelect callback and I will modify it to work without usage of setRowData? Do you want that the image will be changed if the user click on the old image or if the user click somewhere inside of the cell, which holds img, but with another src in <img>? – Unriddle

@Unriddle I have updated the question with the requirements – Carden

Answer 1

You can use event parameter of onCellSelect callback. event.target will be element, clicked by user. Below is the example of the code:

onCellSelect: function (iRow, iCol, content, event) {
    var cmName = $(this).jqGrid("getGridParam", "colModel")[iCol].name,
        target = event.target;

    if (cmName === "col_image" && target.tagName.toUpperCase() === "IMG") {
        if (condition) { // some kind of testing
            target.src = "img/loading_completed.png";
            target.title = "Click to view data";
            // one can use $(target).attr alternatively
            //$(target).attr({
            //    src: "img/loading_completed.png",
            //    title: "Click to view data"
            //});
        } else {
            target.src = "img/loading_error.png";
            target.title = "No data available";
            // one can use $(target).attr alternatively
            //$(target).attr({
            //    src: "img/loading_error.png",
            //    title: "No data available"
            //});
        }
    }
}

Unriddle

thank you sir :) I used target.onclick event to define click event on the new image but now every time it is running the same code of onCellSelect again and again – Carden

@shv22: You are welcome! If you want that I help you that you should always provide the demo (in JSFiddle), which reproduces the problem. I could immediately see the problem, debug it and to post you modified demo, which fixes the problem. If you just describe the problem that I can only guess, what you do. For example, do you use return false; in the onclick? You can call event.preventDefault(). You can use beforeSelectRow instead of onCellSelect, ... I can only guess what you do exactly and what is the reason of the problem. – Unriddle

sir I have made the demo here jsfiddle.net/adishri22/vwb1c0mk/196. My problem is if I define the target.onclick event it is getting called even when the image is changed. It should only be called after when the user clicks on the new image. – Carden

@shv22: Sorry, but I don't understand the goal of setting onclick. You have currently full control over onclick: the onCellSelect will be executed exactly in the case. Why you can't place all code from oneAlert or anotherAlert directly inside of onCellSelect? – Unriddle

the first image shows data is available now if user clicks on image we check whether we can fetch data from server or not. On the basis of this we will change the image and title. Now, user clicks again to download the data. So, it can't run on first time. User needs to click again thats why I need another onclick event so that I could be able to fetch the report – Carden

@shv22: Sorry, but I can't follow you. For example, I don't understand the meaning of i. The function imageChange(data) set i always to 1 and } else { part of if (i==1) { will never executed. Moreover, I think that you still not full understand that onCellSelect will be executed inside of click handler. Why you could need set one more onclick handler which do anything. You can do the same directly inside of your code of onCellSelect. – Unriddle

@shv22: The code of onCellSelect contains already if (cmName === "Image" && target.tagName.toUpperCase() === "IMG") {...} you can add the test for target.src === "http://netdna.webdesignerdepot.com/uploads6/creative-app-icons/02-app.jpg" for example and do some actions depend on the current value of src. – Unriddle

the i is just to resemble a condition as I said first click on image change the image will send back request to server. But I got your point thank you again :) – Carden

@shv22: You are welcome! I wrote about i just because I could see during debugging that else part of if (i==1) { will be never executed. In any way, I'm glad if I could help you. – Unriddle

you always help me :) – Carden

Can I do this with onSelectRow event too? – Democratic

@AaA: Yes you can. The 3-d parameter of onSelectRow is the event object, which target property gives you direct access to the clicked DOM element. If you would have implementation problem then you could post new question where you describe the problem in detailed. The demo (in JSFiddle, for example) is good of cause. I could modify the demo and show you how to solve the problem. – Unriddle