Loading Profile...
I have seen other threads related to this issue e.g. - https://getsatisfaction.com/crossride...
However, the suggested solution is not working for me.
I have moved all images from CSS and moved them to HTML file. Now, I don't have any images in the CSS.
In HTML, I am using the following call to render images in my popup.
$('#loginButtonImg_Normal').attr('src', appAPI.resources.get('ie/base64Images/clickTo_login_normal.png'))
The call works fine and everything works as expected in CH and FF.
But, in IE, I am not getting messages sent from Background.js, in my Popup.
Strangely, If I remove all javascript calls to render images then even in IE, the popup starts getting message callbacks from Background.js.
Could you please help me with this issue.
Help get this topic noticed by sharing it on
Twitter,
Facebook, or email.
Twitter,
Facebook, or email.
I’m
frustrated
Message Callback from Background.js to Popup not working
-
EMPLOYEE
1Hello Dan,
I understand that you are having an issue with popup scope messaging with the background scope. Usually, this works without problems and from your last observation the problem would appear to be related to the images.
From the code snippet provided, I would guess the issue is that you are using jQuery to add the src attribute which is an issue with IE. You'll note from the thread that you cited that for the workaround the src is added directly in the image tag definition, as follows:$('<img src="'+appAPI.resources.get('IMAGE.png')+'">');
If you need me to take a closer look, please provide as much of the following information as possible and I will investigate:
- The extension id
- The file/line number where the code snippet can be found
- Which browser and operating system you are testing on, including version numbers
- The exact steps for reproducing the problem
- Any additional useful data, such as URLs, screenshots, videos, ...
Comment -
-
Thanks for your reply.
I have tried the solution suggested by you. However, it is updating the HTML with ascii/unicode values of the image data without image rendering. As a workaround, I tried the base64 encoding of the image, which works perfectly with the 'appAPI.resources.get' call; however, the Message call from backgroud.js to PopUp.js doesn't work. :( !! Again, If I disable the 'appAPI.resources.get' call, everything works perfectly again.
Please see the information below -
Extn Id : 62381
File: resources\ie\menu.html
Line: 36 & 37 - 'appAPI.resources.get' call with and without Base64
Success Condition: Just need a message callback from background.js to Popup.js with the image displayed.
Regards,
Dan -
-
EMPLOYEE
1Hello Dan,
Currently, your menu.html file looks something like this:
Note that if the img tag is in the HTML and you update the src attribute it causes the problem. Therefore, the workaround is not to place the image in the HTML and to create and inject it, as follows:...
function crossriderMain($) {
...
$("#myImage")
.attr("src", appAPI.resource.get("image.png"));
...
}
...
<body>
...
<a id="myLink" href="..."><img id="myImage" /></a>
...
</body>
......
function crossriderMain($) {
...
$('<img src="'+appAPI.resources.get('image.png')+'">')
.appendTo('#myLink');
...
}
...
<body>
...
<a id="myLink" href="..."></a>
...
</body>
... -
-
I’m
frustrated
Hi Shlomo,
I have added the following line -
......
$('<img src="'+appAPI.resources.get('ie/images/pop_up_logo_03.png')+'">').appendTo('#anchorTag'); //ADDED BY ME
// $('<img src="'+appAPI.resources.get('image.png')+'">').appendTo('#myLink'); << SUGGEST BY CROSSRIDER
......
It is exactly the same as your code. I have just changed the link id to 'anchorTag' and image path to 'ie/images/pop_up_logo_03.png'.
Please see the output in the attached image -
Could you please help me with this issue.
Thanks in advance.-
Are you developing locally? The code I can see in the extension is still using
$('<img src="'+appAPI.resources.get('IMAGE.png')+'">');. Please update the staging extension and I'll take a look. -
-
-
-
-
I have updated the extn code.
Please refer to the following file -
File: Resources/ie/Menu.html
Line# of Code: 36
Line# of "#anchorTag" : 356
Thanks again for looking into the code.
Regards,
Dan-
I created a simple menu.html using your image, as follows, and the image displayed correctly. This indicates to me that there is an issue with either the JS/CSS you are including, or the HTML itself.
Try using the debugging techniques in the following blog to help you identify the issue: Tips & Tricks for Debugging your Crossrider Extensions<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {
$('<img src="'+appAPI.resources.get('ie/images/pop_up_logo_03.png')+'">')
.appendTo('#anchorTag');
}
</script>
</head>
<body>
<a id="anchorTag" href="#"></a>
</body>
</html> -
-
Thanks for your quick response. Let me try it. I will update you soon.
-
-
-
-
-
Hi Shlomo,
I copied pasted your code. However, I am getting the same output as before.
Could it be because I am developing locally? :( !!
Please refer to the screenshot for details -
OUTPUT -
Code Executed -
Regards,
Dan-
There's a quick way to check it ... create a new extension with just the popup and test it without the local server :)
-
-
-
-
-
I’m
thankful
Thanks for your inputs Shlomo. You will be surprised to know that the call works perfectly if I develop it online; However, it fails; if I develop it offline!
I think you should get it fixed. This is very confusing. -
