How to pass params from click to live function? - javascript

I have two functions click and live. I want to pass a parameter from click to live.I tried something like below but it's not working.
jQuery(document).ready(function(){
var test = 'test' ;
jQuery('.item a').click(test);//pass an argument from here
});
jQuery('.item a').live('click',function(e,test) {
alert(test);//access argument here
});
Is this possible?
Update:
function init() {
//When you click on a link
jQuery('.item a').live('click',function(e,test) {
alert(test);
});
}
jQuery(document).ready(init);
jQuery(document).ready(function(){
var test= 'test';
jQuery('.item a').trigger('click', test);
});
I am expecting an alert.
Edit2:
jQuery(document).ready(function(){
(function($){
$('.item').each(function() {
$(this)[0].oncontextmenu = function() { return false }
});
$.fn.ctrl = function(key, callback) {
if(typeof key != 'object') key = [key];
callback = callback || function(){ return false; }
return $(this).keydown(function(e) {
var ret = true;
$.each(key,function(i,k){
if(e.keyCode == k.toUpperCase().charCodeAt(0) && e.ctrlKey) {
ret = callback(e);
}
});
return ret;
});
};
$.fn.disableSelection = function() {
$(window).ctrl(['a','s','c']);
return this.each(function() {
$(this).attr('unselectable', 'on')
.css({'-moz-user-select':'none',
'-o-user-select':'none',
'-khtml-user-select':'none',
'-webkit-user-select':'none',
'-ms-user-select':'none',
'user-select':'none'})
.each(function() {
$(this).attr('unselectable','on')
.bind('selectstart',function(){ return false; });
});
});
};
$('.item').disableSelection();
})(jQuery);
});
Thanks.

You can use trigger() instead, which allows you to pass arguments;
jQuery(document).ready(function(){
var test = 'test' ;
jQuery('.item a').trigger('click', test); //pass an argument from here
});
jQuery('.item a').live('click',function(e,test) {
alert(test);//access argument here
});

Or You can use hidden field to store params need to pass then read it in click function
jQuery(document).ready(function(){
var test = 'test' ;
jQuery('#hiddenID').val(test);
jQuery('.item a').click(test);//pass an argument from here
});
jQuery('.item a').live('click',function(e,test) {
var test = jQuery('#hiddenID').val();
alert(test);//access argument here
});

You can also try this
jQuery(document).ready(function(){
var test = 'test' ;
$('.item a').trigger({type:'click', myParam:test}); // pass the event object with param
});
$('.item a').live('click',function(e) {
alert(e.myParam); //access param here
});
Also remember live is deprecated instead use on.
Update:
jQuery(document).ready(function(){
var test= 'test';
$('.item a').trigger({type:'click', myParam:test});
});
$('.item a').live('click',function(e) {
alert(e.myParam); //access param here
});

Related

this value of input field .val() not a function

I have this jquery code to check for any value on a given input and then add a simple class if the input has a value.
But in console i receive error that .val() is not a function?
my code is:
$.fn.tkFormControlMaterial = function(){
this
.blur(function () {
if (this.val())
this.addClass('used');
else
this.removeClass('used');
})
.after('<span class="ma-form-highlight"></span><span class="ma-form-bar"></span>');
};
bind will set you free
$.fn.tkFormControlMaterial = function(){
this
.blur(function () {
if (this.val())
this.addClass('used');
else
this.removeClass('used');
}.bind(this))
.after('<span class="ma-form-highlight"></span><span class="ma-form-bar"></span>');
}.bind(this);
I found the solution.
If anyone needs a working sample of my own code above:
$.fn.tkFormControlMaterial = function(){
$(this)
.blur(function () {
if ($(this).val())
$(this).addClass('used');
else
$(this).removeClass('used');
})
.after('<span class="ma-form-highlight"></span><span class="ma-form-bar"></span>');
};
You could also try to use the "self" pattern.
var _self = this;
$.fn.tkFormControlMaterial = function(){
_self
.blur(function () {
if (_self.val())
_self.addClass('used');
else
_self.removeClass('used');
})
.after('<span class="ma-form-highlight"></span><span class="ma-form-bar"></span>');
};

jQuery plugins functions overwrite

