Develop Reference

Transmit the Classname to a function

I have different "Profiles" in a Json-File. In an index.html different profile cards are shown and filled with the information of the Json-File. When you click on a Profil (Profil-Card) a detailed profile.html will be loaded and the function initateProfile will be executed.
$(document).on("click", ".profile-card", function () {
$('#page-content').load("sections/profile.html", function () {
initiateProfile($(this).data("profileid"));
});
});
I want to transmit the content of the profileid-class, which is the index for the Json-File.
function initiateProfile(id) {
var profile_data;
$.getJSON('data/profiles.json', function (data) {
profile_data = data[id];
$('.trn-name').text(profile_data.name);
$('.trn-studies').text(profile_data.studies);
$('.trn-stage').text(profile_data.stage);
});
}
Unfortunatly the id-variable is undefined. So the function can't get the information of the Json-File. What's the problem?
Thx

The issue is because this within the load() callback handler function is not the element which raised the event. It runs under a different scope. To fix this you need to save the element reference to a variable in the scope of the click handler, and use that within the callback, something like this:
$(document).on("click", ".profile-card", function () {
var profileId = $(this).data('profileid');
$('#page-content').load("sections/profile.html", function () {
initiateProfile(profileId);
});
});

Assuming that the data-profileid attribute is defined on the element which has the class .profile-card:
Your problem is this.
$(document).on("click", ".profile-card", function () {
$('#page-content').load("sections/profile.html", function () {
initiateProfile($(this).data("profileid")); // "this" points to the element with id "page-content"
});
});
One solution would be to use event.currentTarget:
$(document).on("click", ".profile-card", function (event) {
$('#page-content').load("sections/profile.html", function () {
initiateProfile($(event.currentTarget).data("profileid"));
});
});

Conditional addClass not working for each elements with same class

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).

.each() bind hover events and pass a variable to handler functions

I'm trying to bind a hover event to some elements, walking through them with $.each, with the peculiarity that I want to pass a css classname as a parameter of the hover's handler functions, but it seems that the scope is not the one I'm expecting. I've tried to
$(document).ready(function () {
var $madewithLabels = $("#made-with .label");
// Binding
$madewithLabels.each(function (index) {
// get bootstrap css classname for the current element in the loop
var bsClass = getHoverClass($(this));
console.info("css class is: " + bsClass + " - " + typeof(bsClass));
$(this).hover(
function (bsClass) {
console.info(bsClass);
$(this).addClass(bsClass);
},
function (bsClass) {
console.info(bsClass);
$(this).removeClass(bsClass);
}
);
});
});
1st console.info: getHover() gets the right css class name (string) when the events are bound (on document ready)
2nd/3rd console.info: when hover's handler functions are executed bsClass is an object (I guess it's a jQuery one)
I've solved it this way:
$(document).ready(function () {
var $madewithLabels = $("#made-with .label");
// Binding
$madewithLabels.each(function (index) {
$(this).hover(
function () {
$(this).addClass(getHoverClass($(this)));
},
function () {
$(this).removeClass(getHoverClass($(this)));
}
);
});
});
But my questions are...
Is using $(this) the right solution?
Why when I pass a string variable to the handler functions I get an object when the function is called? is it because some type casting? is it because closure scope?
Thanks to the jQuery gurus answering!

What you're getting in the hover callback is an Event object, as mentioned by the docs:
handlerIn
Type: Function( Event eventObject )
A function to execute when the mouse pointer enters the element.
So in your first example change:
function (bsClass) {
To this:
function () {
So you keep using the original bsClass that you calculated before.

How do I pass the this element to the result of getJSON?

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
});
});

jQuery slideToggle() callback function

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
});
});