I'm trying to write an add-on for firefox and i'm having a problem-
When the user right-clicking on the page the add-on is adding an element to the page's body using
document.body.appendChild(myElement);
myElement has a button and i want that "onClick" it will call a xmlHttpRequest and handle the response in some why. I've tried to inject the two scripts using
document.getElementsByTagName('head')[0].appendChild(xmlRequestFunction);
document.getElementsByTagName('head')[0].appendChild(handleResponseFunction);
but it didn't work because of (i assume) a security problem.
What can i do?
Thanks
Do not use onclick when working with content, use addEventListener instead (see https://developer.mozilla.org/en/XPCNativeWrapper#Limitations_of_XPCNativeWrapper if you need to know why). Like this:
myElement.addEventListener("click", function(event)
{
var request = new XMLHttpRequest();
...
}, false);
Related
I am working on a add-on SDK extension which uses a pageMod object with a content script that adds a DIV tag to the DOM (this tag behaves like a button) when the action button is being clicked.
I am trying to find a solution where I can delete that newly added DOM element when the extension is being disabled or removed and I've had no luck so far.
The first thing that I've tried was to use the AddonManager.addAddonListener(listener) approach where I would listen for a onUninstalling or a onDisabling event and then communicate with the content script but I got nowhere.
What I've tried next was to make use of the exports.onUnload solution where I tried to send a message from the pageMod's worker to the content script and deal with the removal of the DIV from there but it seems that the content script is no longer responsive by the time the onUnload function is being triggered.
Is there really no way to clean up the modified DOM when the extension is being disabled/removed?
At your content script listen for the detach event.
self.on("detach", function(reason){
//remove that div
});
In #paa's answer the "port" part is missing:
e.g., from the docs
var oldInnerHTML = window.document.body.innerHTML;
window.document.body.innerHTML = "eaten!";
self.port.on("detach", function() {
window.document.body.innerHTML = oldInnerHTML;
});
I am not using PageMod nd this works for me.
I am trying to use object-oriented code to handle an AJAX upload. When I run the code, it sees the file, creates the XMLHttpRequest object, but I cannot seem to get the progress event to fire. The full source of my code can be found here: http://pastebin.com/89QawbS6
Here is a snippet:
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", MyObj.trackProgress, false);
xhr.open("POST", url, true);
...
Then in that same object, different method:
trackProgress: function (event) {
console.log(event);
// stuff that should calculate percent
}
But that console.log(event) never fires.
Please note: I know jQuery is great, and there are a dozen awesome upload plugins that I could just use instead. I am not doing this for a class or homework, I just want to understand the process better myself. So offering a jQuery plugin as an answer is not what I'm looking for. I'm trying to make myself less dependent on jQuery.
This FF bug might be the reason for your issue. It's reported on MacOSX and another similar bug on Linux. I don't know if that matters but I tested on Windows. I still believe that your code is fine.
Object doesn't support property or method 'ready'
I am getting this error while using custom dropdown list with js mootools slider. I have downloaded js slider and custom dropdown and while trying to merge it, I am facing this error.
I have downloaded the js slider plugin from here:
http://landofcoder.com/index.php?option=com_jdownloads&Itemid=372&task=view.download&cid=6
Can anyone tell me what's wrong with it ?
Make sure what you have mootool and jquery required. You can open Inspector in Google Chrome and type in console tab MooTools and jQuery.
This libraries has conflict on global variable $.
document.id('element_id') // Mootools' "$"
jQuery('selector or something') // jQuery's "$"
I hope in you situation this should help
jQuery(document).ready(function() {
// initialize you code
});
Couple questions about the implementation of the XHR request:
I am trying to make a form in popup.html that allows for the filling of a box with text (in popup.html) and submits that to a remote website using get and replaces the contents of the box with the return of the php (json).
Heres the code so far:
Any idea why when I click submit nothing happens?
Also the manifest permissions:
"permissions": [
"https://*/",
"https://*/*"
]
}
forms don't need permissions at all to do a cross domain post (in theory). That being said, the popup.html never reloads in a browser action (or page action) when a form is submitted.
An easy thing to do is to capture onsubmit on the form and simply do an XMLHttpRequest attaching the form as per the Mozilla MDC site.
Which in summary is (copied from mozilla):
var formElement = document.getElementById("myFormElement");
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitform.php");
xhr.send(new FormData(formElement));
I am trying to use jQuery load() function to get content from another page via AJAX. It works on Firefox, Google Chrome, but not in Internet Explorer 7 & 8.
Here is the page I am developing: http://139.82.74.22/70anos/no-tempo
All the jQuery code is working normally in Internet Explorer, but the specific part that should bring the destination page isn't. To understand the problem, one must click the "Há 80 anos" or "Há 70 anos" block and click any of the links inside it. It should open a panel underneath the timeline with the content of the block.
Here is the code that pulls the external content:
jQuery('a.link-evento').click(function() {
var strUrl = jQuery(this).attr('href');
var objBlocoConteudo = jQuery(this).parents('div.view-content').next().find('div.conteudo-evento')
objBlocoConteudo.css('display','block').animate({ opacity: 1}, {duration: 350}).load(strUrl + ' #area-conteudo-evento');
return false;
});
With this code I am grabbing the URL of the destination page and telling the browser not to do a normal request, but to open it using jQuery load() function.
Any help appreciated fixing this IE... Thank you.
I'm pretty sure AJAX requests have to be made to a domain name in IE as a security precaution. If you map a domain to your 139.82.74.22 address your problem should go away.
You cant make an .Load(http://139.82.74.22/..), it would have to be .Load("http://mysite.com/mypage")