I have implemented several jQuery plugins for my current project.
Since some plugins have functions with the same name, the one called in the last one defined.
Here is the definition of my first plugin:
$(function($)
{
$.fn.initPlugin1 = function(parameters)
{
var defaultParameters = {};
$(this).data('parameters', $.extend(defaultParameters, parameters));
return $(this);
};
$.fn.function1 = function(){ console.log('Function 1.'); };
$.fn.callFunction = function(){ $(this).function1(); };
});
And here is the definition of my second plugin:
$(function($)
{
$.fn.initPlugin2 = function(parameters)
{
var defaultParameters = {};
$(this).data('parameters', $.extend(defaultParameters, parameters));
return $(this);
};
$.fn.function2 = function(){ console.log('Function 2.'); };
$.fn.callFunction = function(){ $(this).function2(); };
});
I have also this scenario :
$("#div1").initPlugin1().callFunction();
$("#div2").initPlugin2().callFunction();
For this specific scenario the consoles shows: Function 2. Function 2.
In fact, since the callFunction() is also defined in the second plugin, this is the one used.
I would like some advise on what is the best way to solve this problem.
Is it possible to create a thing similiar to a namespace ?
Thank to #syms answer, I have created the following example.
Plugin1:
$(function($) {
$.fn.initPlugin1 = function() {
console.log('Initialized Plugin1');
return $(this);
};
$.fn.initPlugin1.testFunction = function() {
$(this).append('Function 1.');
};
});
Plugin2:
$(function($) {
$.fn.initPlugin2 = function() {
console.log('Initialized Plugin2');
return $(this);
};
$.fn.initPlugin2.testFunction = function() {
$(this).append('Function 2.');
};
});
Main:
(function($)
{
$(document).ready(
function()
{
$("#div1").initPlugin1(); //Run correctly
$("#div2").initPlugin2(); //Run correctly
$("#div1").initPlugin1.testFunction(); //Fail
$("#div2").initPlugin2.testFunction(); //Fail
});
})(jQuery);
When I run my code, I got the following error: Cannot read property 'createDocumentFragment' of null.
Apparently, the this object is corrupted.
you can try this,
$(function($) {
$.fn.initPlugin1 = function() {
console.log('Initialized Plugin1');
return $(this);
};
});
$(function($) {
$.fn.initPlugin2 = function() {
console.log('Initialized Plugin2');
return $(this);
};
$.fn.callFunction = function(param) {
$(this).append(param);
};
});
(function($) {
$(document).ready(
function() {
$("#div1").initPlugin1(); //Run correctly
$("#div2").initPlugin2(); //Run correctly
$("#div1").initPlugin1().callFunction('function1');
$("#div2").initPlugin2().callFunction('function2');
});
})(jQuery);

get variable from a jQuery Plugin

