Here's my relevant code:
var dropdown = {
init: function() {
$(".dropdown").click(".dropdown", dropdown.openDropdown, dropdown.secondFunction);
},
openDropdown: function() {
...
}
}
How can I call multiple functions on the click event? I added what I tried to do above.
EDIT:
So this is my new code with your guys help, and I can confirm both functions are being called because when I put alerts in they both trigger, but for some reason the code inside openDropdown right now isn't working. Is it because my $(this) references are off or something?
var dropdown = {
init: function() {
$(".dropdown").click(".dropdown", function() { dropdown.openDropdown(); dropdown.closeDropdowns(); });
},
openDropdown: function() {
$(this).children(".dropdown-menu").show();
$(this).addClass("open");
},
closeDropdowns: function() {
//$(".open").removeClass(".open");
//$(".open").children(".dropdown-menu").hide();
}
}
like this:
var dropdown = {
init: function() {
$(".dropdown").click(".dropdown", function(){ this.openDropdown(); this.secondFunction()});
},
openDropdown: function() {
...
}
}
You can do:
$('.dropdown').on('click', function () {
dropdown.openDropdown();
dropdown.secondFunction();
});
If you want this inside of openDropdown and secondFunction to be the element you would need to use .call.
var dropdown = {
init: function() {
$(".dropdown").on("click", function () {
// The call makes `this` the element in the functions...
dropdown.openDropdown.call(this);
dropdown.secondFunction.call(this);
});
},
openDropdown: function() {
console.log('openDropdown', this);
},
secondFunction: function() {
console.log('secondFunction', this);
}
};
dropdown.init();
var dropdown = {
init: function() {
$(".dropdown").click(".dropdown", function() {dropdown.openDropdown(); dropdown.secondFunction();
});
},
openDropdown: function() {
// first function callback
},
secondFunction: function() {
// second call back
}
};
dropdown.init();
DEMO
Related
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 using Jquery-3.2.1, Jquery-Ui 1.12.1.In my JavaScript file:
window.TruyenOnlineScript = (function () {
var _this = {};
_this.init = function () {
_this.initSearchMobile();
_this.initSidebar();
};
_this.initSearchMobile = function () {
//Open Input Search Mobile
$('.js-open-search-box-mobile').on('click', function (event) {
event.preventDefault();
$('body').addClass('open-search-box');
setTimeout(function () {
$('#js-search-input-mobile').focus()
}, 500);
});
};
_this.initSidebar = function () {
//Open Navbar Moblie
$('.js-open-sidebar').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$('body').addClass('open-sidebar');
});
};
})();
$('document').ready(function () {
window.TruyenOnlineScript.init();
});
But I got the error "init of undefined":
Can anybody show me how to fix it? Thank you!
You are setting window.TruyenOnlineScript to the return value of an Immediately Invoked Function Expression:
window.TruyenOnlineScript = (function () {
. . .
})();
but that expression doesn't return any value and so window.TruyenOnlineScript winds up being undefined (and that's why you can't call init() on undefined).
You need to have the IIFE return an object for TruyenOnlineScript to reference.
window.TruyenOnlineScript = (function () {
var _this = {};
_this.init = function () {
_this.initSearchMobile();
_this.initSidebar();
};
_this.initSearchMobile = function () {
//Open Input Search Mobile
$('.js-open-search-box-mobile').on('click', function (event) {
event.preventDefault();
$('body').addClass('open-search-box');
setTimeout(function () {
$('#js-search-input-mobile').focus()
}, 500);
});
};
_this.initSidebar = function () {
//Open Navbar Moblie
$('.js-open-sidebar').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$('body').addClass('open-sidebar');
});
};
return _this; // <-- Now this will be returned
})();
$('document').ready(function () {
window.TruyenOnlineScript.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Some users have already given you the solution, but I want to show you another way to create the same object. I can't say it's "better", but it's clearer and a little easier to understand:
window.TruyenOnlineScript = {
init: function () {
this.initSearchMobile();
this.initSidebar();
},
initSearchMobile: function () {
//Open Input Search Mobile
$('.js-open-search-box-mobile').on('click', function (event) {
event.preventDefault();
$('body').addClass('open-search-box');
setTimeout(function () {
$('#js-search-input-mobile').focus()
}, 500);
});
},
initSidebar: function () {
//Open Navbar Moblie
$('.js-open-sidebar').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$('body').addClass('open-sidebar');
});
}
};
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();
}
});
});
}
I need to add to DOM some html´s by jquery, and bind some events the generated elements, but i cant syncronize it, where the addEvents function starts, the DOM elements are not created, so the $(".login-log") element is not on DOM yet.
I found this:
Javascript Event Synchronization
Im working on it but dont works for me, that my code, i dont know if i miss something or what:
var Login = function ()
{
var commons = new Commons();
this.init = function()
{
stepOne(stepTwo);
commons.init();
}
function stepOne(callback) {
var AsyncDone = function()
{
callback();
}
loadFiles(AsyncDone);
}
function loadFiles(callback)
{
$(".header-container").load("views/header.html");
$(".content-container").load("views/login.html");
callback();
}
function stepTwo() {
addEvents();
}
function addEvents() {
alert("is here");
$(".login-log").bind("click", function() { alert("fuck"); });
}
}
The syncronizathion makes the alert "is here" to appear before the DOM elements of header and login.html are loaded in DOM.
I know that have to be simple, but i dont find the solution.
Thanks in advice.
My final choose:
this.init = function()
{
loadHeader(addHeaderEvents);
loadTemplate(addTemplateEvents);
loadFooter(addFooterEvents);
commons.init();
}
function loadHeader(callback) {
$(".header-container").load("views/header.html", function() {
callback();
});
}
function addHeaderEvents() {
}
function loadTemplate(callback) {
$(".content-container").load("views/template_login.html", function() {
callback();
});
}
function addTemplateEvents() {
alert("llega");
$(".login-log").bind("click", function() { alert("done"); });
}
function loadFooter(callback) {
$(".footer-container").load("views/footer.html", function() {
callback();
});
}
function addFooterEvents() {
}