Content Js Function Not Linked Error - "Function Not Defined "

Question

working on a Firefox addon I am Calling a content js and an html page using the add-on script below is the code snippet for the add-on script.

var textChk = require("sdk/panel").Panel({
    position: {
        top: 0,
        right: 0
    },
    hight: 100,
    contentURL: data.url("textChk.html"),
    contentScriptFile: data.url("content.js")
});
function handleClick() {
    textChk.show();
    textChk.port.on("first-para", function(firstPara) {
      console.log(firstPara);
    });
    textChk.port.emit("get-first-para");
}

and the code for the content script is as follows

function loginChk()
{
    self.port.on("get-first-para", getFirstPara);
}

function getFirstPara() {
    var userId = document.getElementById("usermail").value;
    var pass = document.getElementById("password").value;
    if (userId.length > 0 && pass.length > 0) {
        var firstPara = userId + " ** " + pass;
        self.port.emit("first-para", firstPara);
    }
}

now when i call the loginChk() function i get the following error

ReferenceError: loginChk is not defined

I am unable to figure out where is the issue as this was working earlier in another add-on code . can someone please suggest me how to rectify this error ?

No nothing much yet .,, send me the link if you are available on irc now .. — OshoParth
– OshoParth, Commented Aug 13, 2015 at 6:18
I'm on IRC but not free right now :( but jump on ill be free in like 45min :) client00.chat.mibbit.com/… — Noitidart
– Noitidart, Commented Aug 13, 2015 at 6:19

ZER0 · Accepted Answer · 2015-08-13 06:58:33Z

We discussed a bit over IRC, but just for future reference.

You can start using "./" as shortcut for data folder (therefore you don't need to require data module anymore for such trivial matter); and remove the contentScriptFile:

var textChk = require("sdk/panel").Panel({
  position: {
    top: 0,
    right: 0
  },
  hight: 100,
  contentURL: "./textChk.html"
});

"content.js" can be included directly in your "textChk.html" file, just with a script tag:

<!-- textChk.html -->
<html>
  <head>
     <!-- meta, etc -->
     <script src="content.js"></script>
  </head>
  <!-- rest of your file, body, etc -->
</html>

From content.js, now you can send and receive message directly from your add-on code, using addon.port instead of self.port, see the documentation about sdk panel for further details.

The handleClick, that I supposed is related to a click of a button – by the way, do you know you can attach a panel to a button? – that shows the panel, can also a bit improved. First of all, you can just add the listener outside, otherwise you'll add a new listener every time you show the panel and you probably want that once. Plus, you want get the paragraph only when the panel is shown, so:

var textChk = require("sdk/panel").Panel({ /* ...*/ });

textChk.port.on("first-para", (firstPara) => console.log(firstPara));

textChk.on("show", () => textChk.port.emit("get-first-para"));

function handleClick() {
  textChk.show();
}

That is would be already a better events flow.

Said that, without the code that actually call loginChk I can't tell what's wrong, because I cannot see the flow of your add-on. What I can tell, if loginChk is actually adding only a listener, you don't need that, you can just put as I did without wrapping it in any functions.

Hope that it helps.

Collectives™ on Stack Overflow

Content Js Function Not Linked Error - "Function Not Defined "

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related