Updating panel contents in a Firefox extension - firefox-addon

I'm trying to go by the suggestion in https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel of using a contentScript to update the contents in my panel. Currently, I have a server that returns the html that I want to display in my panel. I do panel.postMessage("update_panel", contents); when I have the response ready, and have a contentScriptFile associated with the panel that contains
self.port.on("update_panel", handleMessage);
function handleMessage(message) {
document.write(message);
}
However, I don't see anything being updated, and I'm also unable to debug the contentScriptFile (is there an way to do so?).
What am I doing wrong?

I ended up figuring something out.
panel.port.on("updating_done", function(response) {
console.log(response);
});
panel.port.emit("update_panel", contents);
If anyone can explain why this works and postMessage doesn't, that would be great.

Related

How do I use showOpenDialog withe Electron’s IPC?

I am learning to live without remote in my electron app. I have got to the point where I need to open a file from the renderer, which I understand required the main process to show the file dialog and send back the results.
In my main.js, I have the following:
ipcMain.on('open-file',(event,data)=>{
dialog.showOpenDialog(null, data, (filePaths) => {
event.sender.send('open-file-paths', filePaths);
});
});
In my render process, which I call pager.js, I have the following:
ipcRenderer.send('open-file',{
title: 'Title',
defaultPath: localStorage.getItem('defaultPath')
});
ipcRenderer.on('open-file-paths',(event,data)=>{
console.log(event);
console.log(data);
});
The file open dialog works well enough, but I don’t know how to get the results. the ipcRenderer.on('open-file-paths',…) doesn’t get called, so that’s obviously not the right way to do it. I would like to get either the selected path(s) or a cancelled message.
How do I get the results for showOpenDialog in the render process?
OK, I think I’ve got it.
Thanks to an answer in ShowOpenDialog not working on recent versions of electron-js, I see that showOpenDialog now returns a promise, which means reworking the code in main.js. Here is a working solution:
// main.js
ipcMain.on('open-file',(event,data)=>{
dialog.showOpenDialog(null, data).then(filePaths => {
event.sender.send('open-file-paths', filePaths);
});
});
// pager.js (render)
ipcRenderer.send('open-file',{
title: 'Title',
defaultPath: localStorage.getItem('defaultPath')
});
ipcRenderer.on('open-file-paths',(event,data)=>{
console.log(`Canceled? ${data.canceled}`);
console.log(`File Paths: ${data.filePaths.join(';')`);
});

Jquery UI Autocomplete not working after dom manipluation

I have been trying to implement the autocomplete and have come across a problem that has stumped me. The first time I call .autocomplete it all works fine and I have no problems. If, however, I call it after I have removed some (unrelated) elements from the DOM and added a new section to the DOM then autocomplete does nothing and reports no errors.
Code:-
$.ajax({
type : 'get',
dataType : 'json',
url : '/finance/occupations',
cache:true,
success:function(data){
occupationList = data;
$('.js-occupation').autocomplete({
source: occupationList,
messages: {
noResults: '',
results: function(){}
},
minLength : 2,
select:function(event, ui){
$('.js-occupationId').val(ui.item.id);
}
});
}
});
The background to this page is that it contains multiple sections that are manipulated as the user moves through them. Hide and show works fine and does not impact on the autocomplete. However, if I do the following:-
var section = $('.js-addressForm:last').clone();
clearForm(section);
$('div.addressDetails').append(section);
$('.js-addressForm:first').remove();
Which gives the user the bility to add multiple addresses on the previous section then the autocomplete stops working.
Any suggestions or pointers on something obvious I am missing?
I have tried to put the initialisation of the autocomplete on an event when the element gets focus and it still does not work.
You have to create the autocomplete after all other underlying objects. If you F12, you will see that the list is "visible", however it is below and hidden by all instances created after it.
If you created a div with inputs (one input being the autocomplete), then you create the automplete then the dialog instances, the autocomplete will never show. If you create the dialog then the autocomplete, no problem. The problem is the z-order
I have faced the same issue. For now to fix this, i'm creating widget on the input once input is in focus. It will help you solve the issue.
You can look for the help on
making sure some event bing only when needed
Sample code will look like this
$( "#target" ).focus(function() {
//I don't care if you manipulated the DOM or not. I'll be cautious. ;)
(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
})();
// use a flag variable if you want
});
This solved my problem. Hope its the solution you were looking f

FB.XFBML.parse does not reparse FB widgets

