I have two functions, first $('#tabela').on('click', '.buyButton', function() and second function submitAll() How can I call first function from the second?
This will do
First function
function first() {
$('#tabela').on('click', '.buyButton', function() {});
}
In Second function:
function submitAll() {
first();
}
If #tabela is a button then use onClick="first();"
Give the first function a name
function tabelaOnClick() {
$('#tabela').on('click', '.buyButton', function() {});
}
Call it inside the second one
function submitAll() {
...
tabelaOnClick();
...
}
EDIT
If you want to click the button, you may just want to use $('#tabela').click()
If you want to fire the onClick event, better give the handle function a name, and call it from both onClick function and submitAll function.
how about using $('#tabela').trigger('click') ?
Related
I am trying to trigger a function which hides or show the images on the basis of data i have written two function one which calls the api which is in created hook and second function which renders the image . The problem is how do i call that second function after the dom is loaded , right now when i am trying to call in the first function or created it is returning me error that css cannot be changed of null.I have tried using mounted function with newtick but its still firing the render_badges function first and hence values are null inside
created:function(){
this.loadlike()
},
methods:{
loadlike:function(){
var self = this
this.$http.get('/api/user_profile').then(function (res) {
self.tasksdata = res.body
self.badges = self.tasksdata.data2
console.log(self.badges)
console.log(this.tasksdata)
console.log(this.max)
})
},
getHumanDate : function (date) {
return moment(date, 'YYYY-MM-DD hh-mm-ss').locale("en-gb").format('LL');
},
render_badges:function(){
var self = this
var counter = 0;
self.badges.map(function(e){
counter ++;
console.log(counter)
if(counter <=self.max){
document.getElementById("i").style.display = "initial";
}
else{
document.getElementById("i").style.display = "none";
}
})
},
mounted: function () {
this.$nextTick(function () {
this.render_badges();
})
}
Rather than manipulating the DOM, you should use v-if on the element itself that turns it on or off based on data. It is a different way of thinking than direct DOM manipulation learned in the jQuery days. Read more in the Vue docs about conditional rendering.
If you are wanting to trigger once the DOM is available, use mounted()
I have an export.function that adds a layout to a view and inside that function I have created an other exports. function. Is it somehow possible to call the function that was created inside the first function?
exports.AddLayout = function() {
//adds My layout
exports.UpdateLayout = function() {
//updates My layout
};
};
I'm new to Mootools and I have found that I have to use the click element but I'm not 100% sure where I am meant to put it in the below code:
function setInStockOption (labels, e) {
active = false;
labels.some (function (item,index) {
if(item.hasClass ('selected')) {
if(item.hasClass ('unavailable')) {
item.removeClass('selected');
item.addClass ('unselected');
active = true;
} else {
return true;
}
}
if(active) {
if (!item.hasClass ('unavailable')) {
e.target = this;
item.fireEvent ('click', e);
active = false;
return true;
}
}
});
}
window.addEvent('load', function(e) {
var labels = $$('div.option-radios label.radio');
setInStockOption(labels, e);
});
I basically need to add the class selected on click instead. At the moment this script is adding the selected class to the first child of Radio in the html and then when you click on others it'll add the class selected. I basically want all the classes to be unselected when the page loads
.
Any ideas?
You'll want something like this:
window.addEvent('domready', function(e) {
$$('div.option-radios label.radio').each(function(label, i) {
label.addEvent('click', function(event) {
event.target.toggleClass('selected');
});
});
});
Note that this uses the Array.each method instead of Array.some. The latter doesn't do what you expect. It then registers a click event on every label which simply toggles the selected class on the event target.
Then you can add other initialization code to the each loop and more logic to the click event handler.
I also used the domready event which is usually preferred over load since it fires earlier.
Here's a fiddle to play around with.
Let's say I have a series of animations that I want to execute in sequence. If I do it like this, am I creating a huge call stack that eats up more memory than necessary?
function ch1():void {
var someVar:uint;
function doThis();
...
...
ch2();
}
function ch2():void {
var someOtherVar:String;
function doThat();
...
...
ch3();
}
function ch3():void {
var evenMoreVar:Number;
function doMore();
...
...
ch4();
}
Would it be better to call the next function by doing something like this to avoid a huge call stack?
function ch1():void {
addEventListener("ch1_end",ch2);
var someVar:uint;
function doThis();
...
...
dispatchEvent(new Event("ch1_end"));
}
Using events is a better way to deal with sequences like yours, but in some simple cases you can just delay each call a little so you can be sure they will not run in the same time and cause freezing your swf , try to use something simple like setTimeout and see the results, if it is not good then you should try useing the events as you have described in your question .
var nextCallDelay:Number = 20; // in milliseconds, change it to fit your needs
function ch1():void {
var someVar:uint;
function doThis();
...
...
setTimeout(ch2, nextCallDelay);
}
function ch2():void {
var someOtherVar:String;
function doThat();
...
...
setTimeout(ch3, nextCallDelay);
}
function ch3():void {
var evenMoreVar:Number;
function doMore();
...
...
setTimeout(ch4, nextCallDelay);
}
How about you return something instead so you don't have that huge stack of interconnected functions ?
function ch1():void {
return true
}
function ch2():void {
return true
}
function myAnim(){
var ani1 = ch1();
var ani2 = ch2();
}
i have this element to which various change events are applied
how can i trigger my own function after all change events have occurred in mootools
a sample scenario is a drop down list
$('ddl').addEvent('change', function () {
// some ajax call going on here and which i can't affect
// as the page is generated that way
});
i now want to call my function right after the change event is done but adding another change event will not do as i believe the events are executed async
pass on a callback function through the onComplete of the ajax that you reference.
eg:
$("ddl").addEvents({
change: function() {
new Request({
method: "get",
url: "somefile.php",
onComplete: function() {
// run your next stuff from within here, referencing
// this.response.text or whatevever and call up another function.
}
}).send("action=checkuser&id="+this.get("value").trim());
}
});
there's also the Chain class - http://mootools.net/docs/core/Class/Class.Extras#Chain but as you have async stuff going on, you really need the onComplete on the Request.