i want to create some javascript object with few functions, but i get a exception
undefined is not a function
JS:
var Buses = null;
$(function () {
Buses = function() {
return {
Test: function () {
console.log('test public function');
}
}
}
});
HTMl:
<button onclick="Buses.Test()">test</button>
<script type="text/javascript" src="js/buses.js" ></script>
What is wrong?
Your Buses variable is a function that returns a function so in the HTML it must be called like this
<button onclick="Buses().Test()">test</button>
While you are using jQuery, a better solution would be to give the button an and then assign the click handler right in the javascript:
var Buses = null;
$(function () {
Buses = function() {
return {
Test: function () {
alert('test public function');
}
}
}
$("#button").click(function() {Buses().Test()});
});
Here's the fiddle http://jsfiddle.net/fe5hxo60/
Related
How can I add on event listener for custom object.
For example:
(function () {
this.EmojiPicker = (function () {
function EmojiPicker(options) {
// ...
}
EmojiPicker.prototype.test = function () {
//...
};
return EmojiPicker;
})();
}).call(this);
I want to add
let emojiPicker = new EmojiPicker();
emojiPicker.on("change", function () {
//
});
I have a simple example modified from you code.
See if this can help.
The main idea is to trigger an event by $(emojiPicker).trigger('change');,
so that you can receive with $(emojiPicker).on("change", function () {});
<html>
<head>
<script type="text/javascript" src="./jquery-1.7.1.js"></script>
<script>
(function () {
this.EmojiPicker = (function () {
function EmojiPicker(options) {
// ...
}
EmojiPicker.prototype.test = function () {
//...
$(emojiPicker).trigger('change');
};
return EmojiPicker;
})();
let emojiPicker = new EmojiPicker();
$(emojiPicker).on("change", function () {
alert("triggered");
});
}).call(this);
</script>
</head>
<body>
</bofy>
</html>
More information from Custom events in jQuery?
I have three aspx pages that I wanted to share the same JS file each has its own init function.
Is there a better way to do this?
ASPX Page
<script>
$(document).ready(function () {
ReimbursementDrug.init()
});
</script>
JS Page
var ReimbursementProgram = function () {
return {
init: function () {
GetAllReimbursement();
}
}
}();
var ReimbursementAsset = function () {
return {
init: function () {
GetAllAsset();
}
}
}();
var ReimbursementDrug = function () {
return {
init: function () {
GetAllDrug();
}
}
}();
Give an element on those pages an unique id or class and apply a selector in the .js file.
$('.ReimbursementDrugClass').each(function () {
ReimbursementDrug.init();
});
Or
if ($('#ReimbursementDrugID').length) {
ReimbursementDrug.init();
}
I am trying to modify an application by overriding certain functions. I cannot release the code due to enterprise ownership. My code looks like this:
<html>
<head>
<script type="text/javascript" src="https://mylink.scriptX.js"></script>
// Some other scripts and css references
</head>
<body>
<script>
$(document).ready(function () {
form_script = my_script =
{
initialization:function (mode, json_data) {
this.parent_class.initialization(mode, json_data);
//Mycode to override the functions in scriptX.js is below:
var x= {};
function inherit(x) {
var y= {};
y.prototype = x;
return y;
};
(function ($) {
var OverrideFunctions = inherit($.my_methods);
OverrideFunctions.function1 = function () { ...};
OverrideFunctions.function2 = function () { ...};
OverrideFunctions.function3 = function () { ...}
})(jQuery);
}
//some original code here
}
</script>
//some other code here
</body>
</html>
Now the content of the scriptX.js is something like this:
(function ($) {
var my_methods = {
function1 = function () { ...};
function2 = function () { ...};
function3 = function () { ...}
}
})(jQuery);
The problem is that, I am noticing that the debugger skips the whole block of code since OverrideFunctions.function1 = function () { to the end })(jQuery);
So my functions are not being executed and thus the application is not changed. I was wondering if that could be related
I have two prototypes in my jquery script :
script1.prototype.initScript = function() {
//first one
this.saveGrid = function () {
alert("here");
}
};
script1.prototype.otherFunction = function () {
//second
//script1.initScript.saveGrid ?
};
I'd like to call saveGrid in otherFunction. How can I do that?
Edit :
And there ?
script1.prototype.initScript = function() {
//first one
this.saveGrid = function () {
alert("here");
}
};
script1.prototype.otherFunction = function () {
//second
$('button').on("click", function(){
//call savegrid here
});
};
Thanks.
You can access the function over this, like you already did in you example while creating the function saveGrid.
You should instead ask yourself, if this is a good idea, to create a function in another function and re-use them elsewere. What will happen, if you call otherFunction before initScript?
function script1() {}
script1.prototype.initScript = function() {
this.saveGrid = function() {
alert("here");
}
};
script1.prototype.otherFunction = function() {
this.saveGrid();
};
var s = new script1();
s.initScript();
s.otherFunction();
For you second example you have to store this before creating your event listener.
function script1() {}
script1.prototype.initScript = function() {
this.saveGrid = function() {
alert("here");
}
};
script1.prototype.otherFunction = function() {
var that = this;
$('button').on("click", function(){
that.saveGrid();
});
};
var s = new script1();
s.initScript();
s.otherFunction();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click me</button>
Prototype It depends on the type .
the correct way is defined as a prototype , so you can call them in different situations
script1.prototype.saveGrid=function () {
alert("here");
}
script1.prototype.initScript = function() {
//first one
this.saveGrid()
};
script1.prototype.otherFunction = function () {
//second
//this.saveGrid()
};`
or you can define an object which then associates the prototypes
var script1=(function () {
function initScript(){
this.saveGrid();
}
function otherFunction(){
this.saveGrid();
}
script1.prototype.saveGrid=function () {
alert("here");
}
});
is there any chance to create a function that i can call?
if i'm putting the following lines in the document ready function it works:
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
this.brightness(brightness);
this.render(function () {
check = this.toBase64();
});
But if i'm doing this i can't call. So I tried this:
function icancall()
{
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
this.brightness(brightness);
this.render(function () {
check = this.toBase64();
});
}
So i thought i can call this with icancall(); But nothing happened. What am I doing wrong?
What i want do: executing the Caman function on a button click.
I hope you can help me !
function resz(){
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
try {
this.render(function () {
var image = this.toBase64();
xyz(image); // call that function where you pass filters
});
} catch (e) { alert(e) }
});
}
[Apply CamanJS filters by this function]
function xyz(image){
var filters_k = $('#filters');
filters_k.click(function (e) {
e.preventDefault();
var f = $(this);
if (f.is('.active')) {
// Apply filters only once
return false;
}
filters_k.removeClass('active');
f.addClass('active');
var effect = $.trim(f[0].id);
Caman(canvasID, img, function () {
if (effect in this) {
this.revert(false);
this[effect]();
this.render();
}
});
});
}