I have a function call back on auth.login and would like to reparse my fb:like elements. Other actions are performed during the auth.login callback, and they execute just fine, but the .parse does not! I try executing FB.XFBML.parse(); in the console and it shows undefined and then after three seconds a console message saying 2 XFBML tags failed to render in 30000ms.
Any ideas?
For anyone who happens to run across this question running into the same problem I did...
Basically what I wanted to do was after a user logged into my website, I wanted to refresh the 'Like' button iFrame to reflect such. FB.XFBML.parse(); was only resulting in errors...so I thought "Maybe I'll just refresh the iFrame?" and since I am using jQuery as my framework - I figured I'd stick with it.
So, here's what I ended up doing:
FB.Event.subscribe('auth.login', function(response) {
if(response.status == 'connected') {
$("#login_fb").hide(); // was already doing this part
$('#like_fb > span > iframe').attr('src', function(i,val) { return val; }); // this is what I wanted to refresh
//FB.XFBML.parse(); -- THIS WAS GENERATING AN ERROR
}
});
Hopefully this will help someone else!

ie9: annoying pops-up while debugging: "Error: '__flash__removeCallback' is undefined"

I am working on a asp.net mvc site that uses facebook social widgets. Whenever I launch the debugger (ie9 is the browser) I get many error popups with: Error: '__flash__removeCallback' is undefined.
To verify that my code was not responsible I just created a brand new asp.net mvc site and hit F5.
If you navigate to this url: http://developers.facebook.com/docs/guides/web/#plugins you will see the pop-ups appearing.
When using other browsers the pop-up does not appear.
I had been using the latest ie9 beta before updating to ie9 RTM yesterday and had not run into this issue.
As you can imagine it is extremely annoying...
How can I stop those popups?
Can someone else reproduce this?
Thank you!
I can't seem to solve this either, but I can at least hide it for my users:
$('#video iframe').attr('src', '').hide();
try {
$('#video').remove();
} catch(ex) {}
The first line prevents the issue from screwing up the page; the second eats the error when jquery removes it from the DOM explicitly. In my case I was replacing the HTML of a container several parents above this tag and exposing this exception to the user until this fix.
I'm answering this as this drove me up the wall today.
It's caused by flash, usually when you haven't put a unique id on your embed object so it selects the wrong element.
The quickest (and best) way to solve this is to just:
add a UNIQUE id to your embed/object
Now this doesn't always seem to solve it, I had one site where it just would not go away no matter what elements I set the id on (I suspect it was the video player I was asked to use by the client).
This javascript code (using jQuery's on document load, replace with your favourite alternative) will get rid of it. Now this obviously won't remove the callback on certain elements. They must want to remove it for a reason, perhaps it will lead to a gradual memory leak on your site in javascript, but it's probably trivial.
this is a secondary (and non-optimal) solution
$(function () {
setTimeout(function () {
if (typeof __flash__removeCallback != "undefined") {
__flash__removeCallback = __flash__removeCallback__replace;
} else {
setTimeout(arguments.callee, 50);
}
}, 50);
});
function __flash__removeCallback__replace(instance, name) {
if(instance != null)
instance[name] = null;
}
I got the solution.
try {
ytplayer.getIframe().src='';
} catch(ex) {
}
It's been over a months since I last needed to debug the project.
Facebook has now fixed this issue. The annoying pop-up no longer shows up.
I have not changed anything.

Scripty2 : how to close dialog

I am looking for a way to close a scripty2 dialog like this :
http://mir.aculo.us/stuff/scripty2-ui/test/functional/controls_dialog.html
From outside of the dialog (i.e. with firebug command line) but my javascript mojo is a bit limited and after 30 min of going around the DOM I cannot find a way. Any hints ?
NB : scripty2 is a rewrite of script.aculo.us which uses bits of Jquery UI.
Scripty2 UI bits are really based on Prototype classes, not extensions to DOM elements, so you can't use $$() to fetch an existing dialog and close it like you might think. It must be stored in a javascript variable.
var dialog = new S2.UI.Dialog({ // The class must be saved in a
variable
content: "Consulting the server. Please wait."
});
dialog.open(); // We open
new Ajax.Request('/answers', {
onComplete: function(){
alert("Done!");
dialog.close(); // And close.
}
});
Try pasting these into Firebug:
var dialog = new S2.UI.Dialog({content: "Hello World"});
dialog.open();
dialog.close();
This is the documentation for the dialog box :
http://scripty2.com/doc/scripty2%20ui/s2/ui/dialog.html
To close all the dialogs (elements with class div.ui-dialog) on the page with no ids code would be something like this (untested):
$$('div.ui-dialog').each(function() {this.close();});

Resources