I want to do the following...
$('.showcomments').click(function() {
$(this).parent().hide();
jQuery.getJSON('comments.json', function($data) {
$(this).parent().append($data['value'])
//this is meant to be the instance of
//$('.showcomments') that has been clicked
});
});
the problem is that the callback of getJSON of course did not inherit the this item... but how do I do what I am intending?
Reference it in a variable:
$('.showcomments').click(function()
{
var $th = $(this); // References the clicked .showcomments
$th.parent().hide();
jQuery.getJSON('comments.json',function($data)
{
$th.parent().append($data['value']); // will reference the correct element
});
});
Related
I can only use JavaScript to resolve the issue. I tried writing a for loop, but am getting undefined when hovering. I basically have a dynamically generated submenu. When a li is hovered over on the submenu, the inner HTML is suppose to change for the content area to the right of the lis.
sideCol.getElementsByTagName('li')[0].addEventListener('mouseover', function(){
document.getElementsByClassName('categoryExplorer-content')[0].children[2].innerHTML = document.getElementsByClassName('categoryExplorer-content')[0].children[1].innerHTML;
});
sideCol.getElementsByTagName('li')[1].addEventListener('mouseover', function(){
document.getElementsByClassName('categoryExplorer-content')[0].children[2].innerHTML = document.getElementsByClassName('categoryExplorer-content')[1].children[1].innerHTML;
});
sideCol.getElementsByTagName('li')[2].addEventListener('mouseover', function(){
document.getElementsByClassName('categoryExplorer-content')[0].children[2].innerHTML = document.getElementsByClassName('categoryExplorer-content')[2].children[1].innerHTML;
});
sideCol.getElementsByTagName('li')[3].addEventListener('mouseover', function(){
document.getElementsByClassName('categoryExplorer-content')[0].children[2].innerHTML = document.getElementsByClassName('categoryExplorer-content')[3].children[1].innerHTML;
});
sideCol.getElementsByTagName('li')[4].addEventListener('mouseover', function(){
document.getElementsByClassName('categoryExplorer-content')[0].children[2].innerHTML = document.getElementsByClassName('categoryExplorer-content')[4].children[1].innerHTML;
});
The looping is very simple, just use local variable (ix).
var count = sideCol.getElementsByTagName('li').length;
for(var i=0;i<count;i++) {
(function(ix) {
sideCol.getElementsByTagName('li')[ix]
.addEventListener('mouseover', function() {
document.getElementsByClassName('categoryExplorer-content')[0]
.children[2].innerHTML =
document.getElementsByClassName('categoryExplorer-content')[ix]
.children[1].innerHTML;
});
})(i);
}
Use forEach() to loop over the elements and bind the event listeners. This will then give you the index as a closure variable, which you can use in the handler function to access the appropriate element.
[].forEach.call(sideCol.getElementsByTagName('li'), function(el, i) {
el.addEventListener('mouseover', function() {
var explorers = document.getElementsByClassName('categoryExplorer-content');
explorers[0].children[2].innerHTML = explorers[i].children[1].innerHTML;
});
});
Hi I have a method that accepts an id as a parameter for my function:
function exportDetails($div) {
$($div).each(function () {
alert(this.id);
});
I need to get all the table's id's that are within this div, something similar to this:
function exportDetails($div) {
$($div > table).each(function () {
alert(this.id);
});
Here is how I am calling the function and each of the itemDetails have dynamically generated tables and I need to get their id's since they are all unique:
exportDetails.apply(this, [$('#itemDetails')]);
Thanks!
Something like this should work:
function exportDetails($div) {
return [].map.call($div.children('table'), function(table) {
return table.id;
});
}
i.e. just return an array containing the .id of every table element found as an immediate descendant of $div.
You code is not formatted correctly. Also, I don't know if you are feeding this function a group of tables that are inside of your $div parameter. Here are some options.
// this works if you pass in an element with nested table that have ids.
function exportTableToCSV($div) {
$($div+ ' > table').each(function () {
alert( $(this).attr('id') );
});
}
// this works if you want to get all the HTML elements with an id or if you want to get all the ids of elements which also have the same class assigned to them.
function exportTableToCSV($div) {
$($div).each(function () {
alert( $(this).attr('id') );
});
}
exportTableToCSV('div');
// or
exportTableToCSV('.yourClass');
Les say I have some buttons with same class. On page load I am checking some value using ajax for each button. Depending on returned value of ajax request I want to add some class to the buttons, but it is not working,
$(document).ready(function(){
$('.add-remove-permissoion').each(function(){
var child = $(this).val();
var parent = $('#parent-name').text();
$.get('my-url', function(data){
if(data == 1){
$(this).addClass('glyphicon glyphicon-ok');
}else{
$(this).addClass('emptybox-blank');
}
});
});
});
I have checked that my ajax request is returning correct data. What is that I am doing wrong here?
The problem is the this reference inside the ajax callback, in the success callback this refers to the jqXHR object not the dom element reference that is why it is not working.
You can use a closure variable as given below to fix the problem
$(document).ready(function () {
$('.add-remove-permissoion').each(function () {
var $this = $(this),
child = $this.val();
var parent = $('#parent-name').text();
$.get('my-url', {}, function (data) {
if (data == 1) {
$this.addClass('glyphicon glyphicon-ok');
} else {
$this.addClass('emptybox-blank');
}
});
});
});
this in the context of the $.get handler doesn't refer to the element of the current iteration. Each function has it's own this value. You have several options.
Use the second parameter of the each callback.
$('.add-remove-permissoion').each(function(index, element) {
Use $.proxy or Function.prototype.bind method for setting the this value of the handler.
$.get('my-url', function(data) {
// ...
}.bind(this));
Cache the this value of the each handler and use it in your $.get handler.
var elem = this;
$.get('my-url', function(data) {
// ...
$(elem)...
});
Also note that there is a syntax error in your code:
$.get('my-url'}, function(data){
// -----------^
Problem is $(this) within ajax call does not refer to the button clicked.
Replace $(this).addClass with myElement.addClass. Create myElement within click event just before the ajax call: var myElement = $(this).
Could someone tell me why in the first alert(items.index($(this))) = 1 and the second alert(items.index($(this))) = -1. How does this value get changed within the other function?
$(function () {
var items = $('#v-nav>ul>li').each(function () {
$(this).click(function () {
//remove previous class and add it to clicked tab
items.removeClass('current');
$(this).addClass('current');
alert(items.index($(this)));
$('#v-nav>div.tab-content').fadeOut("slow", function () {
alert(items.index($(this)));
$('#v-nav>div.tab-content').eq(items.index($(this))).fadeIn("slow");
});
// window.location.hash = $(this).attr('tab');
});
});
this refers to current object.
In first version,
this is an item of $('#v-nav>ul>li') list.
While in second version,
this is DOM object selected by $('#v-nav>div.tab-content')
If you want to retain the previous value of this, then cache it in a variable.
(Caching $(this) is a very good practise, as you always save a function call).
When you use $(this) you actually passes this into $ function.
$(function () {
var items = $('#v-nav>ul>li').each(function () {
var $this = $(this);
$this.click(function () {
//remove previous class and add it to clicked tab
items.removeClass('current');
$this.addClass('current');
alert(items.index($this));
$('#v-nav>div.tab-content').fadeOut("slow", function () {
alert(items.index($this));
$('#v-nav>div.tab-content').eq(items.index($(this))).fadeIn("slow");
});
// window.location.hash = $(this).attr('tab');
});
});
Inside the callback function for the animation, this is not the element that you clicked, it's the element being animated.
"The callback is not sent any arguments, but this is set to the DOM
element being animated."
http://api.jquery.com/fadeOut/
(And if it hadn't been set to the animated element, it would have been a reference to the window object.)
Copy the reference to a variable outside the animation call:
var t = this;
$('#v-nav>div.tab-content').fadeOut("slow", function () {
alert(items.index($(t)));
$('#v-nav>div.tab-content').eq(items.index($(t))).fadeIn("slow");
});
You have to consider the context of each "this", each of the callbacks has a distinct "this" variable. If you want to keep the original this around, do something like:
var self = this;
Here is the jQuery slideToggle function:
$('.class').click(function() {
$(this).parent().next().slideToggle('slow', function() {
// how can I access $('.class') that was clicked on
// $(this) returns the $(this).parent().next() which is the element
// that is currently being toggled/slided
});
});
In the callback function I need to access current .class element (the one being clicked on). How can I do that?
Take a reference to the element outside of the callback, you can then use this inside the callback function.
$('.class').click(function() {
var $el = $(this);
$(this).parent().next().slideToggle('slow', function() {
//use $el here
});
});