I've got abit of a strange problem, that I just can't seem to solve! It's part of a big framework I'm writing, but I've wrote some test code which has the same problem. See the following:
!function ($, window, undefined) {
// BASE FUNCTION
var test = function (selector, context) {
return new test.fn.init(selector, context);
};
// SELECTOR FUNCTIONS
test.fn = {
selector: undefined,
init: function (selector, context) {
// Use jQuery to build selector object
this.selector = $(selector, context);
return this;
},
// Create a popup dialog
popup: function (options) {
this.selector.dialog();
}
},
// Expose Carbon to the global object
window.test = test;
}(window.jQuery, window);
Now when I use the following:
test('#popupLink').popup();
I get "TypeError: test("#popupLink").popup is not a function". I know it's partly working, as I can do use standard jQuery functions if I do something like:
test('#popupLink').selector.hide();
Any help would be greatly appreciated, as I'm having a mental block right now. Thanks in advance! :)
Update
I've used console.log to view the returned object, and it only has the selector element in, which makes sense as I didn't use prototype. How can I fix that?
I've got abit of a strange problem, that I just can't seem to solve! It's part of a big framework I'm writing, but I've wrote some test code which has the same problem. See the following:
!function ($, window, undefined) {
// BASE FUNCTION
var test = function (selector, context) {
return new test.fn.init(selector, context);
};
// SELECTOR FUNCTIONS
test.fn = {
selector: undefined,
init: function (selector, context) {
// Use jQuery to build selector object
this.selector = $(selector, context);
return this;
},
// Create a popup dialog
popup: function (options) {
this.selector.dialog();
}
},
// Expose Carbon to the global object
window.test = test;
}(window.jQuery, window);
Now when I use the following:
test('#popupLink').popup();
I get "TypeError: test("#popupLink").popup is not a function". I know it's partly working, as I can do use standard jQuery functions if I do something like:
test('#popupLink').selector.hide();
Any help would be greatly appreciated, as I'm having a mental block right now. Thanks in advance! :)
Update
I've used console.log to view the returned object, and it only has the selector element in, which makes sense as I didn't use prototype. How can I fix that?
Share Improve this question edited Jun 19, 2012 at 21:39 jleck asked Jun 19, 2012 at 21:22 jleckjleck 8611 gold badge8 silver badges14 bronze badges 3- Change test.fn to test.prototype or test.fn.prototype – jasssonpet Commented Jun 19, 2012 at 21:27
- I've added "test.fn.prototype = test.fn", but it still doesn't work, exactly the same error :( – jleck Commented Jun 19, 2012 at 21:35
- You must assign popup to the prototype of test.fn.init. – Felix Kling Commented Jun 19, 2012 at 21:48
2 Answers
Reset to default 3(function ($, window) {
// BASE FUNCTION
var test = function (selector, context) {
return new test.fn.init(selector, context);
};
// SELECTOR FUNCTIONS
test.fn = test.prototype = {
constructor: test,
init: function (selector, context) {
// Use jQuery to build selector object
this.selector = $(selector, context);
return this;
},
// Create a popup dialog
popup: function (options) {
console.log('popup');
return this;
}
};
// Expose test to the global object
window.test = test;
}(window.jQuery, window));
test.fn.init.prototype = test.fn;
You missed the constructor and the prototype chain on the created instances of test.
In my case, the error was while adding integration tests and I didn't notice that the function I am trying to call belongs to a mocked class. It is easy to get confused because when trying to navigate (I am using IntelliJ) the IDE goes to the implemented function.
Mocking the function mentioned in the error resolved that.