I want to pass an object called hotTraitement in parameters of an event .click of jquery. So I declare my object like this :
$(window).load(function(){
container = document.getElementById('tab_traitement');
var hotTraitement = new Handsontable(container, {
data: data_traitement});
});
And I'm trying to pass this object like this :
$('#submit_button_traitement').click(function({hotTraitement:hotTraitement})
{
console.log(hotTraitement);
});
But it's not working, hotTraitement is undefined.
Help please !
Try this.
Define the hotTraitement variable as global one.
$('#submit_button_traitement').click({hotTraitement:hotTraitement},function(e){
console.log(e.data.hotTraitement);
});
SIMPLE DEMO: FIDDLE
Update:
Try this way.
$(document).ready(function() {
var container = document.getElementById('tab_traitement');
var hotTraitement = new Handsontable(container, {
data: data_traitement
});
//...
$('#submit_button_traitement').click({
hotTraitement: hotTraitement
}, function(e) {
console.log(e.data.hotTraitement);
});
});
why you want to pass hotTraitement parameter in onclick function instead you can simply access this inside your onclick even like this
$(window).load(function(){
container = document.getElementById('tab_traitement');
var hotTraitement = new Handsontable(container, {
data: data_traitement});
$('#submit_button_traitement').click(function(){
console.log(hotTraitement);
});
});
Try substituting $(document).ready() for $(window).load() ; utilizing .on() , data property of event
$(document).ready([
function() {
// define `hotTraitement`
hotTraitement = {
"abc": 123
};
},
function() {
// set `event.data` to `hotTraitement`
$("#submit_button_traitement")
.on("click", hotTraitement, function(event) {
// do stuff with `event.data` : `hotTraitement`
console.log(event.data)
})
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="submit_button_traitement">click</div>
Related
Short question, how can I more efficiently write below code so I don't repeatedly assign the parent variable a new value?
Is this bind function the same as using object literals?
function bindAuthorPopup() {
$(".insight-author").on({
mouseenter: function (event) {
var parent = $(this).parent('div').find('.popup-content');
parent.toggleClass('show');
},
mouseleave: function (event) {
var parent = $(this).parent('div').find('.popup-content');
parent.toggleClass('show');
},
});
}
You can do something like this:
function bindAuthorPopup() {
$(".insight-author").each(function() {
var elem = $(this);
var parent = elem.parent('div').find('.popup-content');
elem.on({
mouseenter: function (event) {
parent.toggleClass('show');
},
mouseleave: function (event) {
parent.toggleClass('show');
},
});
});
}
This works even if the callbacks are different. If they're always the same, then you can use what #sh1da9440 wrote.
You can pass space-separated event types to the "on" method.
function bindAuthorPopup() {
$(".insight-author").on('mouseenter mouseleave', function (event) {
var parent = $(this).parent('div').find('.popup-content');
parent.toggleClass('show');
});
}
So basically I have two functions on my click() trigger.
var firstFunction = function() {
var id = $(this).attr('id');
alert(id);
};
var secondFunction = function() {
//something here
};
$('#trigger').click(function() {
firstFunction();
secondFunction();
});
On firstFunction() I'm trying to get $(this).attr('id') but it's returning undefined.
I know it has something two do with calling multiple functions because it works when I only call one function
$('#trigger').click(firstFunction);
Sample Fiddle here
As per your existing approach this refers to Window object not the element which invoke the event.
You can use .bind()
The bind() method creates a new function that, when called, has its this keyword set to the provided value,
$('#trigger').click(function() {
firstFunction.bind(this)();
secondFunction.bind(this)();
})
var firstFunction = function() {
var id = $(this).attr('id');
console.log(id);
};
var secondFunction = function() {
//something here
var id = $(this).attr('id');
console.log(id);
};
$('#trigger').click(function() {
firstFunction.bind(this)();
secondFunction.bind(this)();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trigger">Click Me</button>
Fiddle
It's returning undefined because you aren't applying the same this as the event. You can achieve this by using call or apply instead of calling it directly.
$('#trigger').click(function() {
firstFunction.call(this);
secondFunction.call(this);
});
The this inside the firstFunction will be the window object itself - pass this to the function to fix it - see demo below:
var firstFunction = function(el) {
var id = $(el).attr('id');
alert(id);
};
var secondFunction = function() {
//something here
};
$('#trigger').click(function() {
firstFunction(this);
secondFunction(this);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trigger">Click Me</button>
Another way is to use Function.prototype.call to bind a this argument to the funciton:
var firstFunction = function() {
var id = $(this).attr('id');
alert(id);
};
var secondFunction = function() {
//something here
};
$('#trigger').click(function() {
firstFunction.call(this);
secondFunction.call(this);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trigger">Click Me</button>
You can pass the jQuery object element and than only use it in your function:
var firstFunction = function($el) {
var id = $el.attr('id');
console.log(id);
};
var secondFunction = function() {
//something here
};
$('#trigger').click(function() {
firstFunction($(this));
secondFunction();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trigger">Button</button>
click() handler receives event as parameter. Pass it because this is not available in the scope of firstFunction().
Like this:
var firstFunction = function(target) {
var id = $(target).attr('id');
alert(id);
};
var secondFunction = function() {
//something here
};
$('#trigger').click(function(e) {
firstFunction(e.target);
secondFunction();
});
Nothing to do major, it's quite simple.
If you are calling a function and into that function you need an event to be used, then pass a reference in the function parameter.
I have updated the code in your Fiddle and updated with Mine:
Step 1:
$('#trigger').click(function(event) {
var that = this;
firstFunction(that);
secondFunction(that);
});
Created a variable that assigned this to that and passed into function parameter.
Note that, writing event in the click function is required to define this as a local click reference (Not a window)
Step 2:
Passed that rather than this, to make sure the reference is from click function only not of window.
var firstFunction = function(that) {
var id = $(that).attr('id');
alert(id);
};
Updated Fiddle
I am trying to trigger a function from a html file that is located in another function in js file. I am trying to use the trigger method but i cannot make it to work.
Any suggestions how to do this? FIDDLE
<div id="result4" style="color:white; background:black">
from function
</div>
<script>
var TEST = new test({
type: "image",
file: "test.jpg",
breakingPoint: 100
});
TEST.trigger('reset');
</script>
JS
function test(args) {
$this.on('reset', function() {
$("#result4").html("new text");
console.log("OK");
});
}
Looking at the console log, your fiddle has an error:
$this.on('reset', function() {
$("#result4").html("new text");
console.log("OK");
});
$this is not defined.
and looking at the documentation for trigger:
http://api.jquery.com/trigger/
you are invoking it wrong. You are creating your own object that does not have a trigger method.
You need to define $this and return it as the object for test since trigger is a jquery function and not a native JavaScript Object function.
function test(args) {
var $this = $(this); // declare $this
var default_options = {
breakingPoint: 2000
};
var options = $.extend({}, default_options, args);
$("#result1").html(options.type);
$("#result2").html(options.file);
$("#result3").html(options.breakingPoint);
$this.on('reset', function() {
$("#result4").html("new text");
console.log("OK");
});
return $this;
}
var TEST = new test({
type: "image",
file: "test.jpg",
breakingPoint: 100
});
TEST.trigger('reset');
Wrap you tag code in jquerys ready event. This will execute it once the DOM is loaded instead of as it is parsed.
Maybe this is what you're looking for:
<script>
$(document).ready(function(){
var TEST = test({
type: "image",
file: "test.jpg",
breakingPoint: 100
});
TEST.reset();
});
</script>
In JS File
var test = function(options){
var that = {};
// you can use type, file & breaking point with option.type options.file etc..
that.reset = function() {
$("#result4").html("new text");
console.log("OK");
};
return that;
};
Can u help with the click event?? here is my code.
$(function() {
var Trainee = Backbone.Model.extend();
var TraineeColl = Backbone.Collection.extend({
model: Trainee,
url: 'name.json'
});
var TraineeView = Backbone.View.extend({
el: "#area",
template: _.template($('#areaTemplate').html()),
render: function() {
this.model.each(function(trainee){
var areaTemplate = this.template(trainee.toJSON());
$(this.el).append(areaTemplate);
},this);
return this;
}
});
var trainee = new TraineeColl();
var traineeView = new TraineeView({model: trainee});
trainee.fetch();
trainee.bind('reset', function () {
traineeView.render();
});
});
my o/p after(trainee.toJSON) is
Sinduja
E808514
HPS
Shalini
E808130
HBS
Priya
E808515
HSG
Everything is fine with the o/p...
Now i want to get this o/p oly after a button click....
Simply add an event to that button. Since you're using jQuery, that should be simple :
$(function () {
$("#your_button_id").on("click", function (e) {
e.preventDefault();
// your code here
});
});
I don't understand what the o/p is...
Anyway, you can do something like that :
trainee.bind('reset', function () {
$('button').click(function() {
traineeView.render();
});
});
with the proper jQuery selector $('button') for your button...
How do I register my call back to formRegister in Mootools.
http://mootools.net/docs/more/Forms/Form.Validator
// Validation.
new Form.Validator.Inline(myForm,{
formValidate:myCallback });
function myCallback(){ alert("form
Valid")}
This is one way of doing it. From the Mootools Demo you can do the following by attach an onSuccess callback.:
window.addEvent('domready', function(){
// The elements used.
var myForm = document.id('myForm'),
myResult = document.id('myResult');
// Labels over the inputs.
myForm.getElements('[type=text], textarea').each(function(el){
new OverText(el);
});
// Validation.
new Form.Validator.Inline(myForm);
// Ajax (integrates with the validator).
new Form.Request(myForm, myResult, {
requestOptions: {
'spinnerTarget': myForm
},
extraData: { // This is just to make this example work.
'html': 'Form sent.'
},
onSuccess: function(result){ //callback function added to demo
console.log(result);
}
});
}