Develop Reference

jQuery : "this" property is not working on $(document) click

I want to change my clicked image src. I tried it using this. The reason is I am using $(document) for click function. The code I am using is shown below. It will change without using this property. But I need to work it using this property.
$document.on('click', 'img.flagImg', function () {
_flag();
})
var _flag = (function(){
$(this).attr('src',"images/flag.jpg")
})
but its not getting. can any one suggest another option for getting a good solution.

When you call a function like that, _flag(), this is set to the global object (in loose mode) or undefined (in strict mode).
Just let jQuery set this for you:
$document.on('click', 'img.flagImg', _flag);
But if you want to avoid jQuery passing it the event argument, you can use call to set this explicitly instead:
$document.on('click', 'img.flagImg', function() {
_flag.call(this);
});

How to pass `$(this)` as parameter to a "callready" function in Javascript

The leanModal function triggers a modal with some parameters. One of this parameters is a function (ready) that will be executed once the Modal is open. The point is, I need to do some stuff inside that function (ready) just with the element (tag) which triggered the modal, so I need to pass $(this) as parameter to that function. The leanModal() function is provided by MaterializeCss which's the framework that I'm using.
I've been trying this, but thisTag is always undefined. I also have tried to pass directly $(this) to the function, but it also doesn't work at all, it's still undefined. So, how can I reach this?
$('.modal-trigger-editMedic').leanModal({
thisTag: $(this),
ready: function(thisTag){
var refereeNum = thisTag.siblings("[name*='refereeNumToEdit']" )[0].value;
$('#surname').val($("input[id*='medicNameToModal"+refereeNum+"'").val());
}
});

Following the source code, .leanModal supports a ready function (which is triggered once the modal is visible) but doesn't bind or send the element which triggered the modal, the easiest way to fix this is to store a reference outside. To do so, you need to iterate over the triggers yourself instead of relying on that functionality of provided by this jQuery plugin.
Like so:
var $surname = $('#surname'); // you should store the selector as a reference
// outside the loop for better performance
$('.modal-trigger-editMedic').each(function() {
var $this = $(this); // this is the current item in the set of elements,
// therefore our trigger element
// EDIT: using var makes this a local variable
$this.leanModal({
ready: function() {
var refereeNum = $this.siblings("[name*='refereeNumToEdit']" )[0].value;
$surname.val($("input[id*='medicNameToModal"+refereeNum+"'").val());
}
});
});

When you are inside the leanModal it becomes this. Try setting a var to $(this) and pass that through.
var that = $(this);
$('.modal-trigger-editMedic').leanModal({
thisTag: that,
ready: function(thisTag){
var refereeNum = thisTag.siblings("[name*='refereeNumToEdit']" )[0].value;
$('#surname').val($("input[id*='medicNameToModal"+refereeNum+"'").val());
}
});

Jquery callback function variables always local?

Why cant i set the $('#temizle').innerHTML to string 'Temizlendi';
The code blow just doesnt work. But in the line before end i can set it. I'm confused.
$('#temizle').click(function(){
$.post('OdbcConnection.php',
{islem: 'Temizle'},
function(data, status){
if(status == 'success'){
alert(status);
$('#temizle').innerHTML = 'Temizlendi';
}else{
this.innerHTML = 'Hata Var';
}
});
//this.innerHTML = 'Temizlendi';
});

The short answer is because innerHTML is a native DOM node method, not a jQuery method, therefore calling it on a jQuery object such as $('#temizle') does nothing but set a new innerHTML property in the jQuery object. It works outside of your $.post call because this inherits a native DOM node, not a jQuery object.
Try using the $.html() method instead of innerHTML:
$('#temizle').html('Temizlendi');
Alternatively, outside of the scope of your $.post could also be re-written from this.innerHTML to $(this).html(), as wrapping this would convert it into a jQuery object.
If you absolutely have to use innerHTML rather than the jQuery method, as mentioned in other answers you can also get a DOM node from a jQuery object by using the get() method or accessing the node at the 0 index of the jQuery object:
$( '#temizle' ).get(0).innerHTML = 'Foo';
$( '#temizle' )[0].innerHTML = 'Bar';
Although that would sort of defeat the purpose of using jQuery.
Another thing to remember is that the value of this depends on the current scope, so this will not be equal to your element when it is called inside of your $.post. To get around this, you could cache your element outside of the scope of your post call so you can easily refer back to it within the callback:
$('#temizle').click(function(){
var $el = $( this );
$.post('OdbcConnection.php',
{islem: 'Temizle'},
function(data, status){
if(status == 'success'){
alert(status);
$el.html( 'Temizlendi' );
}else{
$el.html( 'Hata Var' );
}
});
//$el.html( 'Temizlendi' );
});
To get a better understanding of this, I'd highly recommend checking out the MDN reference on it here.

Is alert(status) getting called? If not this simply means your POST request failed.
If it indeed fails, check if the path to the php file is right. What you have now is a relative path, maybe you need to turn it to an absolute one,
ie.: change 'OdbcConnection.php' to '/OdbcConnection.php' or '/{SOME_FOLDER}/OdbcConnection.php'

first you have to write
$('#temizle').html('Temizlendi') //not $('#temizle').innerHTML='Temizlendi'
or you can use
$('#temizle')[0].innerHTML ='Temizlendi'
second:you used
this.innerHTML = 'Hata Var';
but "this" is for function not for $('#temizle') element

When you use $('#temizle').InnerHTML, you're calling the method innerHTML, which belongs to DOM objects, but not the jQuery objects. In this case you should use the html() method of jQuery:
$('#temizle')html('Temizlendi');

Give an object which calls a function

I'm new in jQuery and i'm trying to give an object which triggers a function and gets its parent's ID. I have HTML:
<tr id="9"><td>First</td><td class="edit"></td><td class="delete" onclick="DeleteMaster(this)"></td></tr>
And jQuery function:
function DeleteMaster(f){
var master = f.parent().attr('id');
alert (master);
}
But i'm getting an error:
Uncaught TypeError: Object # has no method 'parent'
What's wrong?

You're passing in the DOM element, you need to convert this to a jQuery object:
function DeleteMaster(f){
var master = $(f).parent().attr('id');
alert (master);
}
BUT
You shouldn't declare onclick handlers like that. It's bad practice and can lead to hassle if you want to change it in the future. The standard jQuery way of doing things is:
// Wait for DOM to become ready
$(function() {
// This replaces your "onclick" and "DeleteMaster" function
$(".delete").on("click", function() {
// Now you can access that <td> by calling $(this)
var master = $(this).parent().attr("id");
});
});
That way, you don't have to add code into your HTML markup.

It is because f is not jquery object. You should use $(f) .Try this:
function DeleteMaster(f){
var master = $(f).parent().attr('id');
alert (master);
}
Demo

Using $(this) & event in named handler function

I have this function:
function showPost(event){
event.preventDefault();
$(this).parent('article').animate({width:'100%'}, 'slow');
}
I am attempting to use it like so:
$('.article-header').click(function(event){showPost(event);});
When I use it in the above manner, the event property is passed just fine, however $(this) doesn't work within the function. If I attempt to include this as a parameter in the .click method, it returns an error claiming this is undefined. I have even gone so far as to set var ths = $(this); to no avail.
Please, what is the proper way to make this function happen?

Just use the function directly:
$('.article-header').click(showPost);
You're loosing this because you're calling the function "naked", with no object receiver. You could do this too (but don't because there's no point here):
$('.article-header').click(function(event) { showPost.call(this, event); });