I need to know how is possible to get a plugin variable outside the plugin, to test it with some test framework.
So this is my simplified plugin:
(function ($) {
$.fn.extend({
myPlugin: function (argumentOptions) {
var defaults = {
image: 'img/default.png',
};
this.textSend = '';
var options = $.extend(defaults, argumentOptions);
var globalHere = this;
return this.each(function () {
obj.mouseup(function(e) {
globalHere.textSend = 'test';
});
});
}
});
})(jQuery);
I need to the variable this.textSend outside the plugin.
I have tried in this way:
$(document).ready(function(){
var testfield = $('.txt');
testfield.myPlugin({
image:"../img/twitter.png"
});
testfield.focus();
testfield.trigger($.Event( "mouseup"));
console.log($.fn.myPlugin.textSend);
});
but the console.log return me undefined
How can i get that variable outside?
Thanks
You will want to make sure you are returning this like so:
(function($) {
$.fn.extend({
myPlugin: function(argumentOptions) {
var self = this;
self.textSend = 'something';
self.inc = 0;
self.mouseup(function(e) {
self.textSend = 'new thing #' + self.inc;
self.inc++;
});
return self;
}
});
})(jQuery);
var instantiated = $('button').myPlugin({});
$('input').val(instantiated.textSend);
$('button').click(function(e) {
$('input').val(instantiated.textSend);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>Current textSend:</label>
<input />
<br/>
<button>Change textSend</button>
Hopefully will get you on the right track.
Update
Try new code.
You can store it inside the closed scope you created around your plugin and expose it through another function. Of course it'll need some refactoring, but this is the general idea:
(function ($) {
var whateverNameYouWant; //here
$.fn.extend({
myPlugin: function (argumentOptions) {
var defaults = {
image: 'img/default.png',
};
this.textSend = '';
whateverNameYouWant = this.textSend; //here
var options = $.extend(defaults, argumentOptions);
var globalHere = this;
return this.each(function () {
obj.mouseup(function(e) {
globalHere.textSend = 'test';
whateverNameYouWant = this.textSend; //here
});
});
}
});
$.extend({
getWhateverNameYouWant: function() {
return whateverNameYouWant;
}
})
})(jQuery);
var value = $.getWhateverNameYouWant();
At line console.log($.fn.myPlugin.textSend);
use testfield.textSend . now it has become proprty of selector via myplugin.

jQuery - Detect value change which use .val() function

We all know that use the val() will not trigger the change event, so we also use .trigger('change') behind the val().
But the problem is that someone write the val() did't with trigger() and it's a external file that I can't edit it.
So, how can I detect value change through some code same like below:
$('.elem').on('change', function(){
// do something
});
My suggestion is to override jquery's val()
var originalValFn = jQuery.fn.val;
jQuery.fn.val = function() {
this.trigger('change');
originalValFn.apply( this, arguments );
}
jsfiddle: http://jsfiddle.net/2L7hohjz/js
var originalValFn = jQuery.fn.val;
function getErrorObject(){
try { throw Error('') } catch(err) { return err; }
}
jQuery.fn.val = function() {
if ($(this).hasClass( "element" )) {
var err = getErrorObject();
var caller_line = err.stack.split("\n")[4];
var index = caller_line.indexOf("at ");
var clean = caller_line.slice(index+2, caller_line.length);
console.log(clean);
console.log(arguments);
}
originalValFn.apply( this, arguments );
};
Try:
setTimeout(function() {
if (currentValue != previousValue)
{
// do something
}
}, 500);
Thank you,
I commonly use the solution from this post to get around problems like this one:
hidden input change event
watchField('.elem', function(){
//do some stuff here
});
function watchField(selector, callback) {
var input = $(selector);
var oldvalue = input.val();
setInterval(function(){
if (input.val()!=oldvalue){
oldvalue = input.val();
callback();
}
}, 100);
}
Try:
$('.elem').on('keyUp', function(){
// do something
});
or
$('.elem').on('lostFocus', function(){
// do something
});
Thank you,

how can I cause any change to a variable in an internal function to affect main variable value

I know java script doesn't have call by reference. So how can I solve this?
(function($){
$.fn.extend({
something: function(options) {
var Status;
var defaults = {
regex:/^([\u0600-\u06FF]|\s)*$/,
errortxt:"Invalid input",
emptytxt:"It should not be empty"
}
var options = $.extend(defaults, options);
$(this).bind('change', function () {
Status = true;
$(this).each(function() {
/*variables*/
var necessaryElement;
if (options.regex && options.errortxt && options.errorsection)
{
var filter = options.regex;
var $this = $(this);
var wrongMessage = options.errortxt;
var $errordiv = $("[ID$="+options.errorsection+"]");
} else{
console.log("Error : Not enough arguments for invoking something Plugin");
}
if (options.emptytxt)
{
var noMessage = options.emptytxt;
necessaryElement = true;
}
else
{
necessaryElement = false;
}
var elementvalue = $this.val();
/* Methods */
if (elementvalue != "" && necessaryElement) {
if (filter.test(elementvalue)){
$this.removeClass("error").addClass("ok");
$errordiv.fadeOut(300);
} else {
Status = false;
$this.removeClass("ok").addClass("error");
$errordiv.fadeIn(200);
$errordiv.text(wrongMessage);
}
} else if (elementvalue == "" && necessaryElement) {
Status = false;
$this.removeClass("ok").addClass("error");
$errordiv.fadeIn(200);
$errordiv.text(noMessage);
}
});
});
return Status;
}
});
})(jQuery);
and I call it in another js in this way:
var myarray=new Array();
myarray[0] = $('#selector').something({
regex:/^([\u0600-\u06FF]|\s)*$/,
// another options
});
$('#selector').change(function (){
alert (myarray[0]);
});
but it alerts undefined.
If I change var Status to var Status= true Then it always alerts true.
Can anyone help me? How I can change the code to return the desired Status?
Edit : Trying to be clearer.
Something() returns a value which is modified by change.
So when you call something you return the value unmodified.
Then you call change that will change the value, but it's not passed by reference in the array so it won't change anything.
You may want to use the data function available on JQuery objects for keeping data.
Here is a simplified version:
(function($){
$.fn.extend({
something: function(options) {
$(this).bind('change', function () {
$(this).data('status','true');
});
}
});
})(jQuery);
$(document).ready(function() {
var myarray=new Array();
myarray[0] = $('#selector').something({
regex:/^([\u0600-\u06FF]|\s)*$/
});
$('#selector').change(function (){
alert ($(this).data('status'));
});
});

Categories