How to get outer element value in JavaScript - javascript

I have the following jQuery code:
$('.active #search').on('mouseout', function () {
$('#search_box #search').not('.active').each(function(){
this.value = $('.active #search')[0].value;
})
});
It works, but I have to call $('.active #search') twice. How can I refer to the $('.active #search') array from within my inner function?
P/S: I know I'll be complained about giving multiple elements same ID, but this seem to be generated by Rails automatically (text_field_tag).

I think this is what you're looking for:
$('.active #search').on('mouseout', function () {
var val = $(this)[0].value; //cache value of $('.active #search').
$('#search_box #search').not('.active').each(function () {
this.value = val;
})
});

You can do something like below. I added self = $(this)
$('.active #search').on('mouseout', function () {
var self = $(this);
$('#search_box #search').not('.active').each(function(){
this.value = self[0].value;
});
});
Here is a link to very good explanation of 'this' keyword, explained by Jeffrey Way
tutsplus.com/lesson/the-this-keyword

Therese several ways of achieving this:
var activeSearch = $('.active #search');
activeSearch.on('mouseout', function () {
$('#search_box #search').not('.active').each(function(){
this.value = activeSearch.val();
})
});
notice that since this is an id you are querying for you should have only one element so you can replace activeSearch[0].value with activeSearch.val();
second way:
$('.active #search').on('mouseout', function () {
var activeSearch = $(this);
$('#search_box #search').not('.active').each(function(){
this.value = activeSearch.val();
})
});
when in an event handler $(this) will give you a jquery object of the event sender. you can further simplify it by ignoring jquery and just using plain elements by doing the following:
$('.active #search').on('mouseout', function () {
var activeSearch = this;
$('#search_box #search').not('.active').each(function(){
this.value = activeSearch.value;
})
});
this is the same as above but you arent dealing with jquery objects.
What you end up using depends on you but the final code snippet would be my preferred way.

You can use $(this) instead of using the $('.active #search')

Related

Undefined $(this) on nested functions

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

Attach behaviour to namespace calling in Javascript?

I am very mediocre in Javascript and looking around I was not able to find any information on how to achieve the behaviour I want or if it's even possible.
I have a namespace form to access my HTML form:
var form = (function(){
all = function () $('#myform .entry');
first = function () $('#myform .entry').first();
})();
form.all.css('color', 'blue');
form.first.css('color', 'red');
Desired extra behaviour:
form.css('background-color', 'green'); // should be calling $('#myform')
Is this possible?
You don't have a namespace, you have an object literal containing functions (and now you edited it, and added an IIFE, which makes even less sense), and the functions have to return something to be able to use it
var form = {
all : function () {
return $('#myform .entry');
},
first : function () {
return $('#myform .entry').first();
}
}
form.all().css('color', 'blue');
form.first().css('color', 'red');
or if you want to store the collection in an object without looking up in the DOM each time
var form = $('#myform');
form.all = $('#myform .entry');
form.first = $('#myform .entry').first();
form.all.css('color', 'blue');
form.first.css('color', 'red');

Merging events from one selector to another

I would like to know if it's possible to store the events from a jQuery selector and apply it to another selector?
Something similar to $('selector').clone(true) but actually clones the events only and not the element.
$('.class1').on('click.click1', function(e) {
alert('click 1')
});
$('.class2').on('click.click2', function(e) {
alert('click 2')
});
// pseudo
$('.class2') cloneEvents from $('.class1');
Quick and dirty jQuery plugin for this purpose
This reads the event handlers bound to $source via jQuery using the internal method _data, iterates over them and binds them to $target. Derived from this snippet.
;(function($, doc, win) {
"use strict";
$.fn.cloneEventsFrom = function($source) {
var $this = $(this),
source = $source.get(0);
$.each($._data(source, 'events'), function() {
$.each(this, function() {
$this.bind(this.type, this.handler);
});
});
};
})(jQuery, document, window);
Usage Demo here: http://jsfiddle.net/marionebl/4Jv37/1/
var $target = $('.target'),
$source = $('.source')
$target.cloneEventsFrom($source);

Call Javascript Function with argument and use argument as a variable name

