Forum | Appery.io

Hi, how can I capture image name from a grid which has an image component in it? Since I have a catalogue of products (with images) appearing on a page (inside a grid), I am trying to use the following code but it is giving an undefined URL in image variable.

var image = $(this).parent().find("[name=Offer_image]").attr('src');

Offer_image is the name of image component.

I want to use this image name to store in a local variable and then use on a different page.

Hi Anil,

Could you please clarify on what component you add this handler, on Grid or Grid item? How do you generate this grid, using a service?

This JS is placed on click event of a button. That button is placed within a grid along with the "Offer_image" image component. Both are placed in different grid cells though. This might be creating part of the error as their parents are different.

Should I use .parents() instead of .parent()?

This grid is generated using a query service mapping.

Yes, using .parents() gives me the image URL.

Is there a way to get just the image name as ABC.png instead of the whole URL?

Hi Anil,

We are glad you have managed to solve your first problem.

But there is some thoughts about this issue:

1 The best way to get url from image for your case is:

pre

//Note: you need to replace "gridItemName" with your grid(which is iterates by service) name.
var imageUrl = $(this).closest('[name="gridItemName"]').find('[name="Offer_image"]').attr('src');

/pre

2 To get image name without path you can use following code:

pre

//Note: you need to replace "gridItemName" with your grid(which is iterates by service) name.
var imageUrl = $(this).closest('[name="gridItemName"]').find("[name=Offer_image]").attr('src');

//Get imageName from image url.
var imageName = /([^//]*)$/gi.exec(imageUrl)[1];

/pre

Regards.

Thanks Yuri. Your suggestion works very well.