Unable to display images in ajax product jump form.

[rohit]

Hi,

I am trying to display product images in the product jump form in the keyword search box of the catalog application. Currently, it displays only the product name, brand name and the product Id. I was trying to display the product image as well.

While I could get the image from the database and construct the image URL, the html returned by the jQuery escapes the image tags and displays the URL instead of displaying the image. For eg. after getting the image filepath i added the below code in the jQurey to append the image tag to form the image URL,

item.label = "<img src=\"" + item.value + "\">";

The code in the browser instead of showing the image, shows the URL as:



And when i check the code in google chrome developer tools, the html generated is displayed as below:
 
<img src="http://ofbiz.apache.org/images/ofbiz_logo.gif">

The tags "<" and ">" are being replaced by &alt; and > which causes the image URL to be displayed instead of the image itself. If i replace the &alt; and > tags in the debugger with "<" and ">" respectively, the image gets in the ajax request properly.

I will really appreciate if someone can help me prevent the tags "<" and ">" being replaced.

Thanks,

Rohit

[Bilgin Ibryam-2]

Hi Rohit,

 did you try this   ${StringUtil.wrapString(stringToEscape)} in your FTL

Bilgin

On 27 December 2011 03:55, rohit <[hidden email]> wrote:

> Hi,
>
> I am trying to display product images in the product jump form in the
> keyword search box of the catalog application. Currently, it displays only
> the product name, brand name and the product Id. I was trying to display the
> product image as well.
>
> While I could get the image from the database and construct the image URL,
> the html returned by the jQuery escapes the image tags and displays the URL
> instead of displaying the image. For eg. after getting the image filepath i
> added the below code in the jQurey to append the image tag to form the image
> URL,
>
> item.label = "<img src=\"" + item.value + "\">";
>
> The code in the browser instead of showing the image, shows the URL as:
>
> http://ofbiz.apache.org/images/ofbiz_logo.gif
>
> And when i check the code in google chrome developer tools, the html
> generated is displayed as below:
>
> <img src="http://ofbiz.apache.org/images/ofbiz_logo.gif">
>
> The tags "<" and ">" are being replaced by &alt; and > which causes the
> image URL to be displayed instead of the image itself. If i replace the
> &alt; and > tags in the debugger with "<" and ">" respectively, the image
> gets in the ajax request properly.
>
> I will really appreciate if someone can help me prevent the tags "<" and ">"
> being replaced.
>
> Thanks,
>
> Rohit
>
> -----
> saanjhi.com
> --
> View this message in context: http://ofbiz.135035.n4.nabble.com/Unable-to-display-images-in-ajax-product-jump-form-tp4236275p4236275.html
> Sent from the OFBiz - User mailing list archive at Nabble.com.

[rohit]

Hi Bilgin,

i tried that but i did not work. I think the issue is more with jQuery and its configuration. for eg...i am adding the image tags in jQuery as :

item.label = "<img src=\"" + item.value + "\">";

where, item.value is the image path returned from ofbiz. Escaping "<" and ">" is jQuery has not helped either. I am quite confused as the "<div>" tags which are added in the jQuery in the selectall.js file are working quite well.

thanks,

Rohit