I've the following snip of a code:
var about = "about.html";
function loadPage(target){
$("#dashboard").load(target);
}
$(".nav li").click(function(){
loadPage($(this).attr("class"));
});
So when I click on a button like <li class="about">, target is = about.
But in that way, $("#dashboard").load(target); doesn't load the variable about which is the html-file which I want to load.
So how is it possible to call the variable in this way?
You seem to miss the .html part. Try with
$("#dashboard").load(target+'.html');
But, supposing you have only one class on your li element, you'd better use this.className rather than $(this).attr("class").
EDIT :
if you want to use your about variable, you may do this :
$("#dashboard").load(window[target]);
But it would thus be cleaner to have a map :
var pages = {
'about': 'about.html',
'home': 'welcome.jsp'
}
function loadPage(target){
$("#dashboard").load(pages[target]);
}
$(".nav li").click(function(){
loadPage(this.className);
});
A stupid answer : create a <a> tag, and set its href attribute to the correct value.
Otherwise :
A standard way to store key: values pairs in javascript is to use a plain object :
var urls = {};
urls['about'] = 'mysuperduperurlforabout.html';
function loadPage(target) {
var url = urls[target];
//maybe check if url is defined ?
$('#dashboard').load(url);
}
$(".nav li").click(function(){
loadPage($(this).attr("class") + ".html");
});
or
$("#dashboard").load(target+".html");
You can call the variables like this (if that's what you asked):
var test = 'we are here';
var x = 'test';
console.log(window[x]);
It's similar to the $$ in PHP. The output will be:
we are here in the console window.
You could put the "about" as an object or array reference similar to:
var pageReferences = [];
pageReferences["about"] = "about.html";
var otherReference = {
"about": "about.html"
};
function loadPage(target) {
alert(pageReferences[target]);
alert(otherReference[target]);
$("#dashboard").load(target);
}
$(".nav li").click(function () {
loadPage($(this).attr("class"));
});
Both of these alerts will alert "about.html" referencing the appropriate objects.
EDIT: IF you wished to populate the object based on markup you could do:
var otherReference = {};
$(document).ready(function () {
$('.nav').find('li').each(function () {
var me = $(this).attr('class');
otherReference[me] = me + ".html";
});
});
You could even store the extension in an additional attribute:
var otherReference = {};
$(document).ready(function () {
$('.nav').find('li').each(function () {
var me = $(this).attr('class');
otherReference[me] = me + "." + $(this).attr("extension");
});
});
Better would be to simply put the page reference in a data element:
<li class="myli" data-pagetoload="about.html">Howdy</li>
$(".nav li").click(function () {
loadPage($(this).data("pagetoload"));
});

.append link will not fire onclick function

I've searched around I cannot find the answer to this. In my code, a link is created inside of a div and given an onclick value to pass an argument to a function. I cannot figure out why it will not fire.
var imgCount = 0;
var curImg;
function resetImg(target) {
alert(target);
}
$(".add").click(function () {
imgCount = imgCount + 1;
curImg = "theImg" + imgCount;
//Here we add the remove link
$('#links')
.append('Call Function');
$('.dynamic').css('display', 'block');
});
Here's the fiddle:
http://jsfiddle.net/stewarjs/4UV7A/
I've tried using .click() when creating the link, but the argument being passed needs to be unique to each link. I've tried grabbing $(this).attr("id") but the value comes back undefined.
Thanks for any and all help.
Jeff
Rather than try to mangle HTML into JavaScript, I suggest you use the jQuery methods already available to you.
$('#links')
.append($("<a>").attr('href', '#').on('click', function () { resetImg(curImg);
}).addClass('dynamic').text('Call Function'));
http://jsfiddle.net/ExplosionPIlls/4UV7A/1/
remove javascript: from onclick, it should like like this: onclick="resetImg(\'' + curImg + '\');"
There's always a way to get rid of onclick handlers. Here's how I'd do it:
var image_count = 0;
$('#links').on('click', '.dynamic', function(e) {
e.preventDefault()
alert($(this).data('image'));
});
$('.add').click(function () {
$('<a />', {
'href': '#',
'data-image': 'theImg' + (++image_count),
'class': 'dynamic',
'text': 'Call function'
}).appendTo('#links');
});
Demo: http://jsfiddle.net/4UV7A/4/

Categories